ARIA是Accessible Rich Internet Application的簡稱，指無障礙富互聯網應用。可以使一些有功能障礙（如聽力，視力）的人群，使用你的網站。下面看一下做為開發人員的我們，如何讓他們使用起來更容易。
使用ARIA的一種方式，是添加ARIA到我們的html中。你可能對在HTML中使用語義化元素很熟悉了，如nav,button,header。使用它們，可以很容易表達塊的作用。這些元素可以更好地表達頁面中內容的意思，我們可以把這些元素和ARIA組合使用。不過，在一起使用它們時，有幾件需要記住的事情。
ARIA角色
ARIA role可以像屬性一樣添加到HTML標記上。聲明元素類型並建議其提供的信息作用。下面是一個識別元素為banner的例子：
<header role="banner">
下面這個例子，通常放到一個包含元素中，提示其內容提供了，有關包含的元素中的內容的一些信息：
<div role="contentinfo"> This website was built by Georgie. </div>
使用動態內容的alert，使用role="alert":
<div role="alert"> Please upgrade to the latest version of your browser for the best experience. </div>
這是一個用於表示元素只是簡單演示的角色，想象一下，一個人使用屏幕閱讀器，考慮到一些元素，他們並不想讀出來。這里有一個例子，一個元素包含一個虛擬的描述，或一個空元素只是簡單地提供了一張圖片和背景顏色。
<a href="aria.html" role="presentation"> <img src="aria-thumbnail.jpg" role="presentation" alt="Use ARIA effectively"> </a>
ARIA屬性
ARIA屬性和角色略有不同，添加到HTML標記的方法相同，但有一定范圍的ARIA屬性可供使用。所以ARIA屬性都帶aria-前綴。有兩種ARIA屬性類型，分別為狀態和屬性值。
- 狀態值，是在用戶交互時必然要修改的
- 屬性值，是不太可能修改的
這里有一個ARIA狀態屬性aria-checked的例子，這里去模擬交互元素的顯示元素的狀態，比如checkbox和radio按鈕，但它們本身並不是原生的元素（如：用div和span標簽來構建自定義UI元素）
<span role="checkbox"
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
</span>使用ARIA屬性，其中屬性名為aria-label的例子。這是一個在頁面中不顯示（如果設計要求顯示也可以顯示），但用來表示form元素的label標簽的。當label文字顯示，使用aria-labelledby屬性是比較合適的。
也可以像下面這樣，配合figure元素使用
<figure aria-labelledby="operahouse_1" role="group"> <img src="operahousesteps.jpg" alt="The Sydney Opera House"> <figcaption id="operahouse_1"> We saw the opera <cite>Barber of Seville</cite> here! </figcaption> </figure>
想了解更多的狀態和屬性的信息，可以參照W3C的相關內容。
ARIA的規則
當你特別想去用的時候，請記住，我們並不希望你在每個元素上都添加ARIA，有兩個原因。
盡可能地使用語義化的HTML元素
瀏覽器的語義化標簽已經默認隱含ARIA語義，像nav,article,button已經隱含ARIA的role="navigation",role="article",role="button"聲明。在語義化標簽出來之前，常見的元素如<div class="main-navigation" role="navigation">。現在可以使用nav來代替div，而且不再需要添加role="navigation"。可以到W3C的目錄上去查看，哪些元素已經隱含的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元素不能有兩個角色，所有角色都是以這樣或那樣的方式進行主義化的，就像定義上面說的，一個元素不可能是兩種類型的對象。你能想象一個元素既是按鈕又是標題嗎？不可能，兩者只能選其一。選擇一個可以最可以體現元素功能的角色。
不要修改原始的語義
不應該為一個語義化的標簽定義不同的角色，通過添加role去重定義語義化的標簽。
<footer role="button">
ARIA使用第二規則，但是，如果必須重定義，那就使用嵌套HTML元素來替代
<footer><button>Purchase this e-book</button></footer>
其他關於無障礙閱讀的標記
盡可能使用主義化元素
這是明顯的做法，如果你認為你正要構建的功能塊，可以給它比直接使用div ,span更好的元素來定義。在實踐中，你會不斷認識到，更好地使用哪些元素，並且很好地熟悉它們。
這里有個例子是對blockquote的使用（它經常被誤用）。還有其他類似的服務於特殊用途的元素。
- q --用於提供行內引用，比如在段落文本中直接引用某人
- cite --用於在文本中引用創作作品，如引用的一首詩
<p> In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness. </p>
有許多你可能沒有注意到的HTML元素，包括一些新引入的，保證盡可能多地了解HTML元素。
alt屬性
這是一個經常被遺忘的屬性，使用它可以大大增加標記的無障礙的閱讀性，尤其是對屏幕閱讀器。它實際上從HTML2就已經引入了，描述如下：
text to use in place of the referenced image resource, for example due to processing constraints or user preference.
文本用於替代引用的圖像資源，例如處理限制或用戶偏好。
由於處理限制或用戶偏好。不管是圖像沒有加載（處理限制），視力不好的用戶實際沒有偏好。l默認情況下，他們根本無法像正常人一樣，觀看圖像。
雖然規范上沒有提可訪問性的術語，它表明，是在圖像無法加載或用戶停止加載時，來替代使用的。雖然我們無法設身處地地為他們考慮，但我們也不能保證我們所有的用戶沒有這方面的需求，因此，我們應該給用戶一個替代選擇。
例如，人們經常給在公園玩的狗的照片的alt文本中寫上如“dog”。盡管寫了這個，但這無法給有障礙的人，提供足夠的信息，去了解這張圖片的內容。
下面是更好的方式：
<img src="bobby.jpg" alt="我的狗在公園里玩耍">
請注意，alt屬性和figcaption元素所起到的作用是不同的。alt的意圖是為圖像提供一種替代文本，而figcaption是為figure提供相關的標題。相同的例子中使用figcaption時，它應該提供的文本如下：
<figcaption>小狗可愛不?</figcaption>
使用語義化HTML和ARIA，使所有用戶都能使用
如果看一下文章前面包含的示例，你會看到里面包含了以下內容：
- 為圖像和它的標題，使用語義化HTML
- 在適當的地方使用cite元素
- 恰當地提供alt文本
- 使用一個上面提到過的ARIA屬性
<figure aria-labelledby="operahouse_1" role="group"> <img src="operahousesteps.jpg" alt="The Sydney Opera House"/> <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here! </figcaption> </figure>
總結
ARIA 角色和屬性可以改善頁面的可讀性，如在屏幕閱讀器或其他輔助性技術上。由於輔助技術變得越來越普遍，需要把在代碼中集成ARIA，作為一個常規項來完成。
原文：How to Use ARIA Effectively with HTML5
原文作者：Georgie Luhur
原文鏈接：https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/