aria

Posted 2020-12-04 muwu

图标的可访问性

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。

 

可以看出，它用来标识页面中涉及到动态交互的地方，这些交互通常是由js和相关技术来实现的，例如浮出层，对话框弹出，下拉列表以及伪元素等。 

aria由一套属性组成，属性分为role以及对应的states和properties，aria将html元素分为六种role，每种有对应的states和properties，但有一些是共用的，比如

 

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>