role屬性?

role屬性值含義HTML示意說明

alert	表示警告	<p id="ajax_error_alert" role="alert"></p>	例如ajax操作返回錯誤信息的div標(biāo)簽。
alertdialog	表示警告彈出框	<div aria-labelledby="alert_title" aria-hidden="false" tabindex="0"role="alertdialog" id="alert1"><p id="alert_title">彈出框</p><p id="alert_message">哥，你輸入的時間穿越了，請重新輸入！</p><input type="button" value="關(guān)閉" id="alert_close" /> </div>	自定義的出錯提示彈框。 ?
application	表示應(yīng)用	<div id="application" role="application"><label id="date_label" for="date">時間</label>:<input id="date" type="text"/><button id="bn_date">選擇日期...</button><div id="dp1" class="datepicker" aria-hidden="true"><-- 時間選擇控件具體 --></div> </div>	例如自定義的時間選擇器。
button	表示按鈕	<div role="toolbar" tabindex="0" aria-activedescendant="button1"><img src="btncut.png" id="button1" role="button" alt="cut" /><img src="btncopy.png" id="button2" role="button" alt="copy" /><img src="btnpaste.png" id="button3" role="button" alt="paste" /> </div>	大家都懂的，沒啥好說的
checkbox	表示復(fù)選框	<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 id="cb1-edit" class="cb_edit" type="text" tabindex="0"role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /><ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true"><li id="cb1-opt1" role="option">晴川</li><li id="cb1-opt2" role="option">靜秋</li><li id="cb1-opt3" role="option">黃小仙</li> </ul>
grid	表示網(wǎng)格	<table id="grid1" role="grid" aria-labelledby="grid1_label" aria-readonly="true"><caption id="grid1_label">美女們</caption><thead><tr><th id="grid1_q" tabindex="-1">晴川</th><th id="grid1_j" tabindex="-1">靜秋</th><th id="grid1_h" tabindex="-1">黃小仙</th></tr></thead><tbody id="data"></tbody> </table>
gridcell	表示網(wǎng)格單元	<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	表示應(yīng)用程序標(biāo)題頭	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>	例如時間選擇器中的月份標(biāo)題： ?
listbox	表示列表框	<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /><ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true"><li id="cb1-opt1" role="option">晴川</li><li id="cb1-opt2" role="option">靜秋</li><li id="cb1-opt3" role="option">黃小仙</li> </ul>
log	表示日志記錄	<div role="log" aria-atomic="false" aria-relevant="additions"></div>	類似三國殺右側(cè)記錄戰(zhàn)事區(qū)域；或是比賽文字直播記錄區(qū)域。
menu	表示菜單	<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>
menubar	表示菜單欄	<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>
menuitem	表示菜單項	<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>
menuitemcheckbox	表示可復(fù)選的菜單項	<ul role="menubar" title="美女菜單"><li role="menuitem" tabindex="0" aria-haspopup="true">美女<ul role="menu" aria-hidden="true"><li role="menuitemcheckbox" tabindex="-1" aria-checked="true">晴川</li><li role="menuitemcheckbox" tabindex="-1" aria-checked="true">靜秋</li><li role="menuitemcheckbox" 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>
menuitemradio	表示只能單選的菜單項	<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>
option	表示選項	<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"role="combobox" aria-autocomplete="inline" aria-owns="cb1-list" /><ul id="cb1-list" tabindex="-1" role="listbox" aria-expanded="true"><li role="option">晴川</li><li role="option">靜秋</li><li role="option">黃小仙</li> </ul>
presentation	表示稱述	<div class="slider"><img aria-valuenow="45" aria-valuemax="100" aria-valuemin="0"role="slider" src="slider_control.png" /><div role="presentation" tabindex="0">45</div> </div>	左邊示例的HTML為一個自定義的滑動條。而role="presentation"所在div顯示的就是當(dāng)前滑動位置對應(yīng)的值。 ?
progressbar	表示進度條	<div class="progress" role="progressbar"aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0"><div class="progressIndicator" style="width: 23.3333%;"></div><div class="progressVal" aria-hidden="false">23%</div> </div>
radio	表示單選	<h3 id="girl_label">美女們：</h3> <ul role="radiogroup" aria-labelledby="girl_label"><li tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="radio-unchecked.gif" /> 晴川</li><li tabindex="0" role="radio" aria-checked="true"><img role="presentation" src="radio-checked.gif" /> 靜秋</li><li tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="radio-unchecked.gif" /> 黃小仙</li> </ul>	自定義單選框控件的時候使用，下圖為左側(cè)HTML的效果圖： ?
radiogroup	表示單選組	<h3 id="girl_label">美女們：</h3> <ul role="radiogroup" aria-labelledby="girl_label"><li tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="radio-unchecked.gif" /> 晴川</li><li tabindex="0" role="radio" aria-checked="true"><img role="presentation" src="radio-checked.gif" /> 靜秋</li><li tabindex="-1" role="radio" aria-checked="false"><img role="presentation" src="radio-unchecked.gif" /> 黃小仙</li> </ul>
region	表示區(qū)域	<div role="region" tabindex="-1" aria-expanded="false">我之所以會出現(xiàn)，是因為主人你點擊了某個命中注定的按鈕。 </div>	例如用在div區(qū)域顯示隱藏切換的時候。
row	表示行	<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>	用在表格模擬的行列表上，對應(yīng)table下面的tr標(biāo)簽。
separator	表示分隔	<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="separator" tabindex="-1"></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>	反應(yīng)在下圖就是那條黑色的1像素水平分隔線： ?
slider	表示滑動條	<div class="slider"><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	表示微調(diào)	<div class="spinbutton" role="spinbutton"aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0"> 50</div>	例如下面這個數(shù)值微調(diào)效果截圖： ?
tab	表示標(biāo)簽	<div class="tabpanel"><ul class="tablist" 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	表示標(biāo)簽列表	<div class="tabpanel"><ul class="tablist" 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	表示標(biāo)簽面板	<div role="tabpanel"><ul class="tablist" role="tablist"><-- 選項卡 --></ul><div id="panel1" aria-labelledby="tab1" role="tabpanel"> <ul class="controlList"><li><input id="girl1" type="radio" name="girl" value="q" /><label for="girl1">晴川</label></li><li><input id="girl2" type="radio" name="girl" value="j" checked /><label for="girl2">靜秋</label></li><li><input id="girl3" type="radio" name="girl" value="h" /><label for="girl3">黃小仙</label></li></ul></div><div id="panel2" aria-labelledby="tab2" role="tabpanel"></div><div id="panel3" aria-labelledby="tab3" role="tabpanel"></div><div id="panel4" aria-labelledby="tab4" role="tabpanel"></div> </div>
timer	表示計數(shù)	<div role="timer" aria-atomic="true" aria-relevant="all">0</div>	模擬計數(shù)器，使用在動態(tài)顯示規(guī)律數(shù)值變化的地方
toolbar	表示工具欄	<div role="toolbar" tabindex="0" aria-activedescendant="button1"><img src="btncut.png" id="button1" role="button" alt="cut" /><img src="btncopy.png" id="button2" role="button" alt="copy" /><img src="btnpaste.png" id="button3" role="button" alt="paste" /> </div>	左邊HTML表示一個剪切，復(fù)制，粘貼三功能在一起的工具欄。
tooltip	表示提示文本	<div class="text"><label id="name_label" for="name">姓名:</label><input type="text" id="name" name="name" aria-labelledby="name_label"aria-describedby="tip" aria-required="false" /><div id="tip" 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	表示樹結(jié)構(gòu)選項	<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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/kunmomo/p/11557965.html

總結(jié)

以上是生活随笔為你收集整理的无障碍开发（二）之ARIA role属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。