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

大多數 JavaScript 庫提供了一組客戶端小部件庫，這些庫模擬熟悉桌面介面的行為。滑塊、選單欄、檔案列表檢視等等都可以透過 JavaScript、CSS 和 HTML 的組合來構建。由於 HTML4 規範沒有提供語義上描述這些型別小部件的內建標籤，因此開發人員通常採用通用元素，例如 <div> 和 <span>。雖然這會生成看起來像桌面對應物的元件，但標記中通常沒有足夠的語義資訊供輔助技術使用。

問題

網頁上的動態內容對於無法檢視螢幕的使用者來說可能尤其成問題。股票行情走勢圖、即時 Twitter 饋送更新、進度指示器以及類似內容以輔助技術 (AT) 可能意識不到的方式修改 DOM。這就是 ARIA 的用武之地。

示例 1：沒有 ARIA 標籤的選項卡小部件標記。標記中沒有資訊來描述小部件的形式和功能。

html
<!-- 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 小部件的行為。

警告： 其中許多是在瀏覽器沒有完全支援現代 HTML 功能時新增的。開發人員應該始終優先使用正確的語義 HTML 元素而不是使用 ARIA。

ARIA 規範分為三種類型的屬性：角色、狀態和屬性。角色描述了 HTML 4 中沒有的其他小部件，例如滑塊、選單欄、選項卡和對話方塊。屬性描述了這些小部件的特徵，例如它們是否可拖動、是否具有必需元素或是否與彈出視窗相關聯。狀態描述了元素的當前互動狀態，告知輔助技術它是否繁忙、停用、選中或隱藏。

ARIA 屬性由瀏覽器自動解釋並轉換為作業系統的本機無障礙 API。因此，具有 role="slider" 的元素將以與作業系統的本機滑塊相同的方式進行控制。

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

示例 3：新增 ARIA 屬性的選項卡小部件標記。

html
<!-- 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 表單，其中包含與條目欄位關聯的說明的工具提示。

html
<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**屬性的狀態。

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

更新**aria-hidden**屬性的 JavaScript 具有以下程式碼所示的形式。請注意，指令碼只更新**aria-hidden**屬性；它不需要新增或刪除自定義類名。

js
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、Spacebar 和箭頭鍵。

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

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

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

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

另請參閱