Javascript &引用；aria隐藏元素不包含可聚焦元素“；显示模式时出现问题

我正在我的应用程序中使用，当它打开时，运行会出现以下错误：

这是因为React模式向应用程序的根元素添加了一个

aria hidden=“true”

（所有my apps组件都在div下呈现，但不是模式），但它不会更新选项卡索引或禁用每个可聚焦元素

但是，React模式会捕获键盘焦点，因此用户不能用tab键跳出模式，单击背景会关闭模式

所以我的问题是：

这真的是我需要解决的问题吗？ 或者这是一个误报，因为工具不知道模态陷阱焦点

如果这确实需要修复，那么手动更新选项卡索引或禁用每个可聚焦元素的唯一选项是什么

谢谢

模态打开时的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”

设置为root元素时，您的页面可能有可聚焦的元素，这违反了此规则

因此，为了避免这种情况，您可以始终在您的模式中设置

ariahideap={false}

，而不会设置

ariahideap=“true”

，并且您的焦点仍然会被困在打开的模式中

这真的是我需要解决的问题吗？或者这是一个误报，因为工具不知道模态陷阱焦点

一个列出页面中所有链接的插件，如果它们没有被禁用（例如通过删除tabindex），仍然会列出这些链接

<强>当处理可访问性时，必须始终考虑不依赖ARI的自定义插件可能存在或将存在。>/P> ARIA主要由屏幕阅读器使用：它不是辅助技术的必要条件，而是用于提高可访问性的覆盖层

例如，眼睛跟踪设备也可能在给定位置触发第一个可点击元素，并且由于插件的覆盖不在选项卡顺序中，它可能会激活后面的元素

第三点考虑：一些付费墙旁路保护或反ads插件可能会自动删除覆盖层。

简短回答 将

aria model

添加到您的model将删除此警告。

长话短说 我花了一段时间才意识到为什么我们的情态动词没有这个警告，而你的却有，因为我们使用了类似的标记。我们在情态动词上使用

aria-modal

属性

Axe已更新为在模态上使用

aria modal

属性

aria modal

目前已经有了，但这是一个很好的实践，因为它可以纠正开发人员的错误（因为屏幕阅读器/浏览器组合会自动为您捕获焦点！）

将项目隐藏在模式外部 真正隐藏所有内容的唯一方法是向每个交互项添加

tabindex=“-1”

然而，在现实中，如果用于向每个交互元素添加

tabindex=“-1”

的JS函数遇到问题，并且没有成功还原

tabindex

或将其删除，则更可能导致灾难性的可访问性问题。这意味着您将页面的某些部分完全无法访问

很明显，在浇注的“健壮”部分，您将使WCAG失败。请不要这样做

最好的折衷办法是在

上使用

aria hidden

，并将

用于我们模式之外的项目，但每一点都有帮助！
如果你想的话，你可以对它进行多边形填充，但我认为它还没有超出规范草案的范围，所以我们只是按原样使用它

它纯粹是另一个插件，并且（希望）能够证明我们的遗留应用程序的未来性，因为
惰性
是一个非常需要且易于理解的属性。它在不改变视觉设计的情况下阻止屏幕阅读器访问项目（基本上是
aria hidden
，但作为标准属性，其优点是它可以有效地从可访问性树中删除所有子项。）

例子
尝试从以下示例中删除
aria modal=“true”
，然后运行Axe，警告将返回



输入测试
为清晰起见（因为它可能是一个输入错误的“模型”而不是“模态”），模态单独呈现，并且在页面上的所有其他内容之外，其他所有内容都在
aria hidden=“true”
容器内。当模态打开时，容器本身没有
tabindex
？opps，这确实是一个输入错误。我已经更新了这个问题，希望能更清楚地说明这是正确的方法，但是我们通常在执行此操作时将
tabindex=“-1”
添加到主容器（
id=“root”
）。尝试手动添加，然后运行Axe，我想问题会消失。如果这样做有效，那么我将添加一个应答设置
tabindex=“-1”
在
root
元素上没有任何区别，仍然会生成警告。我认为这是一个bug，但是我们这边没有这个问题（但是我们的东西都是定制的，可能是数百种可能导致问题的反应）。我会试着把一个测试放在一起，首先检查它，但是原则上你做的事情是正确的，正如我前面所说的。在同一个页面上，“对于屏幕阅读器的用户来说，在模式打开时隐藏其他页面内容（通过aria hidden属性）是很重要的。”“如果您已经通过其他方式将aria hidden属性应用于应用程序内容，则可以传递ariaHideApp={false}”“。因此，您的建议似乎会删除警告，并将其替换为真正的可访问性问题…感谢您提供了这一令人敬畏且详细的答案，遗憾的是，我在我的应用程序和您的示例中仍然会遇到相同的错误：-S我正在使用Chrome aXe插件v4.5.3（aXe core 3.5.5）I am u