WAI-ARIA無障礙網頁應用屬性徹底展現

時間 2019-11-15

標籤 wai aria 無障礙網頁應用屬性徹底展現欄目 HTML 简体版

原文原文鏈接

1、你至少應該知道ARIA是什麼東西！

WAI-ARIA指無障礙網頁應用。主要針對的是視覺缺陷，失聰，行動不便的殘疾人以及僞裝殘疾的測試人員。尤爲像盲人，眼睛看不到，其瀏覽網頁則須要藉助輔助設備，如屏幕閱讀器，屏幕閱讀機能夠大聲朗讀或者輸出盲文。面試

而ARIA就是可讓屏幕閱讀器準確識別網頁中的內容，變化，狀態的技術規範，可讓盲人這類用戶也能無障礙閱讀！ajax

2、爲何須要ARIA？

回答標題問題前我先問其餘幾個問題？瀏覽器

如何讓盲人用戶知道當前瀏覽區域就是網站主導航？
若是讓盲人用戶知道點擊某個按鈕後出來的是彈框？
如何讓盲人用戶知道點擊某個按鈕後頁面另一個區域的文字發生了變化？
如何讓盲人用戶知道您使用了li標籤是用來模擬標準select控件呢？
如何讓盲人用戶知道您模擬的select控件是單選呢仍是能夠多選呢？

在你現有的知識範圍內，您有辦法解決上面的問題嗎？有人會說，我使用HTML5, 恩，確實，HTML5的出現大大加強了網頁的可訪問性和無障礙閱讀，可是，其不是萬能的，例如沒法讓盲人知道模擬控件的類型等。app

所以，才須要ARIA.ide

3、ARIA是個非主流，咱不鳥！

ARIA是非主流嗎？真是睡在凍牀上不知冷熱啊。ARIA規範一直在更新維護，瀏覽器方面IE8+以及其餘全部現代瀏覽器都都已支持ARIA, 幾乎能夠說是全方位支持。流行的JavaScript庫jQuery, 以及衍生的jQuery Mobile早早支持了ARIA，國內知名JavaScript庫kissy也在去年（我沒記錯的話）支持了ARIA並在實際項目中使用了（能夠在淘寶首頁尋覓蹤影）。wordpress

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

4、算了吧，盲人，這麼小衆，鳥個毛啊！

嘛，確實，反正你一生就照着設計圖切幾個死頁面就夠了。學習

5、靠，ARIA相關屬性茫茫多，老子調戲前臺都沒時間，鳥這個！

ARIA相關屬性雖然多，哥們，要曉得，時間緊的時候，作前戲就沒有必要把每一個部位都親個遍，直接針對敏感部位就好了。ARIA也是同樣，知道幾個經常使用的屬性就能夠了。之後在領導面前吹噓啊，面試得瑟啊什麼的就有料了！測試

到如今全是文字，爲了提升可閱讀性，避免文字閱讀吃力的潛在用戶關閉本頁面，是時候舉個實際的例子提提你們的神了，讓你們知道ARIA就是個冰激凌（跟屎放在一塊兒只是膚色白了點而已）。網站

本例來自淘寶首頁，你們有興趣也能夠本身看看，示例對象見下截圖（淘寶網右上角選項卡）：

使用firebug查看其對應的HTML代碼，就能夠看到aria的應用啦！

仔細一看，唷，這但是標準的選項卡ARIA屬性應用（該用的屬性都有），OK，對於經常使用的選項卡，就套用淘寶網這裏的結構吧，很標準的。就是增長几個role屬性，增長几個aria-屬性就能夠了，而後，這個選項卡就變成了很牛逼很碉堡的無障礙閱讀選項卡啦。恩，這再一次驗證了這個道理：要變成牛人很簡單——騎在牛身上就能夠了。

哎呀哎呀，聰明好學的你可能但願知道這裏aria-hidden, aria-labelledby是啥意思。

好同窗，我被你這種學習的熱情感動了，因而決把我這幾天沒日沒夜整理的WAI-ARIA無障礙網頁應用屬性大全表展現出來，上面的兩個屬性，以及其餘N多aria-的兄弟姐妹屬性均可以從下面幾個表中找到。

若是你被表格的高度嚇住了不想看也不要緊，記住這裏，回頭須要的時候再來找找，哦呵呵！^_^

下面三個表，依次爲：ARIA role屬性值表、ARIA屬性表、ARIA狀態屬性表。

6、ARIA屬性表

ARIA Roles值示意及說明表

role屬性值	含義	HTML示意	說明
alert	表示警告	<p id="ajax_error_alert" role="alert"></p>	例如ajax操做返回錯誤信息的`div`標籤。
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="關閉" id="alert_close" /> </div>	自定義的出錯提示彈框。
application	表示應用	<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	表示複選框	<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	表示網格	<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	表示網格單元	<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 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>	相似三國殺右側記錄戰事區域；或是比賽文字直播記錄區域。
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	表示可複選的菜單項	<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`顯示的就是當前滑動位置對應的值。
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>	自定義單選框控件的時候使用，下圖爲左側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	表示區域	<div role="region" tabindex="-1" aria-expanded="false"> 我之因此會出現，是由於主人你點擊了某個命中註定的按鈕。 </div>	例如用在`div`區域顯示隱藏切換的時候。
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>	用在表格模擬的行列表上，對應`table`下面的`tr`標籤。
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>	反應在下圖就是那條黑色的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	表示微調	<div class="spinbutton" role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0"> 50</div>	例以下面這個數值微調效果截圖：
tab	表示標籤	<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	表示標籤列表	<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	表示標籤面板	<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	表示計數	<div role="timer" aria-atomic="true" aria-relevant="all">0</div>	模擬計數器，使用在動態顯示規律數值變化的地方
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表示一個剪切，複製，粘貼三功能在一塊兒的工具欄。
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	表示樹結構選項	<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>

ARIA 屬性值示意及說明表

屬性名	屬性值	HTML示意	說明
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 屬性定義了當工具欄獲取焦點時，哪個工具欄的子控件獲取了焦點。在此HTML示例中，工具欄的第一個控件（擁有`id` 「button1″）是能獲取焦點的子控件。
aria-atomic	字符串。表示區域內容是否完整播報。值能夠爲`true`和`false`。當爲`true`時，表示輔助設備須要把整個區域內容都通報給使用者；若是爲`false`則表示只須要通報修改的部分。	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>	仍是這個時間選擇器年月標題的例子。這裏的`aria-atomic`爲`true`則表示當時間改變的時候，這裏的年月日期要完整播放，不要只改了月份就只報月分內容。
aria-autocomplete	字符串。表示用戶的文本框的自動提示是否提供。可選值有：`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>	目前，該屬性對於`inline`和`list`兩個值的含義暫不清楚。不過能夠肯定的是該屬性對應HTML5中`autocomplete`屬性。須要注意的是，若是`aria-autocomplete="list"`, `aria-autocomplete="inline"`或`aria-autocomplete="both"`被設置在支持`autocomplete`的元素上，則`autocomplete`的屬性值須要設成`"on"`, 若是是`aria-autocomplete="none"`，則須要設成`"off"`
aria-busy	字符串。表當前區域的忙碌狀態。默認爲`false`, 表清除busy狀態；可選爲`true`, 表該區域正在加載；或爲`error`, 表示該區域驗證無效。	<ul aria-atomic="true" aria-busy="true" aria-live="polite">	若是某個區域內(如這裏`ul`)有多個地方須要修改，須要所有修改完畢再通知使用者的話，就能夠先將`aria-busy`設爲`true`, 等到所有內容更新完畢後再設成`false`. 該屬性能夠避免輔助工具在區域內容更新完畢前不斷即時提醒使用者。
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">請選擇你中意的美女……</h3> </div>	該屬性定義了元素間不能經過文檔結構決定的關聯關係。`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>	一樣的，該屬性定義了文檔結構表現不出來的的元素間的相互關聯性。該屬性旨在經過標籤提供更多用戶可能須要的信息。若是指定了不僅一個`id`, 全部元素會合並在一塊兒共同建立一條單獨的描述。
aria-dropeffect	字符串。表示拖拽效果。可選值有：`copy`, `move`, `reference`, `execute`, `popup`, `none`, 依次表示：複製，移動，參照，執行，彈出以及沒有效果。	<-- 暫無HTML示例 -->	該屬性用在拖拽上。
aria-flowto	字符串。空格分隔的`id`值們。	<-- 暫無HTML示例 -->	若是該屬性值對應的是單獨的`id`, 輔助技術會恢復目標元素的閱讀；若是對應的是多個`id`, 則輔助技術會讓用戶去選擇、導航到目標元素。
aria-grabbed	字符串。拖拽中元素的捕獲狀態。可選值有:`true`, `false`, `undefined`. 默認爲`undefined`，表示元素捕獲狀態未知。`true`表示元素能夠捕獲；`false`表示不能被捕獲。	<-- 暫無HTML示例 -->	該屬性用在拖拽上。相似於HTML5中的`draggable`屬性。
aria-haspopup	字符串。`true`表示點擊的時候會出現菜單或是浮動元素； `false`表示沒有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	字符串。	<-- 暫無HTML示例 -->	定義一個字符串值標記當前元素。
aria-labelledby	字符串。空格分隔的`id`們	<div aria-labelledby="title" role="alertdialog"><h3 id="title">標題</h3></div>	`aria-labelledby`通常用在區域元素上，對於的`id`通常爲對應的標題或是標籤元素的`id`.關係型屬性。
aria-level	數值。表示等級。	<div aria-level="2">次標題</div>	上面的HTML相似於`<h2>次標題</h2>`
aria-live	字符串。可選值有：`off`, `polite`, `assertive`, `rude`。默認爲`off`, 表示不宣佈更新；`polite`表示只有用戶閒時宣佈；`assertive`表示儘快對用戶宣佈；`rude`表示即時提醒用戶，必要的時候甚至中斷用戶。	<div role="heading" aria-live="assertive" aria-atomic="true">2012年 3月</div>	絕大多數的更新應該在用戶閒暇的時候告知，即時提示對用戶是一種干擾。若是但願內容徹底更新後再提示，可使用上面提到的`aria-busy`. 左側的HTML爲時間選擇控件的年月標題部分，`aria-live="assertive"`表示的是當用戶選擇了新的時間的時候，儘快通知用戶時間發生了變動。
aria-multiselectable	字符串。表示是否可多選。默認爲`false`, 表示一次只能選擇一個項。`true`表示一次能夠選擇多個項。	<-- 暫無HTML示例 -->	例如手風琴展開收起效果，咱們可使用`aria-multiselectable`來告知輔助設備，一次能夠展開多個項仍是隻有一個展開。
aria-owns	字符串。值爲目標元素`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`表示元素所擁有的，這裏這裏的文本框擁有其對應的下拉列表。
aria-posinset	數值。表示當前位置。	<-- 暫無HTML示例 -->	用在設置和獲取一個集合內某項的當前位置。
aria-readonly	字符串。表示是否只讀。默認爲`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	字符串。表示區域內哪些操做行爲須要作出反應。可選值有：`additions`, `removals`, `text`, `all`，能夠空格分隔多個一塊兒顯示. `additions`表示新增節點的時候作出反應；`removals`表示刪除節點時重要操做；`text`表示文本改變是值得重視的；`all`等同於同時使用上面三個屬性值。	<div role="log" aria-atomic="false" aria-relevant="additions"></div>	左邊的HTML表示當日志內容有添加的時候作出反應。
aria-required	字符串。元素值是否必需。默認爲`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>	多半用在表單控件中。對應HTML5中`required`屬性。
aria-secret	字符串。表示機密狀態。	<-- 暫無HTML示例 -->	具體含義不詳
aria-setsize	數值。設置的尺寸大小值。	<-- 暫無HTML示例 -->	顧名思意
aria-sort	字符串。表示表格或格柵中的項是以升序排列仍是降序排列。可選值：`ascending`(↑), `descending`(↓), `none`, `other`.	<-- 暫無HTML示例 -->	Widget組件應用屬性。
aria-valuemax	數值。表容許的最大值。	<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>	用在範圍組件上。對應於HTML5中的`max`屬性。
aria-valuemin	數值。表示容許的最小值。	<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>	用在範圍組件上。對應於HTML5中的`min`屬性。
aria-valuenow	數值。表示當前值。	<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>	用在範圍組件上。對應於`value`屬性。
aria-valuetext	字符串。定義等同於`aria-valuenow`人可讀的文本。	<-- 暫無HTML示例 -->	用在範圍組件上。

ARIA 狀態值示意及說明表

屬性狀態	屬性值	HTML示意	說明
aria-checked	字符串。表示檢查的狀態。`true`表示元素被選擇；`false`表示元素未被選擇；`mixed`表示元素同時有選擇和爲選擇狀態。	<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>	該屬性用來代表用戶是否選擇了某些項（如左邊這個截圖所示）。
aria-disabled	字符串。表禁用狀態，`true`表示當前是非激活狀態；`false`表示清除非激活狀態。	<div role="button" tabindex="0" title="添加個姑娘" aria-pressed="false" aria-disabled="false">添加</div>	對應單複選框等控件的`disabled`屬性，通常用在自定義模擬控件中。
aria-expanded	字符串。表示展開狀態。默認爲`undefined`, 表示當前展開狀態未知。其它可選值：`true`表示元素是展開的；`false`表示元素不是展開的。	<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">請選擇你中意的：</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>	例如在手風琴交互效果中標示展開與否的狀態。該屬性對應HTML5的`open`屬性。
aria-hidden	字符串。可選值爲`true`和`false`, `true`表示元素隱藏(不可見)，`false`表示元素可見。	<div aria-hidden="false">23%</div>	該屬性使用很是廣泛。幾乎全部涉及到顯示與隱藏這類交互或沒有交互的地方均可以應用該屬性。左邊的示例HTML代碼來自進度條進度值顯示的`div`, 當前`aria-hidden`爲`false`, 表示該進度值是可見的。
aria-invalid	字符串。表示元素值是否錯誤的。默認爲`false`, 表示是OK的，若是爲`true`, 則表示值驗證不經過。	<input type="text" size="3" aria-labelledby="valid" aria-invalid="false" />
aria-pressed	字符串。表示按下的狀態，可選值有：`true`, `false`, `mixed`, `undfined`.默認爲`undfined`, 表示按下狀態未知；`true`表示元素往下（按鈕按下）；`false`表示元素擡起；`mixed`表示元素同時有按下和沒有按下的狀態。	<div role="button" tabindex="0" title="添加個姑娘" aria-pressed="false" aria-disabled="false">添加</div>	左邊HTML表示按鈕已經按下，同時處於禁用狀態。
aria-selected	字符串。表示選擇狀態。可選值有：`true`, `false`, `undefined`. 默認爲`undefined`，表示元素選擇狀態未知。`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焦點獲取狀態。