大多數的開發人員都熟悉我們新式網頁 HyperText 標記語言 (HTML) 的標準標記語言。不過，您可能不太熟悉存取性豐富的網際網路應用程式 (ARIA) (舊稱「WAI-ARIA)：它的用途、使用方式與時機，以及使用時機。
HTML 和 ARIA 在設計數位產品方面扮演著重要的角色，特別是在螢幕閱讀器等輔助技術 (AT) 方面。兩者都會將內容轉換為替代格式，例如點字或文字轉語音 (TTS)。
一起來看看 ARIA 的簡短記錄、重要性，以及使用時機和最佳使用方式。
ARIA 簡介
ARIA 是由網路無障礙計畫 (WAI) 集團於 2008 年首次開發，是全球資訊網協會 (World Wide Web Consortium，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 正確整合到程式碼集，可確保 AT 使用者能夠順利且順利使用網站、應用程式或其他數位產品所需的一切資訊。
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」。請盡可能避免使用正整數的分頁索引，以免發生潛在的鍵盤焦點順序問題。
<span role="button" tabindex="1">Submit</span>
<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>)、替代文字或標籤。
下列每個程式碼範例的存取名稱為「紅色皮革靴」。
<!-- 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 元素。舉例來說，您可以將 ARIA 與 HTML 配對，而這些模式因環境限製而需要更高層級的 AT 支援，或是可做為部分瀏覽器完全支援的 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/瀏覽器支援、翻譯需求、環境限制、舊版程式碼，以及使用者偏好設定。使用不當的話，對程式設計的知識可能會造成負面影響，或令人不悅，也會造成困擾。請記得簡化程式碼，
而且有些警告，數位無障礙並非一體適用，正如這個光譜，像這樣的灰色區域一定可以長久。視情況而定，有多種程式設計解決方案可視為「正確」。重要的是持續學習、測試，以及嘗試讓數位世界變得更開放。
隨堂測驗
測驗您對 ARIA 和 HTML 的相關知識
下列何者是建立無障礙按鈕的最佳做法？
<div id="saveChanges" aria-role="button" aria-pressed="false" tabindex="0">Go to shop</div><a id="saveChanges" aria-label="Some awesome article title">Go to shop</a><button id="saveChanges" type="button">Go to shop</button>