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

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

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

构建

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

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

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

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

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

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

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

  1. 在移动断点处使用 display:none; 隐藏菜单并显示汉堡包
  2. 点击汉堡包调用一个 JS 函数添加一个 CSS class 到菜单,导致菜单显示,因为 class 有 display:flex 并且较低比第 1 步中提到的 CSS 样式更靠下的样式表,因此覆盖它。
  3. 点击汉堡包调用相同的 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