slider 表示滑动条 <div> <img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0" role="slider" src="slider_control.png" /> <div role="presentation" tabindex="0">45</div> </div>

spinbutton 表示微调 <div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0"> 50</div> 例如下面这个数值微调效果截图：

tab 表示标签 <div> <ul role="tablist"> <li aria-selected="true" role="tab" 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>

tablist 表示标签列表 <div> <ul role="tablist"> <li aria-selected="true" role="tab" 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>

tabpanel 表示标签面板 <div role="tabpanel"> <ul role="tablist"><-- 选项卡 --></ul> <div aria-labelledby="tab1" role="tabpanel"> <ul> <li><input type="radio" value="q" /> <label for="girl1">晴川</label></li> <li><input type="radio" value="j" checked /> <label for="girl2">静秋</label></li> <li><input type="radio" value="h" /> <label for="girl3">黄小仙</label></li> </ul> </div> <div aria-labelledby="tab2" role="tabpanel"></div> <div aria-labelledby="tab3" role="tabpanel"></div> <div aria-labelledby="tab4" role="tabpanel"></div> </div>

timer 表示计数 <div role="timer" aria-atomic="true" aria-relevant="all">0</div> 模拟计数器，使用在动态显示规律数值变化的地方

toolbar 表示工具栏 <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="btncut.png" role="button" alt="cut" /> <img src="btncopy.png" role="button" alt="copy" /> <img src="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="expanded.gif" />美女 <ul role="group"></ul> </li> <li aria-expanded="false" tabindex="0" role="treeitem"> <img alt="收起" src="contracted.gif" />淑女 <ul role="group"></ul> </li> </ul> 效果见下面treeitem中的图。

treeitem 表示树结构选项 <ul role="tree"> <li aria-expanded="true" tabindex="-1" role="treeitem"> <img alt="展开" src="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="contracted.gif" />淑女 <ul role="group"></ul> </li> </ul>

属性名属性值HTML示意说明