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

编程问答 2022-04-28

问题描述

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

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

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

解决方法

查看窗口 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 事件侦听窗口大小何时发生变化，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 display 属性，别无他法。

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

你可以使用CSS属性visibility来代替display，如果你愿意，效果是一样的。

,

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

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

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

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

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

accessibilityaccessibilityhtmltabindextabindexwai-aria