無障礙開發（六）之ARIA在HTML中的使用規則

ARIA使用規則一

若是你使用的元素( HTML5 )具備語義化，應該使用這些元素，而不該該從新定義一個添加ARIA的角色、狀態或屬性的元素。 

瀏覽器的語義化標籤已經默認隱含ARIA語義，像nav,article,button已經隱含ARIA的role="navigation",role="article",role="button"聲明。在語義化標籤出來以前，常見的元素如<div class="main-navigation" role="navigation">。如今可使用nav

來代替div，並且再也不須要添加role="navigation"。能夠到W3C的目錄上去查看，哪些元素已經隱含的ARIA屬性。

那麼何時可用和不可用ARIA呢？

• 在HTML(HTML5)元素特性無論支持或不支持，只要不具語義化，就可使用ARIA

• 排除視覺設計約束使用一個特定的元素，但不能是樣式上所需的元素

• 目前尚不支持的HTML特性

ARIA使用規則二

不改變原始的語義，不該該爲一個語義化的標籤訂義不一樣的角色，經過添加role去重定義語義化的標籤，可是，若是必須重定義，那就使用嵌套HTML元素來替代

例如，開發者想建立一個標題，並且它是一個按鈕。

不要這樣作：

<h1 role=button>標題按鈕</h1>

建議這樣作：

<h1><button>標題按鈕</button></h1>

或者說，你不使用正確的元素，但你能夠這樣作：

<h1><span role=button>標題按鈕</span></h1>

若是使用一個非交互的元素作爲一個交互的元素，那麼開發人員必須使用ARIA添加語義和使用適當的腳本增長交互行爲。

ARIA使用規則三

全部的ARIA製做控件都必須具備鍵盤(keyboard)事件。（能得到光標焦點）

若是建立一個組件(widget)，用戶能夠點擊、拖放、滑動或滾動，用戶使用鍵盤能定位到建立好的組件部件上，而且執行相應的操做動做。

例如，若是使用 role=button 必須可以接收到焦點和用戶可以使用鍵盤激活相應動做，好比Win操做系統上的 enter 和iOS系統上的 return 或者鍵盤的空格鍵( space )。

總結：屏幕閱讀器只能讀出能夠得到焦點的元素的內容，可是對於aria-live來講，設置了這個屬性的元素，哪怕不能得到焦點，屏幕閱讀器也會讀

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"就沒有必要了。

實例： 

經過一個示例來看看role="presentation"運用先後對HTML元素可訪問樹對比。

<table> <tr> <td> <table> <tr> <td> <abbr>API</abbr> </td> </tr> </table> </td> </tr> </table>

在上面的代碼上添加role="presentation"：

<table role="presentation"> <tr> <td> <table> <tr> <td> <abbr>API</abbr> </td> </tr> </table> </td> </tr> </table>

 table元素可訪問樹先後對比示意圖以下：

前面也說到過，並非在HTML中添加ARIA角色對屏幕閱讀器就是好的，特別是對於一些默認帶有交互功能的元素中，添加ARIA就是浪費時間，好比：

<button role="button">按我</button> <h1 role="heading" aria-level="1">標題一</h1>

固然在HTML5的一些特定元素上，ARIA的role和自帶的語義化元素是能夠重疊的，以下表所示:

假設有一個簡單的HTML5頁面:

<header role="banner"> <nav role="navigation"> </nav> </header> <main role="main"> </main> <aside class="complementary"> </aside> <footer role="contentinfo"> </footer>

 

若是你不想使用HTML5的元素，可使用div來替代：

<div role="banner"> <div role="navigation"> </div> </div> <div role="main"> </div> <div class="complementary"> </div> <div role="contentinfo"> </div>

 

如圖所示：

ARIA使用規則五

全部交互元素都必須有一個可訪問的名稱。

當可交互元素的可訪問性API的可訪問名屬性只有一個值時，那麼可交互元素就只有一個可訪問的名稱。

好比下面的示例，input type="text"有一個可見的<label>標籤,但它並無可訪問的名稱：

user name <input type="text">

或者:

<label>user name</label> <input type="text" />

此時MSAA(Microsoft Active Accessibility )控制器的accName屬性是空的：

相比之下，下面示例中input type="text"有一個可見的<label>標籤而且包含一個可訪問性名稱：

<label>user name <input type="text"></label>

或者：

<label for="uname">user name</label> <input type="text" id="uname">

此時MSAA(Microsoft Active Accessibility )控制器的accName屬性值是user name：

另外label標籤元素是不能被用來給自定義控件提供一個訪問性名稱，除非label引用了HTML的labelable元素。

<!-- HTML input element with combox role --> <label> user name <input type="text" role="combobox" > </label>

MSAA(Microsoft Active Accessibility )控制器的accName屬性值是user name：

除此以外，使用非HTML labelable元素來模擬控件，無論給其分配什麼角色(role)都不會是HTML的labelable元素，好比下面的div元著做權歸做者全部。

<!-- HTML div element with combox role --> <label> user name <div role="combobox"></div> </label>

 

MSAA(Microsoft Active Accessibility )控制器的accName屬性值是空的:

 

關於 Form

form 元素須要關聯一個 label 元素，全部的 button 都已經有了一個隱含的 label，因此再也不須要顯示關聯。對於 input，select， checkbox， radio, button 則都須要顯示一個 label 元素。這樣 JAWS 在面對這個表單元素的

時候才能告訴用戶這個表單的做用。例以下面的 input， JAWS 會告訴用戶這個是須要輸入名字的一個輸入框。當 label 屬性不方便使用的時候，還能夠經過 title 屬性達到相同的效果，也能夠知足 Webking 檢查的須要。下面的兩種

寫法均可以。但前提是 name 不須要被顯示出來。當 title 和 label 都設置的時候 title 會被 JAWS 忽略。

<label for="name1">Name:</label> <input name="name" id="name1" size="30" /> 或 <input name=」name」 id=」name1」 size=」30」 title=」name」>

當一個表單元素若是先後都須要描述的時候， label 就顯得力不從心了。ARIA 規範的出現解決了這一問題。aria-labelledby 屬性能夠設置多個值，說明這個表單元素是被那些值所描述的, aria-describedby屬性則更詳細的擴展

了這個描述。以下圖所示：

當 JAWS 把焦點放在 10 上的時候，會告訴用戶 10 表示的是 10 分鐘刷新一次。對應的 HTML 代碼以下所示。aria-required的屬性標識這個元素是必須的，JAWS 識別此元素並告知用戶必須輸入此元素。咱們能夠看到中間的 input 

元素被多個元素來描述（aria-labelledby 中的幾個 id 值），這樣 JAWS 就可以識別這個標籤，而且按照這個標籤的順序讀出先後的 label， 而且提示用戶若是還有更詳細的描述以及如何獲取這個更詳細的描述。當用戶須要

時，aria-describedby 所對應的元素信息就會被讀出來。加強了視力有障礙人士與普通人瞭解內容的一致性。

<div> <span id="labelRefresh"> <label for=「refreshTime">Refresh after</label> </span> <input id=「refreshTime" type="text" aria-describedby=「refreshDescriptor" aria-labelledby=" labelRefresh refreshTime refreshUnit" value="10"/> <span id=「refreshUnit"> minutes</span> </div> <div id=「refreshDescriptor">Allows you to specify the number of minutes of refresh time.</div>

ARIA使用規則六

元素只能有一個角色，一個元素不能有多個ARIA角色，role的定義以下：

Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

HTML元素不能有兩個角色，全部角色都是以這樣或那樣的方式進行主義化的，就像定義上面說的，一個元素不多是兩種類型的對象。你能想象一個元素既是按鈕又是標題嗎？不可能，二者只能選其一。選擇一個能夠最能夠體現元素功

能的角色。