简答
Adding aria-modal添加到您的模态将删除此警告。
长答案
我花了一段时间才意识到为什么我们的模态没有此警告，但您的模态却有此警告，因为我们采用了类似的标记。我们使用aria-modal我们模态上的属性。
Axe 已更新，预计aria-modal模态上的属性。aria-modal has 平均支持率目前，这是一个很好的做法，因为它可以防止开发人员的错误（因为尊重它的屏幕阅读器/浏览器组合会自动为您捕获焦点！）。
隐藏模态之外的项目
真正隐藏所有内容的唯一方法是添加tabindex="-1"到每一个互动项目。
然而实际上，如果您使用 JS 函数添加tabindex="-1"每个交互元素都会遇到问题并且无法成功恢复tabindex或将其删除。这意味着您使页面的某些部分完全无法访问！
显然，在 POUR 的“稳健”部分，您将无法通过 WCAG。请不要这样做。
最好的折衷方案是使用aria-hidden on the <main> and <aside>容器（任何顶级容器）。然后使用aria-modal在您的模式上，因为这会将焦点集中在某些浏览器/屏幕阅读器组合中。那个组合aria将提供最高覆盖率的浏览器支持。
最后，您应该管理使用的人的焦点tab钥匙。这是我们的备份，以防上述方法失败以及不使用屏幕阅读器的人（即无法使用鼠标的灵巧性或准确性问题的人）。
如果您需要有关如何在模式中捕获选项卡焦点的信息，我将提供一个代码示例，但它非常简单。
管理 Tab 键焦点不会阻止屏幕阅读器用户或行为不当的插件超出模式（如果其他方法失败）但相信我，如果他们在您实施上述措施后对您的网站出现问题，他们将在其他网站上遇到更大的问题。
惰性——你的弓上还有一根弦？
最后作为另一个备份我们添加inert到我们模式之外的项目。支持不是很好，但每一点都有帮助！
如果你愿意，你可以填充它，但我认为它还没有超出草案规范，所以我们只是按原样使用它。
它纯粹是作为另一个附加项存在，并（希望）为我们的遗留应用程序提供未来证明inert是一个非常需要且易于理解的属性。它阻止屏幕阅读器访问项目而不改变视觉设计（基本上aria-hidden但作为标准属性，其优点是它可以有效地从可访问性树中删除所有子项。）
Example
尝试删除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>
