bootstrap模式关闭按钮aria-hidden=true
根据the bootstrap document，添加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">× </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 -->回答 3
Stack Overflow用户
发布于 2015-03-27 23:29:41
ARIA属性用于使残障人士更容易访问web，尤其是使用屏幕阅读器的残障人士。在视觉上，我们可以看到×(x)符号被用作'X'，这表明如果你点击它，模式将关闭。对于使用屏幕阅读器的用户，如果正确设置了模式：
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>当屏幕阅读器查看此代码时，它会简单地显示为"Close Button“。
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>当屏幕阅读器读取“关闭倍增符号按钮”或类似的内容时，这两个结果将导致相同的结果。
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</button>在最后一种情况下，将aria-hidden="true“添加到按钮本身将使屏幕阅读器忽略整个关闭按钮，强制用户在找到关闭按钮之前继续阅读页脚(如果页脚中有关闭按钮，如果没有关闭按钮，他们将很难将其关闭)
典型web用户的功能在所有这些示例中都是相同的，但是对于一部分人来说，在设计、布局和标签放置中注意和考虑可能是经常访问的网站和再也不访问的网站之间的区别。
我知道我在这里有点离题，但是当使用ARIA -attribute时，只要假装你正在运行一个屏幕阅读器并直观地看到内容，只有在视觉上才能理解的内容应该有ARIA隐藏的标签，并且ARIA标签系统提供了更多类型的标签来为需要它的人提供额外的信息，包括让元素只对屏幕阅读器可见。
欲了解更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Stack Overflow用户
发布于 2014-02-05 17:08:26
隐藏在关闭按钮上的唱段的目的是，在该标记中，"X“或"times"-symbol不会告诉屏幕阅读器太多信息。
要使其可访问，关闭按钮应如下所示：
<button type="button" title="Close">
<span aria-hidden="true">×</span>
<span class="hide">Close</span>
</button>并通过CSS在视觉上隐藏.hide内容。
Stack Overflow用户
发布于 2014-06-02 11:42:18
我不确定这个问题是否得到了回答，但我最近遇到了这个问题，这就是我的答案，希望它能有所帮助。
关闭按钮可能如下所示
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>或
<button type="button" class="close" data-dismiss="modal">×</button>https://stackoverflow.com/questions/21199141
复制相似问题
腾讯云开发者
