可訪問的 Web 應用程式和元件概述

問題

對於因任何原因無法檢視螢幕的使用者來說，網頁上的動態內容可能會帶來特別大的問題。股票行情、即時 Twitter feed 更新、進度指示器以及類似內容會以輔助技術 (AT) 可能不知道的方式修改 DOM。這時就需要 ARIA 的介入。

示例 1：未使用 ARIA 標籤構建的選項卡元件的標記。標記中沒有資訊可以描述該元件的形式和功能。

<!-- This is a tabs widget. How would you know, looking only at the markup? -->
<ol>
  <li id="ch1Tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <div id="ch1Panel">Chapter 1 content goes here</div>
  <div id="ch2Panel">Chapter 2 content goes here</div>
  <div id="quizPanel">Quiz content goes here</div>
</div>

示例 2：選項卡元件在視覺上可能如何進行樣式設定。使用者可能在視覺上認出它，但對於輔助技術來說，不存在機器可讀的語義。

ARIA

ARIA 透過在標記中新增特殊屬性，使開發人員能夠更詳細地描述其元件。ARIA 旨在填補標準 HTML 標籤與動態 Web 應用程式中發現的桌面式控制元件之間的空白，它提供了描述大多數熟悉 UI 元件行為的角色和狀態。

ARIA 規範分為三種不同型別的屬性：角色、狀態和屬性。角色描述了 HTML 4 中尚不可用的元件，例如滑塊、選單欄、選項卡和對話方塊。屬性描述了這些元件的特徵，例如它們是否可拖動，是否包含必需的元素，或者是否關聯了彈出視窗。狀態描述了元素的當前互動狀態，告知輔助技術該元素是否忙碌、已停用、已選中或已隱藏。

ARIA 屬性會被瀏覽器自動解釋，並轉換為作業系統原生的可訪問性 API。因此，具有 role="slider" 的元素將以與作業系統上的原生滑塊相同的方式進行控制。

這提供了比上一代 Web 應用程式更一致的使用者體驗，因為輔助技術使用者在使用基於 Web 的應用程式時，可以將他們對桌面應用程式工作方式的所有知識應用進來。

示例 3：添加了 ARIA 屬性的選項卡元件的標記。

<!-- Now *these* are Tabs! -->
<!-- We've added role attributes to describe the tab list and each tab. -->
<ol role="tablist">
  <li id="ch1Tab" role="tab">
    <a href="#ch1Panel">Chapter 1</a>
  </li>
  <li id="ch2Tab" role="tab">
    <a href="#ch2Panel">Chapter 2</a>
  </li>
  <li id="quizTab" role="tab">
    <a href="#quizPanel">Quiz</a>
  </li>
</ol>

<div>
  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">
    Chapter 1 content goes here
  </div>
  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">
    Chapter 2 content goes here
  </div>
  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">
    Quiz content goes here
  </div>
</div>

所有主流瀏覽器和許多輔助技術都 很好地支援 ARIA。

演示更改

動態演示更改包括使用 CSS 更改內容的外觀（例如，無效資料周圍的紅色邊框，或選中複選框的背景顏色更改），以及顯示或隱藏內容。

狀態更改

ARIA 提供了用於宣告 UI 元件當前狀態的屬性。示例如下（但不限於此）：

aria-checked

指示覆選框或單選按鈕的狀態。

aria-disabled

指示元素可見但不可編輯或無法操作。

aria-grabbed

指示拖放操作中物件的“抓取”狀態。

(要獲取 ARIA 狀態的完整列表，請參閱 ARIA 狀態和屬性列表)。

開發人員應使用 ARIA 狀態來指示 UI 元件元素的狀態，並使用 CSS 屬性選擇器來根據狀態更改調整視覺外觀（而不是使用指令碼更改元素上的類名）。

可見性更改

當內容可見性發生變化時（即，元素被隱藏或顯示），開發人員應更改 aria-hidden 屬性值。應使用上述技術來宣告 CSS，以便使用 display:none 視覺化地隱藏元素。

以下是一個使用 aria-hidden 控制工具提示可見性的工具提示示例。該示例顯示了一個 Web 表單，其中包含與輸入欄位關聯的說明的工具提示。

<div class="text">
  <label id="tp1-label" for="first">First Name:</label>
  <input
    type="text"
    id="first"
    name="first"
    size="20"
    aria-labelledby="tp1-label"
    aria-describedby="tp1"
    aria-required="false" />
  <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
    Your first name is optional
  </div>
</div>

以下程式碼顯示了該標記的 CSS。請注意，此處沒有使用自定義類名，僅使用了 aria-hidden 屬性的狀態。

div.tooltip[aria-hidden="true"] {
  display: none;
}

更新 aria-hidden 屬性的 JavaScript 形式如下。請注意，指令碼僅更新 aria-hidden 屬性；它不需要同時新增或刪除自定義類名。

function showTip(el) {
  el.setAttribute("aria-hidden", "false");
}

角色更改

ARIA 允許開發人員為本身提供不正確或無語義的元素宣告語義角色。元素的 role 不應更改。相反，應刪除原始元素，並替換為具有新 role 的元素。

例如，考慮一個“內聯編輯”元件：一個允許使用者在原地編輯一段文字而無需切換上下文的元件。此元件具有“檢視”模式，在該模式下文字不可編輯但可啟用；以及“編輯”模式，在該模式下文字可編輯。開發人員可能會嘗試使用只讀文字 <input> 元素來實現“檢視”模式，並將其 ARIA role 設定為 button，然後在“編輯”模式下透過使元素可寫並刪除 role 屬性來切換到“編輯”模式（因為 <input> 元素本身具有角色語義）。

不要這樣做。相反，應使用完全不同的元素來實現“檢視”模式，例如具有 role 為 button 的 <div> 或 <span>，並使用文字 <input> 元素來實現“編輯”模式。

非同步內容更改

鍵盤導航

開發人員在建立自定義元件時，常常會忽略對鍵盤的支援。為了能夠被各種使用者訪問，Web 應用程式或元件的所有功能也應可透過鍵盤進行控制，而無需滑鼠。在實踐中，這通常涉及遵循桌面上類似元件所支援的約定，充分利用 Tab、Enter、空格鍵和方向鍵。

傳統上，Web 上的鍵盤導航僅限於 Tab 鍵。使用者按下 Tab 鍵以按線性順序聚焦頁面上的每個連結、按鈕或表單，使用 Shift-Tab 向後導航。這是一種一維導航方式——向前和向後，一次一個元素。在相當密集的頁面上，僅使用鍵盤的使用者通常需要按下 Tab 鍵幾十次才能訪問所需的部分。在 Web 上實現桌面式鍵盤約定有可能顯著加快許多使用者的導航速度。

以下是 ARIA 啟用的 Web 應用程式中鍵盤導航應如何工作的總結

• Tab 鍵應將焦點移到整個元件上。例如，製表符指向選單欄不應該將焦點放在選單的第一個元素上。
• 方向鍵應允許在元件內進行選擇或導航。例如，使用左右方向鍵應將焦點移到前一個和下一個選單項。
• 當元件不在表單內時，Enter 鍵和空格鍵都應選擇或啟用控制元件。
• 在表單內，空格鍵應選擇或啟用控制元件，而 Enter 鍵應提交表單的預設操作。
• 如有疑問，請模仿您正在建立的控制元件的標準桌面行為。

因此，對於上面示例中的選項卡元件，使用者應能夠使用 Tab 和 Shift-Tab 鍵在元件容器（我們標記中的 <ol>）內外進行導航。一旦鍵盤焦點進入容器內，方向鍵應允許使用者在每個選項卡（<li> 元素）之間導航。從這裡開始，約定因平臺而異。在 Windows 上，當用戶按下方向鍵時，下一個選項卡應自動啟用。在 macOS 上，使用者可以按 Enter 或空格鍵來啟用下一個選項卡。有關建立 可鍵盤導航的 JavaScript 元件 的深度教程描述瞭如何使用 JavaScript 實現此行為。

另見

• ARIA
• 編寫可鍵盤導航的 JavaScript 元件
• WAI-ARIA 規範
• WAI-ARIA 作者實踐