我正在尝试创建响应式导航栏。我希望它具有可访问性标准。因此，例如，用户应该能够使用键盘导航该网站。
我还想要动画汉堡图标。非常简单的事情，就像这样：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js
但是上面的解决方案根本不符合语义。用户无法使用键盘（所以我不仅想处理鼠标的“单击”事件，还想处理键盘的“输入”或“空格”）。 我刚刚读到，我应该使用按钮来实现此目的，而不仅仅是链接或（更糟糕的是）div。 （请注意，在 stackoverflow 网站上，汉堡包图标不在按钮内，它只是一个链接 - 为什么？）
通过一项简短的研究，我知道，内部按钮我可以使用 span，但不能使用 div。我不确定是否可以将显示属性设置为按钮内的跨度，作为一个块？我认为我需要该块属性来制作我的动画汉堡图标。
对此有什么想法吗？
您可以借助js编写实现输入或空格的菜单点击功能的代码。我添加了下面的代码，展示了如何通过按这两个键来使菜单发挥作用。
function myFunction(x) {
x.classList.toggle("change");
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter' || event.key === ' ') {
const container = document.querySelector('.container');
container.click();
}
});.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</body>
</html>