ARIA无障碍网页应用属性完全展示(8)

左侧的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无障碍网页应用属性完全展示

 
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="https://www.linuxidc.com/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="https://www.linuxidc.com/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="https://www.linuxidc.com/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>  

ARIA无障碍网页应用属性完全展示

该属性用来表明用户是否选择了某些项(如左边这个截图所示)。
 
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>  

ARIA无障碍网页应用属性完全展示

例如在手风琴交互效果中标示展开与否的状态。该属性对应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>  

ARIA无障碍网页应用属性完全展示

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

 

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

七、附图

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/b20cab8eb4305445835de74310f245e3.html