大多數開發人員都熟悉現代網路的標準標記語言，也就是超文本標記語言 (HTML)。不過，您可能對無障礙網頁應用程式 (ARIA) (正式名稱為 WAI-ARIA) 較不熟悉，不知道這是什麼、如何使用，以及何時 (和何時不) 該使用。
HTML 和 ARIA 在打造無障礙數位產品方面扮演重要角色， 特別是螢幕閱讀器等輔助技術 (AT)。 兩者都可用於將內容轉換為替代格式，例如點字或文字轉語音 (TTS)。
簡要瞭解 ARIA 的發展歷程、重要性，以及最佳使用時機和方式。
ARIA 簡介
ARIA 最早是由 Web 無障礙計畫 (WAI) 團隊於 2008 年開發，該團隊隸屬於全球資訊網協會 (W3C)，負責管理及規範網際網路。
ARIA 並非真正的程式設計語言，而是一組可新增至 HTML 元素的屬性，用來提升無障礙程度。這些屬性會使用現代瀏覽器中的無障礙 API，將角色、狀態和屬性傳達給輔助技術。這類通訊會出現在無障礙樹狀結構中。
「WAI-ARIA (無障礙網頁應用程式套件) 定義了一種方式，可讓身心障礙者更輕鬆地存取網頁內容和網頁應用程式。尤其有助於處理以 HTML、JavaScript 和相關技術開發的動態內容和進階使用者介面控制項。"
WAI 群組
無障礙功能樹狀結構
ARIA 會修改不正確或不完整的程式碼，藉由變更、公開及擴增無障礙樹狀結構的部分內容，為使用 AT 的使用者提供更優質的體驗。
無障礙樹狀結構是由瀏覽器建立，並以標準文件物件模型 (DOM) 樹狀結構為基礎。與 DOM 樹狀結構類似，無障礙樹狀結構包含代表所有標記元素、屬性和文字節點的物件。平台專屬的無障礙 API 也會使用無障礙樹狀結構，提供輔助技術可解讀的表示法。
ARIA 本身不會變更元素的函式或視覺外觀。 也就是說，只有 AT 使用者會注意到有 ARIA 的數位產品與沒有 ARIA 的數位產品之間的差異。這也表示開發人員必須自行負責進行適當的程式碼和樣式變更，盡可能提升元素的無障礙程度。
ARIA 的三項主要功能是角色、屬性和狀態/值。
角色會定義網頁或應用程式中元素的用途或功能。
<div role="button">Self-destruct</div>
屬性會表示物件的特徵或關係。
<div role="button" aria-describedby="more-info">Self-destruct</div>
<div id="more-info">This page will self-destruct in 10 seconds.</div>
「狀態」和「值」會定義與元素相關聯的目前條件或資料值。
<div role="button" aria-describedby="more-info" aria-pressed="false">
Self-destruct
</div>
<div id="more-info">
This page will self-destruct in 10 seconds.
</div>
雖然可以在一行程式碼中使用 ARIA 的所有三個元素，但並非必要。請改為分層設定 ARIA 角色、屬性和狀態/值，直到達成最終無障礙目標為止。在程式碼中正確納入 ARIA，可確保輔助技術使用者能取得所需的所有資訊，順利且公平地使用網站、應用程式或其他數位產品。
最近，Chrome 開發人員工具建立了一種查看完整無障礙樹狀結構的方式，方便開發人員瞭解程式碼對無障礙功能的影響。
使用 ARIA 的時機
2014 年，W3C 正式發布 HTML5 建議。並帶來一些重大變更，包括新增位置標記元素 (例如 <main>、<header>、<footer>、<aside>、<nav>) 和屬性 (例如 hidden 和 required)。有了這些新的 HTML5 元素和屬性，加上瀏覽器支援度提升，ARIA 的某些部分現在就沒那麼重要了。
如果瀏覽器支援具有隱含角色且等同於 ARIA 的 HTML 標記，通常不需要為元素新增 ARIA。不過，ARIA 仍包含許多 HTML 任何版本都沒有的角色、狀態和屬性。這些屬性目前仍可使用。
這引導我們提出最終問題：何時應使用 ARIA？幸好 WAI 團隊已制定 ARIA 五大規則，協助您決定如何讓元素無障礙。
規則 1：不要使用 ARIA
沒錯，你沒看錯。為元素新增 ARIA 本身並不會讓元素更易於存取。根據 WebAIM Million 年度無障礙報告，含有 ARIA 的首頁平均偵測到的錯誤比沒有 ARIA 的首頁多出 70%，主要是因為 ARIA 屬性實作不當。
這項規則有例外情形。如果 HTML 元素不支援無障礙功能，就必須使用 ARIA。原因可能是設計不允許使用特定 HTML 元素，或 HTML 中沒有所需的功能或行為。不過，這種情況應該很少發生。
請勿：指派角色。
<a role="button">Submit</a>
做法：使用語意元素。
<button>Submit</button>
如有疑問，請使用語意式 HTML 元素。
規則 2：請勿在 HTML 中加入 (不必要的) ARIA
在大多數情況下，HTML 元素本身就能正常運作，不需要額外新增 ARIA。事實上，使用 ARIA 的開發人員通常必須新增額外程式碼，才能讓互動式元素正常運作。
請勿：指派誤導性角色。
<h2 role="tab">Heading tab</h2>
做法：正確指派角色。
<div role="tab"><h2>Heading tab</h2></div>
使用 HTML 元素時，只要按照預期方式操作，就能減少工作量，並獲得效能更佳的程式碼。
規則 3：一律支援鍵盤瀏覽功能
所有互動式 (未停用) ARIA 控制項都必須可透過鍵盤存取。您可以將 tabindex= "0" 新增至任何需要焦點的元素，這些元素通常不會接收鍵盤焦點。請盡可能避免使用正整數的索引標籤，以免發生鍵盤焦點順序問題。
錯誤做法：新增 tabindex。
<span role="button" tabindex="1">Submit</span>
做法：將 tabindex 設為 `0`。
<span role="button" tabindex="0">Submit</span>
當然，如果可以，請使用真正的 <button> 元素。
規則 4：請勿隱藏可聚焦的元素
請勿將 role= "presentation" 或 aria-hidden= "true" 新增至需要有焦點的元素，包括含有 tabindex= "0" 的元素。將這些角色和狀態新增至元素時，系統會向 AT 傳送訊息，指出這些元素並不重要，因此應略過。這可能會造成混淆，或干擾使用者嘗試與元素互動。
不要：隱藏可聚焦元素
<div aria-hidden="true"> <button>Submit</button> </div>
做法：公開可聚焦元素
<div> <button>Submit</button> </div>
規則 5：為互動元素使用可存取的名稱
互動式元素的用途必須先傳達給使用者，他們才能瞭解如何與該元素互動。請確保所有元素都有無障礙元素名稱，方便使用 AT 裝置的人員操作。
無障礙元素名稱可以是元素所圍繞的內容 (以 <a> 為例)、替代文字或標籤。
在下列每個程式碼範例中，無障礙元素名稱都是「Red leather boots」。
<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>
<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>
<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>
檢查元素無障礙元素名稱的方法有很多，包括使用 Chrome 開發人員工具檢查無障礙樹狀結構，或是使用螢幕閱讀器測試。
HTML 中的 ARIA
雖然單獨使用 HTML 元素是最佳做法，但在特定情況下，可以新增 ARIA 元素。舉例來說，您可能會在需要更高層級 AT 支援的模式中，將 ARIA 與 HTML 配對，因為環境限制或做為並非所有瀏覽器都完全支援的 HTML 元素的備用方法。
當然，我們也提供在 HTML 中實作 ARIA 的建議。最重要的是：請勿覆寫預設的 HTML 角色、減少多餘的項目，並留意非預期的副作用。
請參閱以下範例。
請勿：指派錯誤的角色。
<a role="heading">Read more</a>
請使用正確的角色和額外的連結說明。
<a aria-label="Read more about some awesome article title">Read More</a>
不要：新增多餘的角色。
<ul role="list">...</ul>
做法：減少重複內容。
<ul>...</ul>
請勿：忽略潛在副作用。
<details> <summary role="button">more information</summary> ... </details>
做法：處理副作用。
<details> <summary>more information</summary> ... </details>
ARIA 的複雜性
ARIA 很複雜，使用時請務必謹慎。雖然本課程中的程式碼範例相當簡單，但建立無障礙自訂模式很快就會變得複雜。
需要注意的事項很多，包括但不限於：鍵盤互動、觸控介面、AT/瀏覽器支援、翻譯需求、環境限制、舊版程式碼和使用者偏好設定。如果使用不當，即使只有一點點程式碼知識，也可能造成損害或令人困擾。
除了上述警告外，數位無障礙並非全有或全無的情況，而是一個光譜，允許出現這類灰色地帶。視情況而定，多種編碼解決方案都可視為「正確」。重要的是，請持續學習、測試，並努力讓我們的數位世界對所有人更加開放。