“隐藏咏叹调的元素不包含可聚焦的元素".显示模态时的问题 [英] "aria-hidden elements do not contain focusable elements" issue when modal is shown
问题描述
我在我的应用程序中使用反应模，当它打开时，运行 aXe辅助功能工具出现以下错误:
I'm using React Modal in my application and when it is open running the aXe accessibility tool gives the following error:
这是因为React模态向应用程序的根元素添加了 aria-hidden ="true" (我所有应用程序组件的div都在其下呈现，但不是模态)，但它不会更新标签索引或禁用每个可聚焦元素.
aria-hidden elements do not contain focusable elements
但是，React模式会捕获键盘焦点，因此用户无法跳出模式，而单击背景会关闭模式.
This is because the React modal adds a aria-hidden="true" to the root element of the application (the div all my apps components are rendered under, but not the modal), but it does not update the tab index or disable every focusable element.
所以我的问题是:
这实际上是我需要解决的问题吗?还是这是一个误报，因为该工具不了解模态陷印重点?
So my question is:
如果需要解决此问题，我唯一的选择是手动更新选项卡索引或禁用每个可聚焦元素吗?
Is this actually an issue I need to fix? Or is this a false positive as the tool doesn't have knowledge of the modal trapping focus?
谢谢！
模态打开时的HTML看起来像这样:
Thanks!
The HTML when the modal is open looks kinda like this:</div></div>
<div data-react-modal-body-trap="" tabindex="0" style="position: absolute; opacity: 0;"></div>
<div id="root" aria-hidden="true">application content</div>
<div class="ReactModalPortal">
<div class="ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay-6fODnA">
<div tabindex="-1" role="dialog">modal content</div>
</div>
</div>
推荐答案
简短回答
向您的模态中添加 aria-modal 将删除此警告.
Short Answer
Adding aria-modal to your modal will remove this warning.
我花了一段时间才意识到为什么我们的模态没有这个警告，但是您会因为我们采用类似的标记而警告.我们在模态中使用 aria-modal 属性.
It took me a while to realise why our modals do not have this warning but yours would as we employ similar markup. We use the aria-modal property on our modals.
轴已更新，可以在模态上使用 aria-modal 属性. aria-modal 目前具有平均支持，但它这是一个好习惯，因为它可以避免开发人员的错误(因为尊重它的屏幕阅读器/浏览器组合会自动为您吸引焦点！).
Axe has been updated to expect the aria-modal property on a modal. aria-modal has average support at the moment but it is a good practice as it counters developer mistakes (as screen reader / browser combos that do respect it will automatically trap focus for you!).
真正隐藏所有内容的唯一方法是将 tabindex =-1" 添加到每个交互式项目中.
The only way to truly hide everything is to add tabindex="-1" to every single interactive item.
但是，实际上，如果您用于向每个交互式元素添加 tabindex =-1" 的JS函数遇到问题并且不会，则很可能导致灾难性的可访问性问题成功还原或删除 tabindex .这意味着您将完全无法访问页面的一部分！
However in reality that is far more likely to cause a catastrophic accessibility issue if your JS function you use to add tabindex="-1" to every interactive element encounters an issue and doesn't successfully revert the tabindex or remove it. This would mean you leave parts of the page completely inaccessible!
很明显，您将在"Robust"服务器上使WCAG失败.POUR的一部分.请不要这样做.
Obviously you would then fail WCAG on the "Robust" part of POUR. Please don't do this.
最好的折衷方案是在< main> 和< aside> 容器(任何顶级容器)上使用 aria-hidden ).然后在模态上使用 aria-modal ，因为这将使焦点集中在某些浏览器/屏幕阅读器组合中. aria 的组合将为浏览器支持提供最大的覆盖范围.
The best compromise is to use aria-hidden on the <main> and <aside> containers (any top level containers). Then use aria-modal on your modal as this will trap focus in some browser / screen reader combos. That combination of aria will provide the highest coverage for browser support.
最后，您应该使用 tab 键为人们管理焦点.如果上述方法失败并且对于不使用屏幕阅读器的人(例如，有灵巧性或准确性问题的人不能使用鼠标)，这是我们的备份.
Finally you should manage focus for people using the tab key. This is our backup in case the above methods fail and for people not using a screen reader (i.e. people with dexterity or accuracy issues who can't use a mouse.)
如果您需要有关如何在模式中捕获制表符焦点的信息，我将提供一个代码示例，但这很简单.
If you need information on how to trap the tab focus within a modal I will provide a code sample but it is pretty straight forward.
管理标签键焦点不会阻止屏幕阅读器用户或行为不当的插件超出您的模式(如果其他方法失败)，但是请相信我，如果他们在实施后对您的网站有问题上面它们会在其他站点上带来更大的问题.
Managing tab key focus will not stop screen reader users or misbehaving plugins from getting outside your modal (if the other methods fail) but believe me, if they have a problem with your site after you implement the above they will have bigger problems on other sites.
最后，作为另一个备份，我们添加 inert 添加到模态之外的项目.支持效果不佳，但是一点点帮助！
Finally as another backup we add inert to the items outside of our modal. Support isn't great, but every little helps!
您可以根据需要对其进行填充，但我认为它尚未移出规范草案，因此我们按原样使用它.
You can polyfill it if you want but I don't think it has moved outside of the draft spec yet so we just use it as is.
它完全是另外一个附加功能，并且(希望)将来能够证明我们的旧应用程序为 inert 是非常需要且易于理解的属性.它可以阻止屏幕阅读器访问项目，而无需更改视觉设计(基本上是 aria-hidden ，但作为标准属性，其优点是可以有效地从可访问性树中删除所有子项.)
It is purely there as yet another add in and (hopefully) to future proof our legacy applications as inert is a much needed and easy to understand attribute. It blocks screen readers access to items without changing visual design (basically aria-hidden but as a standard attribute, with the advantage that it effectively removes all children from the accessibility tree.)
尝试从以下示例中删除 aria-modal ="true" 并运行Axe，警告将返回.
Try removing the aria-modal="true" from the following example and running Axe, the warning will return.
<main aria-hidden="true" inert><a href="https://google.com">test</a></main>
<div class="modal" aria-hidden="false" aria-modal="true">
<label for="iTest">input test</label>
<input id="iTest"/>
</div>这篇关于“隐藏咏叹调的元素不包含可聚焦的元素".显示模态时的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
