bootstrap模态关闭按钮aria-hidden = true

Question

根据bootstrap文档,添加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属性用于使残障人士更容易访问网络,特别是那些使用屏幕阅读器的人.有了视觉的好处,我们可以看到×(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标签系统提供了更多类型的标签,用于向需要它的人提供附加信息,包括只有屏幕阅读器可见的元素.

有关更多信息,请访问:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Answer 2

隐藏在关闭按钮上的咏叹调的目的是在该标记中"X"或"时间" - 符号不会告诉屏幕阅读器.

要使其可访问,关闭按钮应如下所示:

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

并用CSS在视觉上隐藏.hide内容.