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

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

 
timer   表示计数   <div role="timer" aria-atomic="true" aria-relevant="all">0</div>   模拟计数器,使用在动态显示规律数值变化的地方  
toolbar   表示工具栏   <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="https://www.linuxidc.com/btncut.png" role="button" alt="cut" /> <img src="https://www.linuxidc.com/btncopy.png" role="button" alt="copy" /> <img src="https://www.linuxidc.com/btnpaste.png" role="button" alt="paste" /> </div>   左边HTML表示一个剪切,复制,粘贴三功能在一起的工具栏。  
tooltip   表示提示文本   <div> <label for="name">姓名:</label> <input type="text" aria-labelledby="name_label" aria-describedby="tip" aria-required="false" /> <div role="tooltip" aria-hidden="true">必须是美女姓名哦~~</div> </div>   如下图黄色的这个提示框:

提示文本

 
tree   表示树形   <ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="展开" src="https://www.linuxidc.com/expanded.gif" />美女 <ul role="group"></ul> </li> <li aria-expanded="false" tabindex="0" role="treeitem"> <img alt="收起" src="https://www.linuxidc.com/contracted.gif" />淑女 <ul role="group"></ul> </li> </ul>   效果见下面treeitem中的图。  
treeitem   表示树结构选项   <ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="展开" src="https://www.linuxidc.com/expanded.gif" />美女 <ul role="group"> <li tabindex="-1" role="treeitem">晴川</li> <li tabindex="-1" role="treeitem">静秋</li> <li tabindex="-1" role="treeitem">黄小仙</li> </ul> </li> <li aria-expanded="false" tabindex="0" role="treeitem"> <img alt="收起" src="https://www.linuxidc.com/contracted.gif" />淑女 <ul role="group"></ul> </li> </ul>  

 

如果您看到下面的文字,可能是由于在其他网站或是RSS中阅读本文,本文原地址:?p=2277,本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫生活,访问原出处更多精彩内容。

ARIA 属性值示意及说明表 属性名属性值HTML示意说明
aria-activedescendant   字符串。表示后代元素的id值。   <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="https://www.linuxidc.com/btncut.png" role="button" alt="cut" /> <img src="https://www.linuxidc.com/btncopy.png" role="button" alt="copy" /> <img src="https://www.linuxidc.com/btnpaste.png" role="button" alt="paste" /> </div>   aria-activedescendant 属性定义了当工具栏获取焦点时,哪一个工具栏的子控件获取了焦点。在此HTML示例中,工具栏的第一个控件(拥有id “button1″)是能获取焦点的子控件。  
aria-atomic   字符串。表示区域内容是否完整播报。值可以为true和false。当为true时,表示辅助设备需要把整个区域内容都通报给使用者;如果为false则表示只需要通报修改的部分。   <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>   还是这个时间选择器年月标题的例子。这里的aria-atomic为true则表示当时间改变的时候,这里的年月日期要完整播放,不要只改了月份就只报月份内容。  
aria-autocomplete   字符串。表示用户的文本框的自动提示是否提供。可选值有:inline, list, both, none.   <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>   目前,该属性对于inline和list两个值的含义暂不清楚。不过可以确定的是该属性对应HTML5中autocomplete属性。需要注意的是,如果aria-autocomplete="list", aria-autocomplete="inline"或aria-autocomplete="both"被设置在支持autocomplete的元素上,则autocomplete的属性值需要设成"on", 如果是aria-autocomplete="none",则需要设成"off"  
aria-busy   字符串。表当前区域的忙碌状态。默认为false, 表清除busy状态;可选为true, 表该区域正在加载;或为error, 表示该区域验证无效。   <ul aria-atomic="true" aria-busy="true" aria-live="polite">   如果某个区域内(如这里ul)有多个地方需要修改,需要全部修改完毕再通知使用者的话,就可以先将aria-busy设为true, 等到全部内容更新完毕后再设成false. 该属性可以避免辅助工具在区域内容更新完毕前不断即时提醒使用者。  
aria-controls   字符串。空格分隔的id属性值列表。   <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> </div>   该属性定义了元素间不能通过文档结构决定的关联关系。ariaControls属性主要被role为group, region, 或widget的元素使用。  
aria-describedby   字符串。空格分隔的id属性值列表。   <ul role="group"> <li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> <li role="checkbox" aria-checked="false" aria-describedby="desc1" tabindex="0">晴川</li> </ul> <p>杨幂饰演的穿越女王~~</p>   同样的,该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。  
aria-dropeffect   字符串。表示拖拽效果。可选值有:copy, move, reference, execute, popup, none, 依次表示:复制,移动,参照,执行,弹出以及没有效果。   <-- 暂无HTML示例 -->   该属性用在拖拽上。  
aria-flowto   字符串。空格分隔的id值们。   <-- 暂无HTML示例 -->   如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读;如果对应的是多个id, 则辅助技术会让用户去选择、导航到目标元素。  
aria-grabbed   字符串。拖拽中元素的捕获状态。可选值有:true, false, undefined. 默认为undefined,表示元素捕获状态未知。true表示元素可以捕获;false表示不能被捕获。   <-- 暂无HTML示例 -->   该属性用在拖拽上。类似于HTML5中的draggable属性。  
aria-haspopup   字符串。true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。   <ul role="menubar" title="美女菜单"> <li role="menuitem" tabindex="0" aria-haspopup="true"> 美女<ul role="menu" aria-hidden="true"> <li role="menuitemradio" tabindex="-1" aria-checked="true">晴川</li> <li role="menuitemradio" tabindex="-1" aria-checked="false">静秋</li> <li role="menuitemradio" tabindex="-1" aria-checked="false">黄小仙</li> </ul> </li> <li role="menuitem" tabindex="-1" aria-haspopup="false">靓女</li> <li role="menuitem" tabindex="-1" aria-haspopup="false">淑女</li> <li role="menuitem" tabindex="-1" aria-haspopup="false">熟女</li> </ul>  

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

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