"aria-hidden elements do not contain focusable elements" 显示模态时出现问题
"aria-hidden elements do not contain focusable elements" issue when modal is shown
我正在使用 React Modal in my application and when it is open running the 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>
您收到警告，因为当 aria-hidden="true" 设置为根元素时，您的页面可能包含可聚焦元素，这违反了此规则。
因此，为了避免这种情况，您始终可以在您的模式中设置 ariaHideApp={false}，这不会设置 aria-hidden="true"，并且您的焦点仍然会被困在打开的模式中。
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?
列出页面中所有链接的插件如果未被禁用（例如通过删除 tabindex）仍将列出链接。
在处理可访问性时，您必须始终考虑不依赖 ARIA 的自定义插件可以或将会存在。
ARIA 主要由屏幕阅读器使用：它不是辅助技术的必要条件，而是它们改进可访问性的覆盖。
例如，眼球追踪设备也可能会触发给定位置的第一个可点击元素，并且由于插件的叠加层不在 Tab 键顺序中，它可能会激活后面的元素。
第三个考虑因素：一些付费专区绕过保护，或反广告插件可能会自动删除覆盖。
简答
将 aria-modal 添加到您的模式将删除此警告。
长答案
我花了一段时间才意识到为什么我们的模态框没有这个警告，而你的模态框会有，因为我们使用了类似的标记。我们在模态框上使用 aria-modal 属性。
Axe 已更新，期望 aria-modal 属性 出现在模态上。 aria-modal 目前有 average support，但这是一个很好的做法，因为它可以防止开发人员的错误（因为屏幕 reader / 尊重它的浏览器组合会自动为您捕获焦点！）。 =30=]
隐藏模式外的项目
真正隐藏所有内容的唯一方法是将 tabindex="-1" 添加到每个交互项目。
然而实际上，如果您用于向每个交互元素添加 tabindex="-1" 的 JS 函数遇到问题并且没有成功恢复 tabindex 或删除它。这意味着您完全无法访问页面的某些部分！
很明显，您会在 POUR 的“稳健”部分上使 WCAG 失败。请不要这样做。
最好的折衷方案是在 <main> 和 <aside> 容器（任何顶级容器）上使用 aria-hidden。然后在您的模式上使用 aria-modal，因为这会在某些浏览器/屏幕 reader 组合中捕获焦点。 aria 的组合将为浏览器支持提供最高的覆盖率。
最后，您应该为使用 tab 键的人管理焦点。这是我们的备份，以防上述方法失败以及不使用屏幕的人 reader（即不能使用鼠标的灵巧性或准确性问题的人。）
如果您需要有关如何在模式中捕获选项卡焦点的信息，我将提供一个代码示例，但它非常简单。
管理 Tab 键焦点不会阻止屏幕 reader 用户或行为不端的插件超出您的模式（如果其他方法失败）但请相信我，如果他们如果您的网站在执行上述操作后出现问题，他们将在其他网站上遇到更大的问题。
惰性 - 更进一步的弓弦？
最后，我们添加 inert to the items outside of our modal. Support isn't great 作为另一个备份，但每一点都有帮助！
如果你愿意，你可以对其进行 polyfill，但我认为它还没有超出规范草案的范围，所以我们只是按原样使用它。
它纯粹是作为另一个添加项存在的，并且（希望）在未来证明我们的遗留应用程序，因为 inert 是一个非常需要且易于理解的属性。它在不改变视觉设计的情况下阻止屏幕 reader 对项目的访问（基本上 aria-hidden 但作为标准属性，其优点是它有效地从可访问性树中删除了所有子项。）
例子
尝试从以下示例中删除 aria-modal="true" 和 运行 Axe，警告将 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>
我正在使用 React Modal in my application and when it is open running the 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>
您收到警告，因为当 aria-hidden="true" 设置为根元素时，您的页面可能包含可聚焦元素，这违反了此规则。
因此，为了避免这种情况，您始终可以在您的模式中设置 ariaHideApp={false}，这不会设置 aria-hidden="true"，并且您的焦点仍然会被困在打开的模式中。
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?
列出页面中所有链接的插件如果未被禁用（例如通过删除 tabindex）仍将列出链接。
在处理可访问性时，您必须始终考虑不依赖 ARIA 的自定义插件可以或将会存在。
ARIA 主要由屏幕阅读器使用：它不是辅助技术的必要条件，而是它们改进可访问性的覆盖。
例如，眼球追踪设备也可能会触发给定位置的第一个可点击元素，并且由于插件的叠加层不在 Tab 键顺序中，它可能会激活后面的元素。
第三个考虑因素：一些付费专区绕过保护，或反广告插件可能会自动删除覆盖。
简答
将 aria-modal 添加到您的模式将删除此警告。
长答案
我花了一段时间才意识到为什么我们的模态框没有这个警告，而你的模态框会有，因为我们使用了类似的标记。我们在模态框上使用 aria-modal 属性。
Axe 已更新，期望 aria-modal 属性 出现在模态上。 aria-modal 目前有 average support，但这是一个很好的做法，因为它可以防止开发人员的错误（因为屏幕 reader / 尊重它的浏览器组合会自动为您捕获焦点！）。 =30=]
隐藏模式外的项目
真正隐藏所有内容的唯一方法是将 tabindex="-1" 添加到每个交互项目。
然而实际上，如果您用于向每个交互元素添加 tabindex="-1" 的 JS 函数遇到问题并且没有成功恢复 tabindex 或删除它。这意味着您完全无法访问页面的某些部分！
很明显，您会在 POUR 的“稳健”部分上使 WCAG 失败。请不要这样做。
最好的折衷方案是在 <main> 和 <aside> 容器（任何顶级容器）上使用 aria-hidden。然后在您的模式上使用 aria-modal，因为这会在某些浏览器/屏幕 reader 组合中捕获焦点。 aria 的组合将为浏览器支持提供最高的覆盖率。
最后，您应该为使用 tab 键的人管理焦点。这是我们的备份，以防上述方法失败以及不使用屏幕的人 reader（即不能使用鼠标的灵巧性或准确性问题的人。）
如果您需要有关如何在模式中捕获选项卡焦点的信息，我将提供一个代码示例，但它非常简单。
管理 Tab 键焦点不会阻止屏幕 reader 用户或行为不端的插件超出您的模式（如果其他方法失败）但请相信我，如果他们如果您的网站在执行上述操作后出现问题，他们将在其他网站上遇到更大的问题。
惰性 - 更进一步的弓弦？
最后，我们添加 inert to the items outside of our modal. Support isn't great 作为另一个备份，但每一点都有帮助！
如果你愿意，你可以对其进行 polyfill，但我认为它还没有超出规范草案的范围，所以我们只是按原样使用它。
它纯粹是作为另一个添加项存在的，并且（希望）在未来证明我们的遗留应用程序，因为 inert 是一个非常需要且易于理解的属性。它在不改变视觉设计的情况下阻止屏幕 reader 对项目的访问（基本上 aria-hidden 但作为标准属性，其优点是它有效地从可访问性树中删除了所有子项。）
例子
尝试从以下示例中删除 aria-modal="true" 和 运行 Axe，警告将 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>