Html 如何根据浏览器大小更改tabindex和aria hidden的值？

对于桌面浏览器大小，我在页面顶部有一个导航栏，当浏览器缩小到手机大小时，它会变成一个汉堡包菜单。由于菜单以移动大小隐藏，因此出于可访问性原因，我认为菜单中的元素需要具有

tabindex=-1

和

aria hidden=true

属性。该网站正在使用HTML/Jinja2、CSS、客户端JS和Python/Flask构建

从下面的代码笔中可以看到，打开菜单后，我可以切换

aria hidden

属性

---

[使用CodePen的我的演示演示演示菜单]（）

查看窗口

调整大小

事件-

以及

window.innerWidth

-

resize

事件在窗口大小更改时侦听，而

innerWidth

将告诉您窗口的大小，以便您可以根据窗口大小有条件地修改DOM

下面是一个简单的例子，说明您可能希望做什么-

window.addEventListener('resize', function() {
  if (window.innerWidth > 800) {
    console.log('Window is greater than 800px');
  } else {
    console.log('Window is less than or equal to 800px')
  }
});

---

事实上，最好和最简单的方法是完全依赖CSS显示属性，而不是其他任何东西

由于显示而未显示的元素：none不可聚焦，也不可由屏幕阅读器读取。这是含蓄的。在本例中，您不需要担心aria hidden或tabindex，这要容易得多

---

您可以使用CSS属性可见性而不是显示，如果您愿意，效果是一样的。

对于任何陷入类似问题的人-想要创建一个不会中断tabindex流和screenreader流的简单下拉菜单，那么我解决这个问题的方法就是使用简单的CSS+JS。它的步骤是：

在移动断点处，使用

display:none隐藏菜单并显示汉堡

单击hamburger调用一个JS函数，该函数向菜单中添加一个CSS类，该类导致显示菜单，因为该类具有

display:flex

，并且样式表中的样式低于步骤1中提到的CSS样式，因此会覆盖它。

单击hamburger调用相同的JS函数，但这次删除了在步骤2中添加的类，从而隐藏了菜单

正如昆廷克和格雷厄姆·里奇所建议的，我使用了

display:none

而不是

height:0

来隐藏菜单，因为这解决了仅键盘或屏幕阅读器用户的问题

[在Codepen中查看演示代码。][1] [代码笔]

注：
如果您正在考虑使用JS切换

display:none

/

display:flex

，那么我警告您可能会面临一些特殊性问题。这是我最初的尝试，但我遇到了一些特殊性问题，我只能使用

来解决！重要信息

。根据我的示例，简单地添加和删除类不会产生特殊性问题，因为没有内联样式或html

ID

---

[1] ：

您可以在菜单列表上使用

display:none

，并在菜单打开时进行切换，这样就不需要

aria hidden

，

tabindex=“-1”

等。还需要注意，您需要给菜单按钮一些屏幕阅读器可以理解的文本（

aria label=“menu”

）并在菜单打开时添加

aria expanded=“true”

。最后，要打开菜单，请使用

而不是锚定，这是一种反模式（快速规则：如果URL发生变化，请使用锚定，否则请使用

）。@GrahamRitchie我在尝试实现您的想法时遇到了困难，当我单击汉堡按钮时，导航不会显示。你能看一下下面的代码吗？我喜欢你的想法。听起来我不需要修改太多代码，谢谢你提供了额外的可访问性提示！刚刚在MDN上发现，在以下情况下不应添加“aria hidden=“true”：元素或元素的祖先被隐藏并显示为“none”引用：