無障礙網頁標准規范
一、無障礙網頁了解
1.1無障礙網頁
無障礙網頁特別針對殘疾人士的需要
1.2 ARIA是什么？
ARIA是W3C的 Web無障礙推進組織發布的可訪問富互聯網應用實現指南。WAI-ARIA是一個為殘疾人士等提供無障礙訪問動態、可交互Web內容的技術規范。
1.3 ARIA有組成部分
應用於HTML的ARIA有兩部分組成： **role** （角色）和帶 **aria-** 前綴的屬性，其作用：
role (角色)標識了一個元素的作用, aria- 屬性描述了與之有關的事物（特征）及其是什么樣的（狀態）HTML中的ARIA。
二、無障礙網頁規范常用屬性表
無障礙網頁規范常用屬性表
| 屬性名 |
屬性說明 |
示例 |
示例說明 |
| tabindex |
當網頁中的某些部分不能用Tab鍵來聚焦的時候，則需要用到tabindex，它是用來定位html元素。tabindex有三個值:0,-1以及X(X里32767是界點)
（1）當tabindex=0時，該元素可以用tab鍵獲取焦點，且訪問的順序是按照元素在文檔中的順序來聚焦；
（2）當tabindex=-1時，該元素用tab鍵獲取不到焦點，但是可以通過js獲取，這樣就便於我們通過js設置上下左右鍵的響應事件來聚焦;
（3）當tabindex>=1時，該元素可以用tab鍵獲取焦點，而且優先級大於tabindex=0；不過在tabindex>=1時，數字越小，越先定位到。一般應用於填寫表單。
（4）觸發div標簽綁定的onfocus事件和onblur事件，需要為該標簽添加tabindex屬性。 |
<li tabindex="0" aria-label="提示信息">內容</li> <li tabindex="0" aria-label="提示信息">內容</li> <li tabindex="0" aria-label="提示信息">內容</li> |
tabindex:使Tab鍵聚焦的屬性，設置為0，可以根據順序進行聚焦; aria-label:提示聚焦到標簽的內容,必須寫，否則用戶無法獲知該標簽的內容 |
| <li tabindex="3" aria-label="提示信息">內容</li> <li tabindex="2" aria-label="提示信息">內容</li> <li tabindex="1" aria-label="提示信息">內容</li> |
tabindex:使Tab鍵聚焦的屬性，鍵盤將會按照tabindex的值進行定位，tabindex的值越小，越早獲得聚焦; aria-label:提示聚焦到標簽的內容,必須寫，否則用戶無法獲知該標簽的內容 |
||
| 情況一: <a>內容</a>
情況二: <a href=””>內容</a>
情況三: <a tabindex="0">內容</a>
情況四: <a tabindex="0" href=””>內容</a> |
默認情況下如情況一，是不能通過Tab鍵進行聚焦； 只有加上herf才能進行聚焦如情況二，聚焦時會默認讀出a標簽里面的內容，並可以通過Enter鍵進入相應的鏈接； 雖然tabindex也可以實現Tab鍵聚焦的功能，但是不能通過Enter鍵進入相應的鏈接，如情況三； 若tabindex和a標簽相結合使用，必須要加上href，如情況四，這樣才能確保Tab鍵能聚焦的同時也能通過Enter鍵進入相應的鏈接 |
||
| 情況一: <div onfocus="javascript:alert('得到焦點!');" </div>
情況二： <div tabindex="0" onfocus='alert("得到焦點!");' </div>
|
若div標簽如情況一時，無論是Tab鍵還是點擊div區域都無法獲得聚焦，onfocus的函數並不能觸發，onblur同樣也存在這種道理; 若div標簽添加了tabindex屬性時如情況二，無論是通過Tab鍵還是通過點擊都可以觸發onfocus和onblur事件 |
||
| <div tabindex="0" role="menuitem">無障礙</div> <p tabindex="0" role="menuitem">無障礙</p> <h1 tabindex="0" role="menuitem">無障礙</h1> |
在div、p、h等標簽下使用tabindex的時，要注意的一點是必須要加上role屬性，否則鍵盤聚焦是讀屏軟件提示內容將會出現錯位、讀錯等現象 |
||
| aria-label |
用於提示標簽信息 |
情況一: <input / > 情況二: <input aria-label = "提示內容" /> 情況三: <input aria-label = "提示內容" value="編輯內容" /> 情況四： <input type="checkbox" aria-label="一周內記住登錄賬號" /> <span>一周內記住登錄賬號</span> |
input標簽可通過Tab鍵進行聚焦，如情況一，讀屏軟件提示:可編輯文本； 若在input標簽中加入aria-label，如情況二，讀屏軟件提示:提示內容可編輯文本 若在input標簽中同時加入aria-label和value，如情況三，讀屏軟件提示:提示內容可編輯文本編輯內容 form表單中如何存在情況四的不規范的復選框情況，也可以使用aria-label標簽 |
| 情況一： <button>登錄</button> 情況二： <button aria-label="提示內容">登錄</button> |
button標簽可通過Tab鍵進行聚焦，如情況一，讀屏軟件提示:登錄按下按鈕； 在button標簽中添加aria-label如情況二，讀屏軟件提示:提示內容按下按鈕，即添加了aria-label后，會自動覆蓋button標簽里面的內容，不再讀出。 |
||
| aria-labelledby |
多用於綁定id，提示標簽信息 |
<div aria-labelledby="title" role="alertdialog" tabindex="0"> <h3 id="title">標題</h3> </div> |
role="alertdialog"表明該div是一個對話框，div標簽中的aria-labelledby與h3標簽中的id保存一致，這樣就可以提示div標簽的信息，讀屏軟件提示:標題對話框 |
| role |
標簽扮演的角色屬性，即確認某個標簽的作用 |
情況一: <a href="">百度</a> 情況二： <a href="" role="button">百度</a> |
默認情況下，a標簽加上href后如情況一，讀屏軟件提示:百度鏈接已遍歷； a標簽同時加上href和button 讀屏軟件提示:百度按下按鈕 |
| <ul role="tablist"> <li role="presentation"class="active"> <a role="tab" href="">企業經辦</a> </li> <li role="presentation"> <a role="tab" href="">總公司</a> </li> <li role="presentation"> <a role="tab" href="">子公司</a> </li> </ul> |
選項卡的例子，role=tablist表明ul是一個選項卡列表；role="presentation"表示稱述，role="tab"表明該a標簽是一個選項卡，讀屏軟件提示:企業經辦人選項卡
|
||
| 情況一: <ul role="radiogroup"> <li tabindex="0" role="radio" aria-checked="false">A選項</li> <li tabindex="0" role="radio" aria-checked="true">B選項</li> <li tabindex="0" role="radio" aria-checked="false">C選項</li> </ul>
情況二: <li tabindex="0" role="radio" aria-checked="false" aria-label=”A”>A選項</li> |
情況一是單選按鈕例子role="radiogroup"表明ul是一個單選組，tabindex="0"實現聚焦，role="radio" 表明li標簽是一個單選按鈕，aria-checked說明單選按鈕是否選中，aria-checked="true"表明單選按鈕已選中，aria-checked="false"表明單選按鈕未選中，讀屏軟件提示:A選項單選按鈕未選中 情況二實在情況一的li標簽中添加aria-label則讀屏軟件提示:A單選按鈕未選中,即aria-label的內容會覆蓋li的內容 |
||
| <div role="alertdialog" tabindex="0"> |
role="alertdialog"表明div是一個對話框，讀屏軟件提示:對話框 |
||
| for、id(聯動操作) |
for和id進行聯動，多用於form表單表單中的input編輯文本 |
情況一: <form> <label for="uname">用戶名</label> <input id="uname"/> </form>
情況二: <label for="uname">用戶名:</label> <input id="uname" title=”必填項” />
|
一般遇到input標簽即編輯文本時，讀屏軟件提示:可編輯文本，這樣用戶無法或獲知該文本的作用，雖然可以通過aria-label添加提示信息(除非沒有label)，相對來說不便利，隨着標簽內容的改動也要改變aria-label的提示信息。所以一般的input標簽編輯框都需要進行聯動。
情況一：這里的聯動就是將label標簽中的for和input標簽中的id取名一致即可，則讀屏軟件提示:用戶名可編輯文本。 注意:不能用name進行代替 情況二：在情況一的基礎上可以加上一個title的屬性，主要是用於提示用戶的內容，如該文本編輯框是一個必填項。讀屏軟件提示:用戶名編輯文本必填項 |
| alt |
alt一般運用於img標簽中 |
情況一： <a href=""> <img src="img/1.jpg" alt="小貓圖片" /></a>
情況二: <a href=""> <img src="img/1.jpg" alt="" >小貓圖片</a> |
情況一:alt的使用讓讀屏軟件可以將圖片的內容讀出來，若圖片不存在則會提示alt里面的內容。讀屏軟件提示:小貓圖片鏈接已遍歷; 情況二: 因為a標簽已經有內容了，img 的alt無需重復重復設置，否則讀屏軟件會連續讀兩次重復的內容，引起混亂。 |
| onpicked |
實現日期選擇聯動 |
<input id="begintime"onFocus=" var endtime=$dp.$('endtime'); WdatePicker({onpicked:function(){endtime.focus();},maxDate:'#F{$dp.$D(\'endtime\')}'})"/> 至 <input id="endtime" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'begintime\')}'})"/> |
$dp.$：是一個內置函數,相當於document.getElementById $dp.$D：是一個內置函數，意思是記錄該日期到日(D就是y,M,d,H,m,s 分別代表 年月日時分秒中的d)
|
三、無障礙網頁使用規則和注意事項
3.1 ARIA在HTML中的使用規則
（1）ARIA使用規則一
如果你使用的元素( HTML5 )具有語義化，應該使用這些元素，而不應該重新定義一個添加ARIA的角色、狀態或屬性的元素。在HTML(HTML5)元素特性不管支持或不支持，只要不具語義化，就可以使用ARIA 排除視覺設計約束使用一個特定的元素，但不能是樣式上所需的元素。
（2）ARIA使用規則二
不改變語義，除非你真的需要使用。
例如，開發者想創建一個標題，而且它是一個按鈕。
不要這樣做：<h1 role=button>標題按鈕</h1>
建議這樣做：<h1><button>標題按鈕</button></h1>
或者說，你不使用正確的元素，但你可以這樣做：
<h1><span role=button>標題按鈕</span></h1>
如果使用一個非交互的元素做為一個交互的元素，那么開發人員必須使用ARIA添加語義和使用適當的腳本增加交互行為。
（3）ARIA使用規則三
所有的ARIA制作控件都必須具有鍵盤(keyboard)事件。如果創建一個組件(widget)，用戶可以點擊、拖放、滑動或滾動，用戶使用鍵盤能定位到創建好的組件部件上，並且執行相應的操作動作。即如果使用 role=button 必須能夠接收到焦點和用戶能夠使用鍵盤激活相應動作
（4）ARIA使用規則四
不建議在可獲取焦點元素使用ARIA的角色:role=presentation或 aria-hidden="true"。可獲取焦點元素上使用ARIA這兩規則，會導致一些用戶無法獲取元素焦點。
不要這樣做:<button role=presentation>按下我</button>
也不要這樣做:<button aria-hidden="true">按下我</button>
如果說一個交互元素無法看到或者不能與之交互，那么可以嘗試使用aria-hidden,例如：button {visibility:hidden}<button aria-hidden="true">按下我</button> 如果一個交互元素使用 display:none; 來隱藏，那么它對應的可訪問性也將一並被刪除，這樣，在可交互元素上使用 aria-hidden="true" 就沒有必要了。
（5）ARIA使用規則五
所有交互元素都必須有一個可訪問的名稱。當可交互元素的可訪問性API的可訪問名屬性只有一個值時，那么可交互元素就只有一個可訪問的名稱。
例如:input type="text"有一個可見的 <label> 標簽,但它並沒有可訪問的名稱：
user name <input type="text">
或者:<label>user name</label><input type="text" />
所以我們必須加上一個可訪問名並進行聯動操作:
<label for="uname">user name</label><input type="text" id="uname"/>
四、無障礙網頁ARIA Roles值示意及說明表屬性表
ARIA Roles值示意及說明表屬性表
| Role值 |
含義 |
Html示例 |
示例說明 |
| alert |
表示警告 |
情況一: <div role="alert" tabindex="0">內容</div> 情況二: <div role="alert" tabindex="0" title="無障礙">內容</div> |
tabindex主要用於鍵盤聚焦的作用 情況一讀屏軟件提示:警告 情況二:加入title可以提高標簽的可讀性，讀屏軟件提示:無障礙警告 |
| alertdialog |
表示對話框 |
情況一： <div role="alertdialog" tabindex="0">內容</div> 情況二： <div role="alertdialog" tabindex="0" title="無障礙">內容</div> 情況三: <div aria-labelledby="alert_title" role="alertdialog" tabindex="0"> <p id="alert_title">彈出框</p> </div> |
tabindex主要用於鍵盤聚焦的作用 情況一讀屏軟件提示:對話框 情況二:加入title可以提高標簽的可讀性，讀屏軟件提示:無障礙對話框 情況三：alertdialog多與aria-labelledby相結合使用於彈出對話框，主要的用法是將aria-labelleby和p標簽中的id進行聯動操作，讀屏軟件提示:彈出框對話框 |
| application |
表示主窗口(應用) |
情況一： <div role="application" tabindex="0">內容</div> 情況二： <div role="application" tabindex="0" title="無障礙">內容</div> 情況三: <div role="application"> <label for="date">時間:</label> <input id="date" type="text" /> <button id="bn_date">選擇日期</button> <div class="datepicker" aria-hidden="true"> <-- 時間選擇控件 --> </div> </div> |
tabindex主要用於鍵盤聚焦的作用 情況一讀屏軟件提示:主窗口 情況二:加入title可以提高標簽的可讀性，讀屏軟件提示:無障礙主窗口 情況三：application常與自定義的時間選擇器相結合使用
|
| button |
表示按鈕 |
情況一： <div role="button" tabindex="0">標題</div> 情況二: <div role="button" tabindex="0" title="提示" >標題</div> |
tabindex主要用於鍵盤聚焦的作用 情況一讀屏軟件提示:標題按下按鈕 情況二:title應該學會巧用，否則會使讀屏軟件讀出的內容造成混亂現象，讀屏軟件提示:標題按下按鈕提示 |
| checkbox |
表示復選框 |
情況一： <div role="checkbox" aria-checked="true" tabindex="0">內容</div> 情況二: <div role="checkbox" aria-checked="true" tabindex="0" title="提示">內容</div> 情況三: <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> |
tabindex主要用於鍵盤聚焦的作用 role=”group”表示組 aria-checked=”true”表示已選中，aria-checked=”false”表示未選中， aria-checked=”mixed”表示未選中默認選中 情況一讀屏軟件提示:內容復選框已選中 情況二:title應該學會巧用，否則會使讀屏軟件讀出的內容造成混亂現象，讀屏軟件提示:內容復選框已選中提示 情況三:checkbox常用於復選框組，讀屏軟件提示:水果復選框未選中默認選中，蘋果復選框未選中...... |
| combobox |
表示組合框 |
情況一： <div role="combobox" tabindex="0">內容</div> 情況二: <input 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> |
tabindex主要用於鍵盤聚焦的作用 aria-autocomplete="inline"用戶的文本框的自動提示支持提供 aria-expanded=”true”表示展開狀態 role=”listbox”表示列表框 role=”option”表示選項 情況一讀屏軟件提示:組合框內容 情況二:aria-owns和ul標簽中的id進行了聯動操作 |
| grid |
表示表格(網格) |
情況一： <div role="grid" tabindex="0">內容</div> 情況二: <div role="grid" tabindex="0" title="必填項" aria-label="無障礙">內容</div> 情況三: <table role="grid" aria-labelledby="grid1_label" aria-readonly="true"> <caption id="grid1_label">水果</caption> <thead> <tr> <th tabindex="-1">蘋果</th> <th tabindex="-1">梨子</th> <th tabindex="-1">香蕉</th> </tr> </thead> <tbody></tbody> </table> |
tabindex主要用於鍵盤聚焦的作用 aria-readonly只讀，默認為false aria-readonly="false"表示元素可以被修改； aria-readonly="true"表示元素不能被修改； 情況一讀屏軟件提示:表格 情況二:讀屏軟件提示:無障礙表格必填項 情況三:grid常用於表格頭部,aria-labelldby和caption標簽中的id進行了聯動操作 |
| gridcell |
表示單元格(網格單元) |
情況一： <div role="gridcell" tabindex="0">內容</div> 情況二: <div role="gridcell" tabindex="0" title="必填項" aria-label="無障礙">內容</div> 情況三: <table role="grid" aria-readonly="true"> <tr role="row" aria-selected="false"> <td role="gridcell" tabindex="0" aria-label="蘋果">蘋果</td> <td role="gridcell" tabindex="0" aria-label="梨子">梨子</td> <td role="gridcell" tabindex="0" aria-label="香蕉">香蕉</td> </tr> </table> |
tabindex主要用於鍵盤聚焦的作用 aria-readonly只讀，默認為false aria-readonly="false"表示元素可以被修改； aria-readonly="true"表示元素不能被修改； aria-selected="false"表示未選中 aria-selected="true"表示已選中 role=”row”表示行 情況一讀屏軟件提示:單元格 情況二:讀屏軟件提示:無障礙單元格必填項 情況三:gridcell常用於表單中的單元格
|
| group |
表示分組(組合) |
情況一： <div role="group" tabindex="0">內容</div> 情況二: <div role="group" tabindex="0" title="必填項" aria-label="無障礙">內容</div> 情況三: <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> |
tabindex主要用於鍵盤聚焦的作用 aria-checked=”true”表示已選中，aria-checked=”false”表示未選中， aria-checked=”mixed”表示未選中, role="checkbox"表示復選框 情況一讀屏軟件提示:分組 情況二:讀屏軟件提示:無障礙分組必填項 情況三:group常用於分組
|
| heading |
表示應用程序標題頭 |
<div role="heading" aria-live="assertive" aria-atomic="true">2012年3月</div> |
aria-live="assertive"表示的是當用戶選擇了新的時間的時候，盡快通知用戶時間發生了變更。 aria-atomic="true"表示當時間改變的時候，這里的年月日期要完整播放，不要只改了月份就只報月份內容。 heading常用於時間選擇器中的月份標題 |
| listbox |
表示列表(列表框) |
情況一: <div role="listbox" tabindex="0">內容</div> 情況二: <div role="listbox" tabindex="0" title="必填項" aria-label="無障礙">內容</div> 情況三: <input 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> |
tabindex主要用於鍵盤聚焦的作用 aria-autocomplete="inline"用戶的文本框的自動提示支持提供 aria-expanded=”true”表示展開狀態 role=”combobox”表示組合框 role=”option”表示選項 情況一:讀屏軟件提示:列表 情況二:讀屏軟件提示:無障礙列表必填項 情況三:aria-owns和ul標簽中的id進行了聯動操作 |
| log |
表示客戶端(日志記錄) |
情況一: <div role="log" tabindex="0">內容</div> 情況二: <div role="log" tabindex="0" title="必填項" aria-label="無障礙">內容</div> 情況三: <div role="log" aria-atomic="false" aria-relevant="additions">內容</div> |
tabindex主要用於鍵盤聚焦的作用 aria-atomic="false" :表示只需要通報修改的部分； aria-relevant="additions":表示新增節點的時候做出反應 情況一:讀屏軟件提示:客戶端 情況二:讀屏軟件提示:無障礙客戶端必填項 情況三:當日志內容有添加的時候做出反應。類似三國殺右側記錄戰事區域；或是比賽文字直播記錄區域。 |
| menu |
表示菜單 |
<ul role="menubar"> <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> |
tabindex主要用於鍵盤聚焦的作用 role="menubar":菜單欄； role="menuitem":菜單項； role="menuitemradio":只能單選的菜單項； aria-haspopup="true":點擊的時候會出現菜單或浮動元素； aria-haspopup="false":沒有出現菜單或浮動效果； aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容； aria-checked="true":選中 aria-checked="false":未選中 |
| menubar |
表示菜單欄 |
<ul role="menubar"> <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> |
tabindex主要用於鍵盤聚焦的作用 role="menu":菜單； role="menuitem":菜單項； role="menuitemradio":只能單選的菜單項； aria-haspopup="true":點擊的時候會出現菜單或浮動元素； aria-haspopup="false":沒有出現菜單或浮動效果； aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容； aria-checked="true":選中 aria-checked="false":未選中 |
| menuitem |
表示菜單項 |
<ul role="menubar"> <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> |
tabindex主要用於鍵盤聚焦的作用 role="menu":菜單； role="menubar":菜單欄； role="menuitemradio":只能單選的菜單項； aria-haspopup="true":點擊的時候會出現菜單或浮動元素； aria-haspopup="false":沒有出現菜單或浮動效果； aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容； aria-checked="true":選中 aria-checked="false":未選中 |
| menuitemcheckbox |
表示可復選的菜單項
|
<ul role="menubar"> <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="false">梨子</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> |
tabindex主要用於鍵盤聚焦的作用 role="menu":菜單； role="menubar":菜單欄； role="menuitem":菜單項； aria-haspopup="true":點擊的時候會出現菜單或浮動元素； aria-haspopup="false":沒有出現菜單或浮動效果； aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容； aria-checked="true":選中 aria-checked="false":未選中 |
| menuitemradio |
表示只能單選的菜單項 |
<ul role="menubar"> <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> |
tabindex主要用於鍵盤聚焦的作用 role="menu":菜單； role="menubar":菜單欄； role="menuitem":菜單項； aria-haspopup="true":點擊的時候會出現菜單或浮動元素； aria-haspopup="false":沒有出現菜單或浮動效果； aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容； aria-checked="true":選中 aria-checked="false":未選中 |
| option |
表示選項 |
<input 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> |
tabindex主要用於鍵盤聚焦的作用 aria-autocomplete="inline"用戶的文本框的自動提示支持提供 aria-expanded=”true”表示展開狀態 role="combobox" :組合框 role=”listbox”:列表框 aria-owns和ul標簽中的id進行了聯動操作 |
| 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> |
tabindex主要用於鍵盤聚焦的作用 aria-valuenow="45" :當前值為45 aria-valuemax="100":允許最大值100 aria-valuemin="0":允許最小值0 role="slider":滑動條 presentation多用於自定義的滑動條。而role="presentation"所在div顯示的就是當前滑動位置對應的值。 |
| progressbar |
表示進度條 |
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0"> <div aria-hidden="false">23%</div> </div> |
tabindex主要用於鍵盤聚焦的作用 aria-valuenow="0" :當前值為0 aria-valuemax="100":允許最大值100 aria-valuemin="0":允許最小值0 aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容 讀屏軟件提示:進度欄0 |
| radio |
表示單選 |
<ul role="radiogroup"> <li tabindex="0" role="radio" aria-checked="false">A選項</li> <li tabindex="0" role="radio" aria-checked="true">B選項</li> <li tabindex="0" role="radio" aria-checked="false">C選項</li> </ul> |
tabindex主要用於鍵盤聚焦的作用 role="radiogroup":單選組 aria-checked="false":未選中 aria-checked="true":已選中 radio自定義單選框控件的時候使用 |
| radiogroup |
表示單選組 |
<ul role="radiogroup"> <li tabindex="0" role="radio" aria-checked="false">A選項</li> <li tabindex="0" role="radio" aria-checked="true">B選項</li> <li tabindex="0" role="radio" aria-checked="false">C選項</li> </ul> |
tabindex主要用於鍵盤聚焦的作用 role="radio":單選 aria-checked="false":未選中 aria-checked="true":已選中 |
| region |
表示區域 |
<div role="region" tabindex="-1" aria-expanded="false"> 我的出現，因為你點擊了某個按鈕。 </div> |
aria-expanded="false":表示元素不是展開的 region可用在div區域顯示隱藏切換的時候
|
| row |
表示行 |
<table role="grid" aria-readonly="true"> <tr role="row" aria-selected="false"> <td role="gridcell" tabindex="0" aria-label="蘋果">蘋果</td> <td role="gridcell" tabindex="0" aria-label="梨子">梨子</td> <td role="gridcell" tabindex="0" aria-label="香蕉">香蕉</td> </tr> </table> |
tabindex主要用於鍵盤聚焦的作用 aria-readonly只讀，默認為false aria-readonly="false"表示元素可以被修改； aria-readonly="true"表示元素不能被修改； aria-selected="false"表示未選中 aria-selected="true"表示已選中 role=”grid”表示網格 role=”gridcell”表示網格單元 row用在表格模擬的行列表上，對應table下面的tr標簽 |
| separator |
表示分隔 |
<ul role="menubar"> <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> </ul> |
tabindex主要用於鍵盤聚焦的作用 role="menu":菜單； role="menubar":菜單欄； role="menuitem":菜單項； role="menuitemradio":只能單選的菜單項； aria-haspopup="true":點擊的時候會出現菜單或浮動元素； aria-haspopup="false":沒有出現菜單或浮動效果； aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； aria-hidden="false":正常顯示且能通過聚焦讀出里面的內容； aria-checked="true":選中 aria-checked="false":未選中 separator的使用主要是用一條黑色的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> |
tabindex主要用於鍵盤聚焦的作用 aria-valuenow="45" :當前值為45 aria-valuemax="100":允許最大值100 aria-valuemin="0":允許最小值0 role="presentation":稱述 |
| spinbutton |
表示微調(即商品數量上下按鈕微調件數) |
<div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" tabindex="0"> 45</div>
|
tabindex主要用於鍵盤聚焦的作用 aria-valuenow="45" :當前值為45 aria-valuemax="100":允許最大值100 aria-valuemin="0":允許最小值0 讀屏軟件提示微調組合框45 |
| tab |
表示標簽 |
<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> |
tabindex主要用於鍵盤聚焦的作用 role="tablist":標簽列表 aria-selected="true"已選中 aria-selected="false"未選中 tab主要應用於選項卡 |
| tablist |
表示標簽列表 |
<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> |
tabindex主要用於鍵盤聚焦的作用 role="tab":標簽 aria-selected="true"已選中 aria-selected="false"未選中 tab主要應用於選項卡組 |
| tabpanel |
表示標簽面板 |
<div role="tabpanel"> <ul class="tablist" role="tablist"> <-- 選項卡 --></ul> <div id="panel1" aria-labelledby="tab1" role="tabpanel"> <ul class="controlList"> <li><input id="fruit1" type="radio" name="fruit" value="p" /> <label for="fruit1">蘋果</label></li> <li><input id="fruit2" type="radio" name="fruit" value="l" checked /> <label for="fruit2">梨子</label></li> <li><input id="fruit3" type="radio" name="fruit" value="x" /> <label for="fruit3">香蕉</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> |
role="tablist"：表明ul是一個選項卡列表； aria-labelledby:多用於綁定id，提示標簽信息； |
| timer |
表示計數 |
<div role="timer" aria-atomic="true" aria-relevant="all">0</div> |
aria-atomic="true":輔助設備需要把整個區域內容都通報給使用者 aria-relevant="additions":表示新增節點的時候做出反應； aria-relevant="removals":表示刪除節點時重要操作； aria-relevant="text":表示文本改變是值得重視的； aria-relevant="all":all等同於同時使用上面三個屬性值。 模擬計數器，使用在動態顯示規律數值變化的地方 讀屏軟件提示:時鍾 |
| toolbar |
表示工具欄 |
情況一: <div role="toolbar" tabindex="0" >內容</div> 情況二: <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> |
tabindex主要用於鍵盤聚焦的作用 aria-activedescendant:后代元素的id值,該屬性定義了當工具欄獲取焦點時，哪一個工具欄的子控件獲取了焦點。 情況一:讀屏軟件提示:工具欄
|
| tooltip |
表示提示文本 |
情況一: <div role="tooltip" tabindex="0" >內容</div> 情況二: <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> |
tabindex主要用於鍵盤聚焦的作用 aria-labelledby:多用於綁定id，提示標簽信息； aria-describedby:屬性定義了文檔結構表現不出來的的元素間的相互關聯性。該屬性旨在通過標簽提供更多用戶可能需要的信息。如果指定了不只一個id, 所有元素會合並在一起共同創建一條單獨的描述； aria-required="false":元素值可以為空; aria-hidden="true":正常顯示，但是不能通過聚焦讀出里面的內容； 情況一:讀屏軟件提示:工具提示
|
| tree |
表示樹形 |
情況一: <div role="tree" tabindex="0" >內容</div> 情況二: <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> |
tabindex主要用於鍵盤聚焦的作用 aria-expanded="true":表示展開狀態； aria-expanded="false":表示元素不是展開； role="treeitem":樹結構選項； role="group":組； 情況一:讀屏軟件提示:樹示圖
|
| 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> |
tabindex主要用於鍵盤聚焦的作用 aria-expanded="true":表示展開狀態； aria-expanded="false":表示元素不是展開； role="tree":表示樹形； role="group":組；
|
五、無障礙網頁ARIA屬性值示意及說明表
ARIA屬性值示意及說明表
| 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 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> |
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屬性值列表。 |
<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> |
該屬性定義了文檔結構表現不出來的的元素間的相互關聯性。該屬性旨在通過標簽提供更多用戶可能需要的信息。如果指定了不只一個id, 所有元素會合並在一起共同創建一條單獨的描述。 |
| aria-dropeffect |
字符串。表示拖拽效果。可選值有：copy, move, reference, execute, popup, none, 依次表示：復制，移動，參照，執行，彈出以及沒有效果 |
|
該屬性用在拖拽上。 |
| aria-flowto |
字符串。空格分隔的id值們 |
|
如果該屬性值對應的是單獨的id, 輔助技術會恢復目標元素的閱讀；如果對應的是多個id, 則輔助技術會讓用戶去選擇、導航到目標元素。 |
| aria-grabbed |
字符串。拖拽中元素的捕獲狀態。可選值有:true, false, undefined. 默認為undefined，表示元素捕獲狀態未知。true表示元素可以捕獲；false表示不能被捕獲。 |
|
該屬性用在拖拽上。類似於HTML5中的draggable屬性。 |
| aria-haspopup |
字符串。true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。 |
<ul role="menubar"> <li role="menuitem" tabindex="0" aria-haspopup="true">水果 <ul role="menu" aria-hidden="true"> <li role="menuitemradio" tabindex="-1" aria-checked="true">蘋果</li> |
|
| aria-label |
用於提示標簽信息 |
情況一: <input / > 情況二: <input aria-label = "提示內容" /> 情況三: <input aria-label = "提示內容" value="編輯內容" /> 情況四： <input type="checkbox" aria-label="一周內記住登錄賬號" /> <span>一周內記住登錄賬號</span> |
input標簽可通過Tab鍵進行聚焦，如情況一，讀屏軟件提示:可編輯文本； 若在input標簽中加入aria-label，如情況二，讀屏軟件提示:提示內容可編輯文本 若在input標簽中同時加入aria-label和value，如情況三，讀屏軟件提示:提示內容可編輯文本編輯內容 form表單中如何存在情況四的不規范的復選框情況，也可以使用aria-label標簽 |
| aria-labelledby |
多用於綁定id，提示標簽信息 |
<div aria-labelledby="title" role="alertdialog" tabindex="0"> <h3 id="title">標題</h3> </div> |
role="alertdialog"表明該div是一個對話框，div標簽中的aria-labelledby與h3標簽中的id保存一致，這樣就可以提示div標簽的信息，讀屏軟件提示:標題對話框 |
| 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表示一次可以選擇多個項 |
|
例如手風琴展開收起效果，我們可以使用aria-multiselectable來告知輔助設備，一次可以展開多個項還是只有一個展開。 |
| aria-owns |
字符串。值為目標元素id |
<input 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> |
aria-owns表示元素所擁有的，這里這里的文本框擁有其對應的下拉列表。 |
| aria-posinset |
數值。表示當前位置 |
|
用在設置和獲取一個集合內某項的當前位置。 |
| aria-readonly |
字符串。表示是否只讀。默認為false, 表示元素值可以被修改；true表示元素指不能被改變。 |
<table role="grid" aria-labelledby="grid1_label" aria-readonly="true"> <caption id="grid1_label">水果</caption> |
|
| 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="false" /> <div id="tip" role="tooltip" aria-hidden="true">內容</div> </div> |
多半用在表單控件中。對應HTML5中required屬性。 |
| aria-secret |
字符串。表示機密狀態 |
|
|
| aria-setsize |
數值。設置的尺寸大小值 |
|
|
| aria-sort |
字符串。表示表格或格柵中的項是以升序排列還是降序排列。可選值：ascending(↑), descending(↓), none, other. |
|
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人可讀的文本 |
|
用在范圍組件上。 |
六、無障礙網頁ARIA狀態值示意及說明表
ARIA狀態值示意及說明表
| ARIA狀態值 |
含義 |
Html示例 |
示例說明 |
| aria-checked |
字符串。表示檢查的狀態。true表示元素被選擇；false表示元素未被選擇；mixed表示元素同時有選擇和未選擇狀態 |
<ul role="radiogroup"> <li tabindex="0" role="radio" aria-checked="false">A選項</li> <li tabindex="0" role="radio" aria-checked="true">B選項</li> <li tabindex="0" role="radio" aria-checked="false">C選項</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表示元素不是展開的 |
<input 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> |
在手風琴交互效果中標示展開與否的狀態。該屬性對應HTML5的open屬性。 |
| aria-hidden |
字符串。可選值為true和false, true表示元素隱藏(不可見)，false表示元素可見 |
<ul role="menubar"> <li role="menuitem" tabindex="0" aria-haspopup="true">水果 <ul role="menu" aria-hidden="true"> <li role="menuitemradio" tabindex="-1" aria-checked="true">蘋果</li> |
該屬性使用非常普遍。幾乎所有涉及到顯示與隱藏這類交互或沒有交互的地方都可以應用該屬性。左邊的示例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表示未被選中。 |
<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> |
元素被選中表明其處於某種交互之中，因此選中元素很可能處於focus焦點獲取狀態。 |
資料可參考網頁；
(2)http://www.alloyteam.com/2012/10/how-to-develop-accessible-web-site-application/