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

Question

对于桌面浏览器大小，我在页面顶部有一个导航栏，当浏览器缩小到移动大小时，它会变成一个汉堡菜单。由于菜单在移动尺寸下是隐藏的，因此出于可访问性的原因，我认为菜单中的元素需要具有 tabindex=-1 和 aria-hidden=true 的属性。该网站正在使用 HTML/Jinja2、CSS、客户端 JS 和 Python/Flask.

构建

正如您从下面的 CodePen 中看到的那样，一旦打开菜单，我就可以切换 aria-hidden 属性。

[我用CodePen演示响应式菜单](https://codepen.io/janlikescodepen/pen/wvJmdBZ)

Answer 1

看看 window resize 事件 -
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

以及window.innerWidth -
https://developer.mozilla.org/en-US/docs/Web/API/window/innerWidth

resize事件监听window大小变化时，innerWidth会告诉你window是什么大小，这样你就可以有条件地修改DOM 取决于 window 尺码。

这是一个简单的例子，说明您可能想要做什么 -

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')
  }
});

Answer 2

事实上，最好和最简单的方法就是完全依赖 CSS 显示属性，仅此而已。

由于 display:none 而未显示的元素无法聚焦，也无法通过屏幕阅读 reader。这是隐含的。在这种情况下，您无需担心 aria-hidden 或 tabindex，这要容易得多。

你可以用CSS 属性可见性代替显示，如果你愿意，效果是一样的。

Answer 3

对于遇到类似问题的任何人 - 想要创建一个不中断 tabindex 流和屏幕阅读器流的简单下拉菜单，那么我对这个问题的解决方案是使用简单的 CSS + JS。它的步骤是：

在移动断点处使用 display:none; 隐藏菜单并显示汉堡包
点击汉堡包调用一个 JS 函数添加一个 CSS class 到菜单，导致菜单显示，因为 class 有 display:flex 并且较低比第 1 步中提到的 CSS 样式更靠下的样式表，因此覆盖它。
点击汉堡包调用相同的 JS 函数，但这次删除了在步骤 2 中添加的 class，从而隐藏了菜单。

根据 QuentinC 和 Graham Ritchie 的建议，我使用 display:none 而不是 height:0 来隐藏菜单，因为这解决了仅键盘或屏幕阅读器用户的问题。

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

备注：
如果您正在考虑使用 JS 来切换 display:none/display:flex，那么我警告您，您可能会遇到一些特殊性问题。这是我最初的尝试，但我遇到了只能使用 !important 解决的特异性问题。根据我的示例，简单地添加和删除 class 不会产生特异性问题，因为没有内联样式或 html ID.
[1]: https://codepen.io/janlikescodepen/pen/yLMKxZB

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

How to change values of tabindex and aria-hidden depending on browser size?

html

css

accessibility

wai-aria

tabindex