ARIA

在使用 ARIA 之前

ARIA 使用的第一條規則是“如果你可以使用一個具有所需語義和行為的原生 HTML 元素或屬性，而不是重新利用一個元素並新增 ARIA 角色、狀態或屬性來使其可訪問，那麼就這樣做。”

這是一個進度條控制元件的標記

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

這個進度條是使用一個沒有意義的 <div> 構建的。我們包含 ARIA 角色和屬性來新增意義。在此示例中，role="progressbar" 屬性告知瀏覽器該元素實際上是一個由 JavaScript 驅動的進度條控制元件。 aria-valuemin 和 aria-valuemax 屬性指定進度條的最小值和最大值，而 aria-valuenow 描述了其當前狀態，因此必須透過 JavaScript 保持更新。

除了直接放在標記中之外，還可以使用如下 JavaScript 程式碼將 ARIA 屬性新增到元素並動態更新它們

// Find the progress bar <div> in the DOM.
const progressBar = document.getElementById("percent-loaded");

// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

所有對非輔助技術使用者可用的內容都必須對輔助技術可用。同樣，不應包含任何僅針對輔助技術使用者而對非輔助技術使用者不可用的功能。上述進度條需要進行樣式設定，使其看起來像一個進度條。

使用原生的 <progress> 元素會簡單得多

<progress id="percent-loaded" value="75" max="100">75 %</progress>

支援

與任何其他 Web 技術一樣，ARIA 的支援程度也各不相同。支援取決於所使用的作業系統和瀏覽器，以及與之互動的輔助技術的型別。此外，作業系統、瀏覽器和輔助技術的版本也是影響因素。舊版本的軟體可能不支援某些 ARIA 角色，只有部分支援，或者報告其功能不正確。

同樣重要的是要認識到，一些依賴輔助技術的使用者不願升級他們的軟體，因為擔心失去與計算機和瀏覽器互動的能力。因此，儘可能 使用語義 HTML 元素非常重要，因為語義 HTML 對輔助技術的支援要好得多。

同樣重要的是要用實際的輔助技術測試您編寫的 ARIA。這是因為瀏覽器模擬器和模擬器對於測試完整支援並不真正有效。同樣，代理輔助技術解決方案不足以完全保證功能。

參考

ARIA 參考是 MDN 上記錄的 ARIA 屬性和角色的全面列表。

ARIA 角色

ARIA 角色可用於描述 HTML 中不存在的原生元素，或那些已存在但尚未獲得廣泛瀏覽器支援的元素。

ARIA 狀態和屬性（attributes）

ARIA 屬效能夠修改元素在可訪問性樹中定義的使其狀態和屬性。

指南

ARIA 指南是幫助您提高網頁功能（如表格、表單和鍵盤導航）可訪問性的資源。

標準化工作

WAI-ARIA 規範

W3C 規範本身。

WAI-ARIA 編寫實踐

官方最佳實踐文件介紹瞭如何最好地 ARIA-化常用控制元件和互動。一個極好的資源。

用於指令碼控制元件的 ARIA

編寫鍵盤可導航的 JavaScript 控制元件

內建元素，如 <input>、<button> 等，具有內建的鍵盤可訪問性。如果您使用 <div> 和 ARIA 來“模擬”這些，您必須確保您的控制元件具有鍵盤可訪問性。

即時區域

即時區域為螢幕閱讀器提供有關如何處理頁面內容更改的建議。

影片

以下演講是理解 ARIA 的好方法

ARIA、可訪問性 API 和編碼，就像你很在乎一樣！—— Léonie Watson