HTML5技术

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

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

aria-disabled字符串。表禁用状态,true表示当前是非激活状态;false表示清除非激活状态。div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false" aria-disabled="false"添加/div对应单复选框等

aria-disabled 字符串。表禁用状态,true表示当前是非激活状态;false表示清除非激活状态。 <div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div> 对应单复选框等控件的disabled属性,一般用在自定义模拟控件中。

aria-expanded 字符串。表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的。 <h3 aria-selected="true" aria-controls="panel1" aria-expanded="true" role="tab" tabindex="0">姑娘们</h3> <div aria-labelledby="tab1" aria-hidden="false" role="tabpanel"> <h3 tabindex="0">请选择你中意的:</h3> <ul> <li><input type="radio" value="q" /> <label for="p1_1">晴川</label></li> <li><input type="radio" value="j" checked /> <label for="p1_2">静秋</label></li> <li><input type="radio" value="h" /> <label for="p1_3">黄小仙</label></li> </ul> </div>

例如在手风琴交互效果中标示展开与否的状态。该属性对应HTML5的open属性。

aria-hidden 字符串。可选值为true和false, true表示元素隐藏(不可见),false表示元素可见。 <div aria-hidden="false">23%</div> 该属性使用非常普遍。几乎所有涉及到显示与隐藏这类交互或没有交互的地方都可以应用该属性。左边的示例HTML代码来自进度条进度值显示的div, 当前aria-hidden为false, 表示该进度值是可见的。

aria-invalid 字符串。表示元素值是否错误的。默认为false, 表示是OK的,如果为true, 则表示值验证不通过。 <input type="text" size="3" aria-labelledby="valid" aria-invalid="false" />  

aria-pressed 字符串。表示按下的状态,可选值有:true, false, mixed, undfined.默认为undfined, 表示按下状态未知;true表示元素往下(按钮按下);false表示元素抬起;mixed表示元素同时有按下和没有按下的状态。 <div role="button" tabindex="0" title="添加个姑娘" aria-pressed="false" aria-disabled="false">添加</div> 左边HTML表示按钮已经按下,同时处于禁用状态。

aria-selected 字符串。表示选择状态。可选值有:true, false, undefined. 默认为undefined,表示元素选择状态未知。true表示元素已选择;false表示未被选中。 <div> <ul role="tablist"> <li role="tab" aria-selected="true" tabindex="0">美女</li> <li role="tab" aria-selected="false" tabindex="-1">淑女</li> <li role="tab" aria-selected="false" tabindex="-1">熟女</li> <li role="tab" aria-selected="false" tabindex="-1">腐女</li> </ul> </div>

元素被选中表明其处于某种交互之中,因此选中元素很可能处于focus焦点获取状态。

注意:为了跨浏览器兼容,总是使用WAI-ARIA属性解析来访问和修改ARIA属性,例如object.setAttribute("aria-valuenow", newValue).

七、附图

末了,附上09年,腾讯(好像现在叫isux)团队弄的张ARIA相关大图:

aria相关属性关系图缩略图 张鑫旭-鑫空间-鑫生活

 

 

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

网友点评
a