javascript - 显示模态时的 "aria-hidden elements do not contain focusable elements"问题

Question

我正在使用 React Modal在我的应用程序中，当它打开时运行 aXe accessibility tool给出以下错误:
aria-hidden elements do not contain focusable elements
这是因为 React 模态添加了 aria-hidden="true"到应用程序的根元素(我的所有应用程序组件都在 div 下呈现，但不是模式)，但它不会更新选项卡索引或禁用每个可聚焦元素。
然而，React 模态会捕获键盘焦点，因此用户无法跳出模态并单击背景会关闭模态。
所以我的问题是:
这实际上是我需要解决的问题吗？
或者这是一个误报，因为该工具不了解模态捕获焦点？
如果确实需要解决这个问题，我唯一的选择是手动更新选项卡索引或禁用每个可聚焦元素吗？
谢谢!
模式打开时的 HTML 看起来像这样:

<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>

Answer 1

简答
添加 aria-modal到您的模态将删除此警告。
长答案
我花了一段时间才意识到为什么我们的模态没有这个警告，但你的会有，因为我们使用了类似的标记。我们使用 aria-modal我们模态的属性。
Axe 已更新为期望 aria-modal模态上的属性。 aria-modal有 average support目前，但这是一种很好的做法，因为它可以解决开发人员的错误(因为确实尊重它的屏幕阅读器/浏览器组合会自动为您捕获焦点!)。
隐藏模式之外的项目
真正隐藏所有内容的唯一方法是添加 tabindex="-1"到每一个交互项目。
然而实际上，如果您使用 JS 函数添加 tabindex="-1"，则更有可能导致灾难性的可访问性问题。到每个交互元素都会遇到问题并且无法成功还原 tabindex或删除它。这意味着您让页面的某些部分完全无法访问!
显然，您将在 POUR 的“稳健”部分上失败 WCAG。请不要这样做。
最好的折衷方案是使用 aria-hidden在 <main>和 <aside>容器(任何顶级容器)。然后使用 aria-modal在您的模式上，因为这会在某些浏览器/屏幕阅读器组合中捕获焦点。 aria 的组合将为浏览器支持提供最高的覆盖率。
最后，您应该使用 tab 为人们管理焦点。 key 。这是我们的备份，以防上述方法失败以及不使用屏幕阅读器的人(即不能使用鼠标的灵巧或准确性问题的人。)
如果您需要有关如何在模式中捕获选项卡焦点的信息，我将提供一个代码示例，但它非常简单。
管理标签键焦点不会阻止屏幕阅读器用户或行为不端的插件超出您的模式(如果其他方法失败)但相信我，如果他们在您实现上述操作后对您的网站有问题，他们将在其他网站上遇到更大的问题.
惰性——给你的弓再添一根弦？
最后作为另一个备份，我们添加 inert 到我们模态之外的项目。 Support isn't great ，但每一点都有帮助!
如果需要，您可以对其进行 polyfill，但我认为它尚未超出草案规范，因此我们只是按原样使用它。
它纯粹是作为另一个添加和(希望)将来证明我们的遗留应用程序作为 inert是一个非常需要且易于理解的属性。它在不改变视觉设计的情况下阻止屏幕阅读器访问项目(基本上是 aria-hidden，但作为标准属性，其优点是它可以有效地从可访问性树中删除所有子项。)
例子
尝试删除 aria-modal="true"从以下示例和运行 Axe 中，将返回警告。

<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>