防止背景项目在模式叠加覆盖它们时获得焦点？ [英] Prevent background items from receiving focus while modal overlay is covering them?

问题描述

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

I am working on making an overlay modal more accessible. It works essentially like this JSFiddle. When you open the modal, the focus doesn't properly go into the modal, and it continues to focus on other (hidden, background) items in the page.

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

You can see in my JSFiddle demo that I have already used aria-controls, aria-owns, aria-haspopup and even aria-flowto.

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

但是，在使用MacOS VoiceOver时，这些都不符合我的预期（尽管VoiceOver确实尊重<我在div 两个上设置的code> aria隐藏）。

However, while using MacOS VoiceOver, none of these do what I intend (though VoiceOver does respect the aria-hidden that I set on div two).

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

I know that I could manipulate the tabindex, however, values above 0 are bad for accessibility, so my only other option would be to manually find all focusable elements on the page and set them to tabindex=-1, which is not feasible on this large, complicated site.

此外，我研究了使用Javascript手动拦截和控制标签行为，以便将焦点移到弹出窗口中，并在退出底部时重新回到顶部但是，这也影响了可访问性。

Additionally, I've looked into manually intercepting and controlling tab behavior with Javascript, so that the focus is moved into the popup and wraps back to the top upon exiting the bottom, however, this has interfered with accessibility as well.

推荐答案

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

Focus can be moved with the focus() method. I've updated the jsFiddle with the intended behavior. I tested this on JAWS on Windows and Chrome.

我在 b上添加了 tabindex =-1

我将toggle函数拆分为两个函数，可以将其重构为适合您的需求，但是一个函数将aria-hidden属性设置为true并将焦点移至新打开的模态，而另一个函数则相反。

I split the toggle function into two functions, this can probably be refactored to fit your needs, but one function sets the aria-hidden attribute to true and moves the focus on the newly opened modal, and the other function does the reverse.

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

I removed the excessive aria attributes, the first rule of aria is to only use it when necessary. This can cause unexpected behavior if you're just mashing in aria.

要保持对模式的关注，不幸的是，最好的选择之一就是将所有其他活动元素设置为 tabindex =-1 或 aria-hidden = true 。我采用了一种替代方法，即在选项卡上将事件侦听器添加到模式中的最后一个元素。为了符合要求，必须在shift + tab事件中将另一个侦听器添加到第一个元素以将焦点移到最后一个元素。

To keep focus within the modal, unfortunately one of the best options is to set all other active elements to tabindex="-1" or aria-hidden="true". I've applied an alternative where an event listener is added to the last element in the modal upon tabbing. To be compliant, another listener must be added to the first element to move focus to the last element upon a shift+tab event.

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

Unfortunately, to my knowledge there isn't a cleaner answer than those above solutions to keeping focus within a modal.

这篇关于防止背景项目在模式叠加覆盖它们时获得焦点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！