slider 表示滑动条 <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>
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>