我是否需要在隐藏可见性的元素上使用 aria-hidden ？

Question

我的页面上有以下标记：

<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)？因为如果模式打开，屏幕阅读器应该无法访问页面内容。

非常感谢任何建议。

Answer 1

我已经链接到一些 post 可以更详细地回答您的问题，但要快速回答它们：

如果模态框已经被 visibility: hidden 隐藏，则不需要 aria-hidden=true，因为这也会将其从辅助功能树中删除。查看此博客 post：https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html
是的，如果你没有用 css 隐藏它，你应该将 aria-hidden=true 添加到你的 .page，而只是用 [=14] 来掩盖它=].来自 https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box 的 WAI 文档说明如下：

In order to ensure proper focus handling on mobile devices it is also advisable to mask the page background (i.e. all page elements except the content of the modal custom dialog) by setting its aria-hidden attribute to true once the dialog is displayed (and back to false when the dialog is closed). Note that this masking should happen after the script has moved the focus to the dialog.

我是否需要在隐藏可见性的元素上使用 aria-hidden ？

Do I need to use aria-hidden on an element whose visibility is hidden?

html

accessibility

wai-aria