html - 我需要在可见性被隐藏的元素上使用 aria-hidden 吗？

我的页面上有以下标记：

<body>
  <div class="modal" role="dialog">
    ...
  </div>
  <div class="page">
    <div class="content">
      ...
    </div>
  </div>
</body>

所以这基本上是模态对话框的标记以及我的页面和内容。默认情况下，模式具有该visibility: hidden属性。现在，我对这个关于可访问性的特定页面有以下疑问：

模态还需要aria-hidden="true"吗？
当模式打开（使用 JS）时，它visibility被设置为visible. 我也使用 JS 给aria-modal它添加属性。此时，我应该将添加aria-hidden="true"到我的页面 ( .page) 吗？因为如果打开了模式，屏幕阅读器应该无法访问页面的内容。

任何意见是极大的赞赏。

标签： htmlaccessibilitywai-aria

我已经链接到一些帖子，这些帖子将更详细地回答您的问题，但要快速回答：

aria-hidden=true如果模态已经隐藏，则不需要它，visibility: hidden因为这也会将其从可访问性树中删除。请参阅此博客文章：https ://www.scotohara.me/blog/2018/05/05/hidden-vs-none.html
是的，如果你不是用 css 隐藏它，你应该添加aria-hidden=true到你的，而只是用 like 隐藏它。来自https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box的 WAI 文档说明如下：.pagez-index

为了确保在移动设备上正确处理焦点，还建议在显示对话框后通过将其 aria-hidden 属性设置为 true 来掩盖页面背景（即除了模式自定义对话框的内容之外的所有页面元素）（并返回关闭对话框时为 false）。请注意，此屏蔽应在脚本将焦点移至对话框后发生。