Question

如果您从手机上访问www.arbetsformedlingen.se，您会找到一个菜单。

如果您打开该菜单，则只能访问该菜单中的项目，因为点击菜单外会关闭菜单。
如果您出于某种原因正在使用键盘，则无法将其标记出来菜单。

但是，使用screen reader VoiceOver in IOS的访问者可以通过使用向左/向右滑动手势来访问DOM中的上一个/下一个对象，从而移出该菜单。

问题：当菜单可见时，是否有某种方法可以阻止这些用户访问菜单外的对象？

由于CMS，

不合适的解决方案将主要内容和菜单放在同一节点级别，如下面的简化代码所示：

<body>
  <div class=”maincontent” aria-hidden=”false”>
      // Main content.
  </div>
  <div class=”mobilemenu” aria-hidden=”true” style="display:none">
    // Menu.
  </div>
</body>

打开菜单时，会切换aria-hidden和display：none，以便只显示页面内容或菜单。

另一个不合适的解决方案是在菜单打开时将aria-hidden切换到其他所有对象，但由于性能问题，这是不可能的。

所以，任何建议，想法等都非常受欢迎!!!

Answer 1

使用HTML5，您可以在菜单中的元素上将“ tab-index ”设置为正数。这将把焦点放在那些元素上。 `

<div class="menu-container">
  <div class="menu">
    <div tabindex="1">Menu Item 1</div>
    <div tabindex="2">Menu Item 2</div>
    <div tabindex="2">Menu Item 3</div>
  </div>
</div>

这可能不是最佳解决方案，具体取决于您尝试完成的内容以及代码结构的外观。您需要确保正确使用“ tab-index ”属性，以免破坏可访问性。

Good description and example

WebAIM-tabindex-accessibility

VoiceOver：如何防止用户访问菜单外的对象？

1 个答案: