aria-label及aria-labelledby应用//////////[信息无障碍产品联盟]
2014-10-26 18:41
302 查看
aria-label及aria-labelledby应用
http://accessibilityunion.org/archives/808发表于 2013 年 12 月 12 日 由 sisiyuan
aria-label属性
正常情况下,会在表单里给input组件指定对应的label,当用户tab到输入框时,读屏软件就会读出相应label里的文本。
如:<label for=”username”>用户名:</label><input type=”text” id=”username”/>
当没有给输入框设计对应的label文本的位置时,aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。
如:<input type=”text” aria-label=”用户名”/>
此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。
经测试,aria-label只有加在可被tab到的元素上,读屏才会读出其中的内容。
以下情况,也是可以读出的:<span tabindex=”0″ aria-label=”标签提示内容”>可被tab的span标签</span>
aria-labelledby属性
当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。
<div role=”form” aria-labelledby=”form-title”>
<span id=” form-title”>使用手机号码注册</span>
<form>……</form>
</div>
表单区添加了landmark标识role=”form”,在争渡中使用字母”D“键会在lankmark标识之间跳转。
当跳转到该区域时,不仅会读出”表单区“,也会读出”使用手机号码注册“。
如果一个元素同时有aria-labelledby和aria-label,读屏软件会优先读出aria-labelledby的内容。
测试软件:争渡读屏 浏览器:IE9
相关文章:
VoiceOver知多少?聊聊信息无障碍测试工程师的标准
网站内容无障碍指南2.0 / Web Content Accessibility Guidelines (WCAG) 2.0 中文版
W3C发布可访问富互联网应用(WAI-ARIA 1.0)的正式推荐标准
“跳过导航”链接
相关文章推荐
- 悬镜加入中国信息无障碍产品联盟,助力安全加固产品无障碍发展
- 【联盟】三星大容量MLC FLASH 换代信息(小心现在自己计划的产品哦)
- 信息无障碍产品研究举例
- 2015年8月20-21日,杨学明老师《青岛民航信息某子公司对标华为产品管理培训》在山东青岛市成功举办!
- 「信息安全产品」WAF,web应用防火墙
- 【产品】巨龙跨部门信息共享与服务
- SuperMap iDesktop 8C 地理信息产品输出
- 获取文件的属性信息(如文件版本,产品版本,公司,版权等信息)
- LBS产品的信息架构优化
- 信息无障碍相关会议网址链接
- (10.3.5.1)产品需求文档的写作(一) – 写前准备(信息结构图)
- 如何通过网络卖信息产品快速赚钱2、引导文案.txt
- 练习--手机产品信息--函数、文件读写
- Magento导出订单同时导出产品信息
- 产品经理信息收集渠道大盘点
- 产品经理与项目经理的区别(信息来自网络,并编辑)
- OpenERP实施记录(8):设置产品信息
- Magento给产品添加“new”或者折扣数量标签 magento new label. discount label
- 产品信息系统知识点整理
- 添加厂商产品信息