码迷,mamicode.com
首页 > 其他好文 > 详细

aria

时间:2018-07-17 10:33:51      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:屏幕   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>

技术分享图片

 




aria

标签:屏幕   tle   对话   -o   strong   列表   str   ima   混淆   

原文地址:https://www.cnblogs.com/muwu/p/9321701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!