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> 同样,大家都懂的,没啥好说的
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>
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>
heading 表示应用程序标题头 <div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div> 例如时间选择器中的月份标题:
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