引导模式关闭按钮 aria-hidden=true

Posted 2023-05-07

【中文标题】引导模式关闭按钮 aria-hidden=true

【英文标题】：bootstrap modal close button aria-hidden=true

【发布时间】：2014-02-07 13:33:47

【问题描述】：

根据the bootstrap document，添加aria-hidden="true" 告诉辅助技术跳过模态的DOM 元素，这解释了aria-hidden=true 在主modal div 中的存在。

在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 -->

【参考方案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-attributes 时，只需假装你正在运行屏幕阅读器并直观地看到内容，只能通过视觉理解的内容应该有 aria-hidden 标签， ARIA 标签系统提供了更多类型的标签，以便为需要的人提供额外的信息，包括让元素只对屏幕阅读器可见。

欲了解更多信息：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

【参考方案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，我只想问你为什么使用 aria-hidden ？如果我删除它而不是它的工作。

我们使用aria-hidden 来隐藏 X / ×，这样屏幕阅读器就不会读出“x”或“times”，并添加了视觉上隐藏的文本“Close”，这样屏幕阅读器就有了按钮的适当标签。

【参考方案3】：

不确定这是否已得到解答，但是我最近遇到了这个问题，这是我的答案，希望对您有所帮助。

关闭按钮可能如下所示

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

或

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

【参考方案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。 我认为为可访问性添加一个元素比在现有元素中嵌套一个新元素更有意义。