防止背景项目在模式叠加覆盖它们时获得焦点？

Question

我正在努力使叠加模式更易于访问。它的工作原理基本上类似于此JSFiddle。当您打开模态时，焦点不会正确地进入模态，并且它将继续聚焦于页面中的其他（隐藏的背景）项目。

你可以在我的jsfiddle演示中看到，我已经使用aria-controls，aria-owns，aria-haspopup甚至aria-flowto。

<button 
  aria-controls="two" 
  aria-owns="true" 
  aria-haspopup="true"
  aria-flowto="two"
  onclick="toggleTwo();"
  >
  TOGGLE DIV #2
</button>

但是，在使用MacOS VoiceOver时，这些功能都不符合我的预期（尽管VoiceOver确实尊重aria-hidden我在div上设置的功能two）。

我知道我可以操纵tabindex，但是0以上的值对可访问性不利，因此我唯一的选择是手动找到页面上所有可聚焦的元素并将它们设置为tabindex=-1，这在这个大型，复杂的网站上不可行。

另外，我研究了使用Javascript手动拦截和控制选项卡行为的方法，以便将焦点移到弹出窗口中，并在退出底部时又回到顶部，但是，这也影响了可访问性。

Answer 1

可以使用 focus() 方法移动焦点。我已经用预期的行为更新了jsFiddle 。我在 Windows 和 Chrome 上的 JAWS 上对此进行了测试。

我tabindex="-1"在“two”div 上添加了 a，以使其能够通过 focus 方法进行聚焦。

我将切换函数拆分为两个函数，这可能可以重构以满足您的需求，但一个函数将 aria-hidden 属性设置为 true 并将焦点移到新打开的模态上，另一个函数则执行相反的操作。

我删除了过多的 aria 属性，aria 的第一条规则是仅在必要时使用它。如果您只是在 aria 中混搭，这可能会导致意外行为。

不幸的是，为了将焦点保持在模式中，最好的选择之一是将所有其他活动元素设置为tabindex="-1"或aria-hidden="true"。我应用了一种替代方案，其中事件侦听器在选项卡上添加到模式中的最后一个元素。为了兼容，必须将另一个侦听器添加到第一个元素，以便在发生 shift+tab 事件时将焦点移动到最后一个元素。

不幸的是，据我所知，没有比上述解决方案更清晰的答案来将焦点保持在模态中。