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属性用于使残障人士更容易访问网络，特别是那些使用屏幕阅读器的人。有了视觉的好处，我们可以看到×（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”添加到按钮本身将使屏幕阅读器忽略整个关闭按钮，迫使用户在找到关闭按钮之前继续读取页脚（如果有页脚中的关闭按钮，如果没有，它们将很难关闭它）

典型网络用户的功能在所有这些示例中都是相同的，但对于一部分人口，在设计，布局和标签放置中注意和考虑可能是经常访问的网站和网站再也没有访问过。

我知道我有点偏离这里的主题，但是当使用咏叹调属性时，只是假装你正在运行一个屏幕阅读器并直观地看到内容，只能在视觉上理解的内容应该有咏叹调隐藏的标签， 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内容。

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>

Answer 4

@ Daniel Grandson 的答案应该是接受的答案。

只是添加一些东西：Bootstrap还提供了 sr-only 类来隐藏＆＃34;可访问性＆＃34;元件。

<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 - 感谢您提供非常丰富的答案和咏叹调标签。我认为为可访问性添加元素更有意义，而不是将新元素嵌套到现有元素中。

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

4 个答案: