Bootstrap模态框关闭按钮aria-hidden=true

Question

根据 Bootstrap 文档，添加 aria-hidden="true" 属性可以告诉辅助技术跳过模态框的 DOM 元素，这也解释了主要的 modal div 中为什么有 aria-hidden=true 属性。

在 modal-header div 中为模态框关闭按钮添加 aria-hidden=true 的目的是什么？

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      **<*div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;       </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>***
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

- Reshma

Answer 1

ARIA属性用于使网络对残障人士更加无障碍，特别是使用屏幕阅读器的人。对于有视力的人来说，我们可以看到× (x)符号被用作“X”，表示如果单击它，模态框将关闭。对于使用屏幕阅读器的人，如果模态框设置得当：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

当屏幕阅读器阅读这段代码时，它将只会读出“关闭按钮”。

---

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>

无论是哪种方式，屏幕阅读器读取时都会显示相同的结果，例如 "关闭乘法符号按钮"。

---

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

在最后一种情况下，将aria-hidden =“true”添加到按钮本身将使屏幕阅读器忽略整个关闭按钮，强制用户继续阅读到页脚才能找到关闭按钮（如果页脚中有关闭按钮的话，如果没有，他们会很难关闭它）。 对于典型Web用户来说，所有这些示例的功能都是相同的，但对于某些人群来说，在设计、布局和标记放置方面进行小心考虑可能是访问频繁的网站和再也不会访问的网站之间的区别。 我知道我在这里有点跑题了，但是在使用aria属性时，只需假装您正在运行屏幕阅读器并可视化查看内容，仅通过视觉理解的内容应该在其上具有aria-hidden标签，并且ARIA标记系统提供了更多类型的标记，以向那些需要额外信息的人提供附加信息，包括仅对屏幕阅读器可见的元素。 了解更多信息：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

- Gode Agarunov

Answer 2

aria-hidden属性用在关闭按钮上是为了避免屏幕阅读器对"X"或者"times"符号的过多解释。

为了使其可访问，关闭按钮应该长成这个样子：

<button type="button" title="Close">
  <span aria-hidden="true">&times;</span>
  <span class="hide">Close</span>
</button>

使用CSS将.hide内容进行视觉隐藏。

- Daniel Göransson

---

你好 @Daniel，我想问一下为什么要使用 aria-hidden？如果我将其删除，它仍然可以正常工作。 - Virbhadrasinh

我们使用 aria-hidden 来隐藏 X / ×，这样屏幕阅读器就不会宣布 "x" 或 "times"，并添加视觉上隐藏的文本 "关闭"，以便屏幕阅读器为按钮提供适当的标签。 - Daniel Göransson

Answer 3

不确定是否已经有人回答了这个问题，但我最近遇到了这个问题，以下是我的解决方案，希望能帮到你。

关闭按钮可能看起来像这样

 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;    </button>

或者

<button type="button" class="close" data-dismiss="modal">&times;</button>

- Britnet

Answer 4

应该接受Daniel Grandson的答案。

顺便说一下：Bootstrap还提供了sr-only类，用于隐藏“可访问性”元素。

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>

@Gode Agarunov - 感谢您提供的非常有用的答案和aria-label。 我认为增加一个可访问性元素比嵌套一个新元素到现有元素中更有意义。

- TomerBu