twitter-bootstrap - Bootstrap 模式关闭按钮 aria-hidden=true

Question

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

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

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

Answer 1

ARIA 属性用于使残障人士更容易访问 Web，尤其是那些使用屏幕阅读器的人。借助视觉，我们可以看到 × (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