标签:屏幕 tle 对话 -o strong 列表 str ima 混淆
图标的可访问性
现代的辅助技术能够识别并朗读由 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>
标签:屏幕 tle 对话 -o strong 列表 str ima 混淆
原文地址:https://www.cnblogs.com/muwu/p/9321701.html