aria初探（一）

本文轉載自查看原文 2014-10-26 18:37 15849 1html+css

之前在學習和工作當中碰到的一些有關無障礙的學習心得，比較雜，做一下小結。

（1）tabIndex:

　　當使用鍵盤時，tabindex是個關鍵因素，它用來定位html元素。

tabindex有三個值：0 ，-1，以及X（X里32767是界點，稍后說明）

原本在Html中，只有鏈接a和表單元素可以被鍵盤訪問（即使是a也必須加上href屬性才可以)，但是aria允許tabindex指定給任何html元素。

當tabindex=0時，該元素可以用tab鍵獲取焦點，且訪問的順序是按照元素在文檔中的順序來focus，即使采用了浮動改變了頁面中顯示的順序，依然是按照html文檔中的順序來定位。

當tabindex=-1時，該元素用tab鍵獲取不到焦點，但是可以通過js獲取，這樣就便於我們通過js設置上下左右鍵的響應事件來focus，在widget內部可以用到。

當tabindex>=1時，該元素可以用tab鍵獲取焦點，而且優先級大於tabindex=0；不過在tabindex>=1時，數字越小，越先定位到。

在IE中，tabindex范圍在1到32767之間（包括32767）

在FF， Chrome無限制，不過一旦超出32768，順序跟tabindex=0時一樣。

這個估計跟各個瀏覽器對int型的解析有關。

（2）Aria

WAI網站對它的描述是“WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.”

可以看出，它用來標識頁面中涉及到動態交互的地方，這些交互通常是由js和相關技術來實現的，例如浮出層，對話框彈出，下拉列表以及偽元素等。

aria由一套屬性組成，屬性分為role以及對應的states和properties，aria將html元素分為六種role，每種有對應的states和properties，但有一些是共用的，比如

舉個偽元素例子，

<div role="radio" aria-checked="true" aria-label="單選2" tabindex="0">單選tabindex="0"</div>

這個div模擬了radio的功能，在平時讀屏軟件是分辨不出來的，但是加上role及aria-checked狀態，在讀屏軟件（NVDA）中讀出來就是：

再舉個動態交互的例子，這是etao（一淘）主頁的菜單代碼

NVDA讀出來就是：

這里用到了menubar和menuitem角色，用來標識這是個菜單，同時使用了aria-haspopup屬性，表示這個菜單有子菜單。

wai-aria文檔對Haspopup的解釋是“Indicates that the element has a popup context menu or sub-level menu.”值為trun/false，我將其改為1或0，也沒有發現有影響，應該是可以的，不過還是遵從標准比較好。

******************************嘩啦啦的分界線*****************************************

目前我們用到比較多的aria是aria-label和aria-labeledby，（可見etao），這兩個元素用來對元素進行注釋，aria-labelledby的值是id值，用來設定多個注釋，aria-label的值是字符串。

從第一個圖中可以看出，aria-label是通用的屬性，但是實際上目前讀屏軟件都不支持在span上使用aria-label

這一點比較郁悶，因為淘寶上很多列表內的金額，數目等信息是用span實現的，不能給span添加注釋，但是div可以。

使用aria-label時需注意，

(1) 同時使用aria-label和label for時，忽略后者。

(2) 同時使用aria-label和aria-labelledy時，忽略前者

(3) IE不支持對input使用aria-label，但是支持aria-labelledby。

(4) 使用aria-labelledby時，即使對應的注釋文本被隱藏，依然能讀出來。

例如：

<label id="labeltext" for="Text1" style="display:none">隱藏的姓名:</label>

<span id="specialtext" style="display: none">隱藏的解釋</span>

<input type="text" id="Text1" aria-labelledby="labeltext specialtext" aria-label="專門解釋" title="XYZ" />

NVDA讀出來就是