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

如果您通过手机访问www.arbetsformedlingen.se，您会发现一个菜单

• 如果打开该菜单，则只能访问该菜单内的项目，因为点击菜单外的将关闭菜单
• 如果由于某种原因正在使用键盘，则无法从中取出制表符 那份菜单

但是，使用的访问者只需使用向左/向右滑动的手势来访问DOM中的上一个/下一个对象，即可从该菜单中移出

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

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

//主要内容。
//菜单。

使用HTML5，您可以在菜单中的元素上将“选项卡索引”设置为正数。这将为这些元素设置焦点`

菜单项1
菜单项2
菜单项3

如果您可以定义为什么要防止选项卡从菜单中退出，这可能有助于解决问题。否则，根据我看到的情况，您将菜单视为一种模式（允许

Esc

关闭它，不释放焦点，关闭时将焦点返回菜单按钮，尽管第一次打开时没有将焦点放在关闭按钮上）。这是你的意图吗？很抱歉迟了回复。：-）问题不在于菜单外的“标签”，而是阻止Voiceove用户在菜单可见时访问菜单外的对象。（菜单中还有其他问题，但我们也意识到并处理了它们）。在我看来，您仍然希望将其视为模态。如果VoiceOver用户可以进入菜单，那么他们应该可以退出。模态通过使背景页处于惰性状态来防止这种情况。您仍然需要添加对

Esc

键的支持。很抱歉，回复太晚了。：-）问题不在于菜单外的“Tab”，而是在菜单可见时阻止Voiceove用户访问菜单外的对象。不要使用正的

tabindex

值。请参阅您链接的WebAIM文章中的警告：“任何

tabindex

值为1+的元素将在没有

tabindex

值（或

tabindex=“0”

）的元素之前接收键盘焦点。”注意，用户一开始进行选项卡操作，就会出现在您的菜单中。很抱歉，我不理解您的意思。据我所知，tabindex只适用于键盘使用。在画外音中，您使用手势控制屏幕阅读器。