aria

Posted muwu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了aria相关的知识,希望对你有一定的参考价值。

图标的可访问性

现代的辅助技术能够识别并朗读由 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>

技术分享图片

 









以上是关于aria的主要内容,如果未能解决你的问题,请参考以下文章

php 使用HTML5 figure&figcaption,microdata和wai-aria属性改进WordPress标题短代码

一个用python简单的封装了aria2的jsonrpc中adduri的脚本

如何在 kotlin 中使用 div 角色和 aria-label 设置 xpath

IntelliSense:aria-valuemax 和 data-ng-style aaaargh?

Aria

Bootstrap的aria-label与aria-labelledby