前端 - bootstrap中的aria-label,arial-hidden等一类的作用

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