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

自定义的出错提示框截图

 
application   表示应用   <div role="application"> <label for="date">时间</label>: <input type="text"/> <button>选择日期...</button> <div aria-hidden="true"> <-- 时间选择控件具体 --> </div> </div>   例如自定义的时间选择器。  
button   表示按钮   <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>   大家都懂的,没啥好说的  
checkbox   表示复选框   <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 role=checkbox

 
combobox   表示下拉列表框   <input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> <ul tabindex="-1" role="listbox" aria-expanded="true"> <li role="option">晴川</li> <li role="option">静秋</li> <li role="option">黄小仙</li> </ul>  

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

 
grid   表示网格   <table role="grid" aria-labelledby="grid1_label" aria-readonly="true"> <caption>美女们</caption> <thead> <tr> <th tabindex="-1">晴川</th> <th tabindex="-1">静秋</th> <th tabindex="-1">黄小仙</th> </tr> </thead> <tbody></tbody> </table>    
gridcell   表示网格单元   <table role="grid" aria-readonly="true"> <tr role="row" aria-selected="false"> <td role="gridcell" tabindex="-1">晴川</td> <td role="gridcell" tabindex="-1">静秋</td> <td role="gridcell" tabindex="-1">黄小仙</td> </tr> </table>   类似于table & table-cell  
group   表示组合并   <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 role=checkbox

 
heading   表示应用程序标题头   <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>   例如时间选择器中的月份标题:

aria时间选择器

 
listbox   表示列表框   <input type="text" tabindex="0" role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /> <ul tabindex="-1" role="listbox" aria-expanded="true"> <li role="option">晴川</li> <li role="option">静秋</li> <li role="option">黄小仙</li> </ul>  

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

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