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相关大图: