HTML5技术

使用ARIA角色增强可访问性 - 易天曦小盆友(6)

字号+ 作者:H5之家 来源:博客园 2015-11-20 11:34 我要评论( )

aria-labelledby字符串。空格分隔的id们div aria-labelledby="title" role="alertdialog"h3标题/h3/divaria-labelledby一般用在区域元素上,对于的id一般为对应的标题或是标签元素的id.关系型属性。 aria-level数值

aria-labelledby 字符串。空格分隔的id们 <div aria-labelledby="title" role="alertdialog"><h3>标题</h3></div> aria-labelledby一般用在区域元素上,对于的id一般为对应的标题或是标签元素的id.关系型属性。

aria-level 数值。表示等级。 <div aria-level="2">次标题</div> 上面的HTML类似于<h2>次标题</h2>

aria-live 字符串。可选值有:off, polite, assertive, rude。默认为off, 表示不宣布更新;polite表示只有用户闲时宣布;assertive表示尽快对用户宣布;rude表示即时提醒用户,必要的时候甚至中断用户。 <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> 绝大多数的更新应该在用户闲暇的时候告知,即时提示对用户是一种干扰。如果希望内容完全更新后再提示,可以使用上面提到的aria-busy.

左侧的HTML为时间选择控件的年月标题部分,aria-live="assertive"表示的是当用户选择了新的时间的时候,尽快通知用户时间发生了变更。

aria-multiselectable 字符串。表示是否可多选。默认为false, 表示一次只能选择一个项。true表示一次可以选择多个项。 <-- 暂无HTML示例 --> 例如手风琴展开收起效果,我们可以使用aria-multiselectable来告知辅助设备,一次可以展开多个项还是只有一个展开。

aria-owns 字符串。值为目标元素id. <input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="list" /> <ul tabindex="-1" role="listbox" aria-expanded="true"> <li role="option">晴川</li> <li role="option">静秋</li> <li role="option">黄小仙</li> </ul> aria-owns表示元素所拥有的,这里这里的文本框拥有其对应的下拉列表。

aria-posinset 数值。表示当前位置。 <-- 暂无HTML示例 --> 用在设置和获取一个集合内某项的当前位置。

aria-readonly 字符串。表示是否只读。默认为false, 表示元素值可以被修改;true表示元素指不能被改变。 <table role="grid" aria-labelledby="girl_label" aria-readonly="true"> <caption>美女们</caption> <tr> <th tabindex="-1">晴川</th> <th tabindex="-1">静秋</th> <th tabindex="-1">黄小仙</th> </tr> </table>

aria-relevant 字符串。表示区域内哪些操作行为需要做出反应。可选值有:additions, removals,text, all,可以空格分隔多个一起显示. additions表示新增节点的时候做出反应;removals表示删除节点时重要操作;text表示文本改变是值得重视的;all等同于同时使用上面三个属性值。 <div role="log" aria-atomic="false" aria-relevant="additions"></div> 左边的HTML表示当日志内容有添加的时候做出反应。

aria-required 字符串。元素值是否必需。默认为false, 表示元素值可以为空;true表示元素值是必需的。 <div> <label for="name">* 姓名:</label> <input type="text" aria-labelledby="name_label" aria-describedby="tip" aria-required="true" /> <div role="tooltip" aria-hidden="true">姓名不能为空</div> </div> 多半用在表单控件中。对应HTML5中required属性。

aria-secret 字符串。表示机密状态。 <-- 暂无HTML示例 --> 具体含义不详

aria-setsize 数值。设置的尺寸大小值。 <-- 暂无HTML示例 --> 顾名思意

aria-sort 字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值:ascending(↑),descending(↓), none, other. <-- 暂无HTML示例 --> Widget组件应用属性。

aria-valuemax 数值。表允许的最大值。 <div> <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" /> <div role="presentation" tabindex="0">45</div> </div> 用在范围组件上。对应于HTML5中的max属性。

aria-valuemin 数值。表示允许的最小值。 <div> <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" /> <div role="presentation" tabindex="0">45</div> </div> 用在范围组件上。对应于HTML5中的min属性。

aria-valuenow 数值。表示当前值。 <div> <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" /> <div role="presentation" tabindex="0">45</div> </div> 用在范围组件上。对应于value属性。

aria-valuetext 字符串。定义等同于aria-valuenow人可读的文本。 <-- 暂无HTML示例 --> 用在范围组件上。

 

ARIA 状态值示意及说明表

属性状态属性值HTML示意说明

aria-checked 字符串。表示检查的状态。true表示元素被选择;false表示元素未被选择;mixed表示元素同时有选择和为选择状态。 <ul role="group"> <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> <li role="checkbox" aria-checked="false" tabindex="0">晴川</li> <li role="checkbox" aria-checked="true" tabindex="0">静秋</li> <li role="checkbox" aria-checked="true" tabindex="0">黄小仙</li> </ul>

该属性用来表明用户是否选择了某些项(如左边这个截图所示)。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • 对于Bootstrap的介绍以及如何使用 - novai-L

    对于Bootstrap的介绍以及如何使用 - novai-L

    2017-04-29 09:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzbin

    探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzb

    2017-04-25 09:02

网友点评
<