最近看到一個(gè)面試題上面有一個(gè)問(wèn)題是：請(qǐng)解釋ARIA和屏幕閱讀器是什么？以及如何使用網(wǎng)站實(shí)現(xiàn)無(wú)障礙訪問(wèn)？

　　然后在看bootstrap的時(shí)候也有很多屬性不知道是什么意思，就搜了一下，下面總結(jié)：

WAI-ARIA無(wú)障礙網(wǎng)頁(yè)應(yīng)用屬性完全展示：

　　from?http://www.zhangxinxu.com

　http://www.zhangxinxu.com/wordpress/?p=2277

一、你至少應(yīng)該知道ARIA是什么東西！

　　WAI-ARIA是無(wú)障礙網(wǎng)頁(yè)應(yīng)用。主要是針對(duì)視覺(jué)缺陷，失聰，行動(dòng)不便的殘疾人以及假裝殘疾的測(cè)試人員。尤其像盲人，眼睛看不到，瀏覽器需要借助輔助設(shè)備，如屏幕閱讀器，可以大聲朗讀或者輸出盲文。

　　而WAI-ARIA可以讓屏幕閱讀器準(zhǔn)確識(shí)別網(wǎng)頁(yè)中的內(nèi)容，變化，狀態(tài)的技術(shù)規(guī)范，可以讓盲人這類(lèi)用戶(hù)也能無(wú)障礙的閱讀。

二、為什么需要ARIA？

　　回答標(biāo)題問(wèn)題前我先問(wèn)其他幾個(gè)問(wèn)題？

如何讓盲人用戶(hù)知道當(dāng)前瀏覽區(qū)域就是網(wǎng)站主導(dǎo)航？

如果讓盲人用戶(hù)知道點(diǎn)擊某個(gè)按鈕后出來(lái)的是彈框？

如何讓盲人用戶(hù)知道點(diǎn)擊某個(gè)按鈕后頁(yè)面另外一個(gè)區(qū)域的文字發(fā)生了變化？

如何讓盲人用戶(hù)知道您使用了li標(biāo)簽是用來(lái)模擬標(biāo)準(zhǔn)select控件呢？

如何讓盲人用戶(hù)知道您模擬的select控件是單選呢還是可以多選呢？

在你現(xiàn)有的知識(shí)范圍內(nèi)，您有辦法解決上面的問(wèn)題嗎？有人會(huì)說(shuō)，我使用HTML5, 恩，確實(shí)，HTML5的出現(xiàn)大大增強(qiáng)了網(wǎng)頁(yè)的可訪問(wèn)性和無(wú)障礙閱讀，但是，其不是萬(wàn)能的，例如無(wú)法讓盲人知道模擬控件的類(lèi)型等。

　　因此，才需要ARIA.

本例來(lái)自淘寶首頁(yè)，大家有興趣也可以自己看看，示例對(duì)象見(jiàn)下截圖（淘寶網(wǎng)右上角選項(xiàng)卡）：

使用firebug查看其對(duì)應(yīng)的HTML代碼，就可以看到aria的應(yīng)用啦！

仔細(xì)一看，唷，這可是標(biāo)準(zhǔn)的選項(xiàng)卡ARIA屬性應(yīng)用（該用的屬性都有），OK，對(duì)于常用的選項(xiàng)卡，就套用淘寶網(wǎng)這里的結(jié)構(gòu)吧，很標(biāo)準(zhǔn)的。就是增加幾個(gè)role屬性，增加幾個(gè)aria-屬性就可以了，然后，這個(gè)選項(xiàng)卡就變成了很牛逼很碉堡的無(wú)障礙閱讀選項(xiàng)卡啦。

?

　　ARIA是非主流嗎？真是睡在凍床上不知冷熱啊。ARIA規(guī)范一直在更新維護(hù)，瀏覽器方面IE8+以及其他所有現(xiàn)代瀏覽器都都已支持ARIA, 幾乎可以說(shuō)是全方位支持。流行的JavaScript庫(kù)jQuery, 以及衍生的jQuery Mobile早早支持了ARIA，國(guó)內(nèi)知名JavaScript庫(kù)kissy也支持了ARIA并在實(shí)際項(xiàng)目中使用了（可以在淘寶首頁(yè)尋覓蹤跡）。

Coach是包包中的主流嗎？ARIA就是包包中的Coach.

六、ARIA屬性表

ARIA Roles值示意及說(shuō)明表role屬性值含義HTML示意說(shuō)明

alert	表示警告	<p id="ajax_error_alert" role="alert"></p>	例如ajax操作返回錯(cuò)誤信息的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">哥，你輸入的時(shí)間穿越了，請(qǐng)重新輸入！</p><input type="button" value="關(guān)閉" id="alert_close" /> </div>	自定義的出錯(cuò)提示彈框。
application	表示應(yīng)用	<div id="application" role="application"><label id="date_label" for="date">時(shí)間</label>:<input id="date" type="text"/><button id="bn_date">選擇日期...</button><div id="dp1" class="datepicker" aria-hidden="true"><-- 時(shí)間選擇控件具體 --></div> </div>	例如自定義的時(shí)間選擇器。
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>	大家都懂的，沒(méi)啥好說(shuō)的
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>	同樣，大家都懂的，沒(méi)啥好說(shuō)的
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>	類(lèi)似于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>	例如時(shí)間選擇器中的月份標(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>	類(lèi)似三國(guó)殺右側(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	表示菜單項(xiàng)	<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ù)選的菜單項(xiàng)	<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	表示只能單選的菜單項(xiàng)	<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	表示選項(xiàng)	<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	表示稱(chēng)述	<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為一個(gè)自定義的滑動(dòng)條。而role="presentation"所在div顯示的就是當(dāng)前滑動(dòng)位置對(duì)應(yīng)的值。
progressbar	表示進(jìn)度條	<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>	自定義單選框控件的時(shí)候使用，下圖為左側(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">我之所以會(huì)出現(xiàn)，是因?yàn)橹魅四泓c(diǎn)擊了某個(gè)命中注定的按鈕。 </div>	例如用在div區(qū)域顯示隱藏切換的時(shí)候。
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>	用在表格模擬的行列表上，對(duì)應(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	表示滑動(dòng)條	<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>	例如下面這個(gè)數(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"><-- 選項(xiàng)卡 --></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	表示計(jì)數(shù)	<div role="timer" aria-atomic="true" aria-relevant="all">0</div>	模擬計(jì)數(shù)器，使用在動(dòng)態(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表示一個(gè)剪切，復(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>	如下圖黃色的這個(gè)提示框：
tree	表示樹(shù)形	<ul role="tree"><li aria-expanded="true" tabindex="-1" role="treeitem"><img alt="展開(kāi)" 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>	效果見(jiàn)下面treeitem中的圖。
treeitem	表示樹(shù)結(jié)構(gòu)選項(xiàng)	<ul role="tree"><li aria-expanded="true" tabindex="-1" role="treeitem"><img alt="展開(kāi)" 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>

?

ARIA 屬性值示意及說(shuō)明表屬性名屬性值HTML示意說(shuō)明

aria-activedescendant	字符串。表示后代元素的id值。	<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>	aria-activedescendant 屬性定義了當(dāng)工具欄獲取焦點(diǎn)時(shí)，哪一個(gè)工具欄的子控件獲取了焦點(diǎn)。在此HTML示例中，工具欄的第一個(gè)控件（擁有id?“button1″）是能獲取焦點(diǎn)的子控件。
aria-atomic	字符串。表示區(qū)域內(nèi)容是否完整播報(bào)。值可以為true和false。當(dāng)為true時(shí)，表示輔助設(shè)備需要把整個(gè)區(qū)域內(nèi)容都通報(bào)給使用者；如果為false則表示只需要通報(bào)修改的部分。	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>	還是這個(gè)時(shí)間選擇器年月標(biāo)題的例子。這里的aria-atomic為true則表示當(dāng)時(shí)間改變的時(shí)候，這里的年月日期要完整播放，不要只改了月份就只報(bào)月份內(nèi)容。
aria-autocomplete	字符串。表示用戶(hù)的文本框的自動(dòng)提示是否提供。可選值有：inline,?list,?both,?none.	<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"role="combobox" aria-autocomplete="inline" aria-owns="list" /><ul id="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>	目前，該屬性對(duì)于inline和list兩個(gè)值的含義暫不清楚。不過(guò)可以確定的是該屬性對(duì)應(yīng)HTML5中autocomplete屬性。需要注意的是，如果aria-autocomplete="list",?aria-autocomplete="inline"或aria-autocomplete="both"被設(shè)置在支持autocomplete的元素上，則autocomplete的屬性值需要設(shè)成"on", 如果是aria-autocomplete="none"，則需要設(shè)成"off"
aria-busy	字符串。表當(dāng)前區(qū)域的忙碌狀態(tài)。默認(rèn)為false, 表清除busy狀態(tài)；可選為true, 表該區(qū)域正在加載；或?yàn)閑rror, 表示該區(qū)域驗(yàn)證無(wú)效。	<ul aria-atomic="true" aria-busy="true" aria-live="polite">	如果某個(gè)區(qū)域內(nèi)(如這里ul)有多個(gè)地方需要修改，需要全部修改完畢再通知使用者的話，就可以先將aria-busy設(shè)為true, 等到全部?jī)?nèi)容更新完畢后再設(shè)成false. 該屬性可以避免輔助工具在區(qū)域內(nèi)容更新完畢前不斷即時(shí)提醒使用者。
aria-controls	字符串。空格分隔的id屬性值列表。	<h3 id="tab1" aria-selected="true" aria-controls="panel1" aria-expanded="true" role="tab" tabindex="0">姑娘們</h3><div id="panel1" aria-labelledby="tab1" aria-hidden="false" role="tabpanel"><h3 tabindex="0">請(qǐng)選擇你中意的美女……</h3> </div>	該屬性定義了元素間不能通過(guò)文檔結(jié)構(gòu)決定的關(guān)聯(lián)關(guān)系。ariaControls屬性主要被role為group,region, 或widget的元素使用。
aria-describedby	字符串。空格分隔的id屬性值列表。	<ul role="group"><li role="checkbox" aria-checked="mixed" tabindex="0">所有姑娘</li> <li role="checkbox" aria-checked="false"aria-describedby="desc1" tabindex="0">晴川</li> </ul> <p id="desc1">楊冪飾演的穿越女王~~</p>	同樣的，該屬性定義了文檔結(jié)構(gòu)表現(xiàn)不出來(lái)的的元素間的相互關(guān)聯(lián)性。該屬性旨在通過(guò)標(biāo)簽提供更多用戶(hù)可能需要的信息。如果指定了不只一個(gè)id, 所有元素會(huì)合并在一起共同創(chuàng)建一條單獨(dú)的描述。
aria-dropeffect	字符串。表示拖拽效果。可選值有：copy,?move,reference,?execute,?popup,?none, 依次表示：復(fù)制，移動(dòng)，參照，執(zhí)行，彈出以及沒(méi)有效果。	<-- 暫無(wú)HTML示例 -->	該屬性用在拖拽上。
aria-flowto	字符串。空格分隔的id值們。	<-- 暫無(wú)HTML示例 -->	如果該屬性值對(duì)應(yīng)的是單獨(dú)的id, 輔助技術(shù)會(huì)恢復(fù)目標(biāo)元素的閱讀；如果對(duì)應(yīng)的是多個(gè)id, 則輔助技術(shù)會(huì)讓用戶(hù)去選擇、導(dǎo)航到目標(biāo)元素。
aria-grabbed	字符串。拖拽中元素的捕獲狀態(tài)。可選值有:true,false,?undefined. 默認(rèn)為undefined，表示元素捕獲狀態(tài)未知。true表示元素可以捕獲；false表示不能被捕獲。	<-- 暫無(wú)HTML示例 -->	該屬性用在拖拽上。類(lèi)似于HTML5中的draggable屬性。
aria-haspopup	字符串。true表示點(diǎn)擊的時(shí)候會(huì)出現(xiàn)菜單或是浮動(dòng)元素；?false表示沒(méi)有pop-up效果。	<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>
aria-label	字符串。	<-- 暫無(wú)HTML示例 -->	定義一個(gè)字符串值標(biāo)記當(dāng)前元素。
aria-labelledby	字符串。空格分隔的id們	<div aria-labelledby="title" role="alertdialog"><h3 id="title">標(biāo)題</h3></div>	aria-labelledby一般用在區(qū)域元素上，對(duì)于的id一般為對(duì)應(yīng)的標(biāo)題或是標(biāo)簽元素的id.關(guān)系型屬性。
aria-level	數(shù)值。表示等級(jí)。	<div aria-level="2">次標(biāo)題</div>	上面的HTML類(lèi)似于<h2>次標(biāo)題</h2>
aria-live	字符串。可選值有：off,?polite,?assertive,rude。默認(rèn)為off, 表示不宣布更新；polite表示只有用戶(hù)閑時(shí)宣布；assertive表示盡快對(duì)用戶(hù)宣布；rude表示即時(shí)提醒用戶(hù)，必要的時(shí)候甚至中斷用戶(hù)。	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>	絕大多數(shù)的更新應(yīng)該在用戶(hù)閑暇的時(shí)候告知，即時(shí)提示對(duì)用戶(hù)是一種干擾。如果希望內(nèi)容完全更新后再提示，可以使用上面提到的aria-busy. 左側(cè)的HTML為時(shí)間選擇控件的年月標(biāo)題部分，aria-live="assertive"表示的是當(dāng)用戶(hù)選擇了新的時(shí)間的時(shí)候，盡快通知用戶(hù)時(shí)間發(fā)生了變更。
aria-multiselectable	字符串。表示是否可多選。默認(rèn)為false, 表示一次只能選擇一個(gè)項(xiàng)。true表示一次可以選擇多個(gè)項(xiàng)。	<-- 暫無(wú)HTML示例 -->	例如手風(fēng)琴展開(kāi)收起效果，我們可以使用aria-multiselectable來(lái)告知輔助設(shè)備，一次可以展開(kāi)多個(gè)項(xiàng)還是只有一個(gè)展開(kāi)。
aria-owns	字符串。值為目標(biāo)元素id.	<input id="cb1-edit" class="cb_edit" type="text" tabindex="0"role="combobox" aria-autocomplete="inline" aria-owns="list" /><ul id="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>	aria-owns表示元素所擁有的，這里這里的文本框擁有其對(duì)應(yīng)的下拉列表。
aria-posinset	數(shù)值。表示當(dāng)前位置。	<-- 暫無(wú)HTML示例 -->	用在設(shè)置和獲取一個(gè)集合內(nèi)某項(xiàng)的當(dāng)前位置。
aria-readonly	字符串。表示是否只讀。默認(rèn)為false, 表示元素值可以被修改；true表示元素指不能被改變。	<table id="grid1" role="grid" aria-labelledby="girl_label" aria-readonly="true"><caption id="girl_label">美女們</caption><tr><th id="grid1_q" tabindex="-1">晴川</th><th id="grid1_j" tabindex="-1">靜秋</th><th id="grid1_h" tabindex="-1">黃小仙</th></tr> </table>
aria-relevant	字符串。表示區(qū)域內(nèi)哪些操作行為需要做出反應(yīng)。可選值有：additions,?removals,?text,?all，可以空格分隔多個(gè)一起顯示.?additions表示新增節(jié)點(diǎn)的時(shí)候做出反應(yīng)；removals表示刪除節(jié)點(diǎn)時(shí)重要操作；text表示文本改變是值得重視的；all等同于同時(shí)使用上面三個(gè)屬性值。	<div role="log" aria-atomic="false" aria-relevant="additions"></div>	左邊的HTML表示當(dāng)日志內(nèi)容有添加的時(shí)候做出反應(yīng)。
aria-required	字符串。元素值是否必需。默認(rèn)為false, 表示元素值可以為空；true表示元素值是必需的。	<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="true" /><div id="tip" role="tooltip" aria-hidden="true">姓名不能為空</div> </div>	多半用在表單控件中。對(duì)應(yīng)HTML5中required屬性。
aria-secret	字符串。表示機(jī)密狀態(tài)。	<-- 暫無(wú)HTML示例 -->	具體含義不詳
aria-setsize	數(shù)值。設(shè)置的尺寸大小值。	<-- 暫無(wú)HTML示例 -->	顧名思意
aria-sort	字符串。表示表格或格柵中的項(xiàng)是以升序排列還是降序排列。可選值：ascending(↑),?descending(↓),none,?other.	<-- 暫無(wú)HTML示例 -->	Widget組件應(yīng)用屬性。
aria-valuemax	數(shù)值。表允許的最大值。	<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>	用在范圍組件上。對(duì)應(yīng)于HTML5中的max屬性。
aria-valuemin	數(shù)值。表示允許的最小值。	<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>	用在范圍組件上。對(duì)應(yīng)于HTML5中的min屬性。
aria-valuenow	數(shù)值。表示當(dāng)前值。	<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>	用在范圍組件上。對(duì)應(yīng)于value屬性。
aria-valuetext	字符串。定義等同于aria-valuenow人可讀的文本。	<-- 暫無(wú)HTML示例 -->	用在范圍組件上。

?

ARIA 狀態(tài)值示意及說(shuō)明表屬性狀態(tài)屬性值HTML示意說(shuō)明

aria-checked	字符串。表示檢查的狀態(tài)。true表示元素被選擇；false表示元素未被選擇；mixed表示元素同時(shí)有選擇和為選擇狀態(tài)。	<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>	該屬性用來(lái)表明用戶(hù)是否選擇了某些項(xiàng)（如左邊這個(gè)截圖所示）。
aria-disabled	字符串。表禁用狀態(tài)，true表示當(dāng)前是非激活狀態(tài)；false表示清除非激活狀態(tài)。	<div role="button" tabindex="0" title="添加個(gè)姑娘" aria-pressed="false"aria-disabled="false">添加</div>	對(duì)應(yīng)單復(fù)選框等控件的disabled屬性，一般用在自定義模擬控件中。
aria-expanded	字符串。表示展開(kāi)狀態(tài)。默認(rèn)為undefined, 表示當(dāng)前展開(kāi)狀態(tài)未知。其它可選值：true表示元素是展開(kāi)的；false表示元素不是展開(kāi)的。	<h3 id="tab1" aria-selected="true" aria-controls="panel1" aria-expanded="true" role="tab" tabindex="0">姑娘們</h3><div id="panel1" aria-labelledby="tab1" aria-hidden="false" role="tabpanel"><h3 tabindex="0">請(qǐng)選擇你中意的：</h3><ul class="controlList"><li><input id="p1_1" type="radio" name="girl" value="q" /><label for="p1_1">晴川</label></li><li><input id="p1_2" type="radio" name="girl" value="j" checked /><label for="p1_2">靜秋</label></li><li><input id="p1_3" type="radio" name="girl" value="h" /><label for="p1_3">黃小仙</label></li></ul> </div>	例如在手風(fēng)琴交互效果中標(biāo)示展開(kāi)與否的狀態(tài)。該屬性對(duì)應(yīng)HTML5的open屬性。
aria-hidden	字符串。可選值為true和false,?true表示元素隱藏(不可見(jiàn))，false表示元素可見(jiàn)。	<div aria-hidden="false">23%</div>	該屬性使用非常普遍。幾乎所有涉及到顯示與隱藏這類(lèi)交互或沒(méi)有交互的地方都可以應(yīng)用該屬性。左邊的示例HTML代碼來(lái)自進(jìn)度條進(jìn)度值顯示的div, 當(dāng)前aria-hidden為false, 表示該進(jìn)度值是可見(jiàn)的。
aria-invalid	字符串。表示元素值是否錯(cuò)誤的。默認(rèn)為false, 表示是OK的，如果為true, 則表示值驗(yàn)證不通過(guò)。	<input type="text" size="3" aria-labelledby="valid" aria-invalid="false" />	?
aria-pressed	字符串。表示按下的狀態(tài)，可選值有：true,?false,?mixed,undfined.默認(rèn)為undfined, 表示按下?tīng)顟B(tài)未知；true表示元素往下（按鈕按下）；false表示元素抬起；mixed表示元素同時(shí)有按下和沒(méi)有按下的狀態(tài)。	<div role="button" tabindex="0" title="添加個(gè)姑娘" aria-pressed="false"aria-disabled="false">添加</div>	左邊HTML表示按鈕已經(jīng)按下，同時(shí)處于禁用狀態(tài)。
aria-selected	字符串。表示選擇狀態(tài)。可選值有：true,?false,undefined. 默認(rèn)為undefined，表示元素選擇狀態(tài)未知。true表示元素已選擇；false表示未被選中。	<div class="tabpanel"><ul class="tablist" role="tablist"><li role="tab" aria-selected="true" 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>	元素被選中表明其處于某種交互之中，因此選中元素很可能處于focus焦點(diǎn)獲取狀態(tài)。

注意：為了跨瀏覽器兼容，總是使用WAI-ARIA屬性解析來(lái)訪問(wèn)和修改ARIA屬性，例如object.setAttribute("aria-valuenow", newValue).

七、附圖

末了，附上09年，騰訊（好像現(xiàn)在叫isux）團(tuán)隊(duì)弄的張ARIA相關(guān)大圖：

點(diǎn)擊圖片查看大圖

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

總結(jié)

以上是生活随笔為你收集整理的WAI-ARIA和屏幕阅读器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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