ARIA：複選框角色

checkbox 角色用於可檢查的互動式控制元件。包含 role="checkbox" 的元素還必須包含 aria-checked 屬性，以便向輔助技術公開復選框的狀態。

html
<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label id="chk1-label">Remember my preferences</label>

注意： ARIA 的第一條規則是，如果本機 HTML 元素或屬性具有您需要的語義和行為，請使用它，而不是重新利用元素並新增 ARIA。相反，請使用本機 HTML 複選框 <input type="checkbox">（以及關聯的 <label>），它本機提供所有必需的功能

html
<input type="checkbox" id="chk1-label" name="RememberPreferences" />
<label for="chk1-label">Remember my preferences</label>

描述

本機 HTML 複選框 (<input type="checkbox">) 表單控制元件具有兩種狀態（“選中”或“未選中”），可以透過 JavaScript 設定 indeterminate 狀態。類似地，具有 role="checkbox" 的元素可以透過 aria-checked 屬性公開三種狀態：true、false 或 mixed。

由於複選框是互動式控制元件，因此它必須可聚焦且鍵盤可訪問。如果將該角色應用於不可聚焦的元素，請使用 tabindex 屬性更改此行為。複選框的預期鍵盤快捷鍵是 空格鍵。

開發人員需要在啟用複選框時動態更改 aria-checked 屬性的值。

所有後代都是演示性的

某些型別的使用者介面元件在平臺無障礙 API 中表示時，只能包含文字。無障礙 API 沒有方法來表示 checkbox 中包含的語義元素。為了解決此限制，瀏覽器會自動將角色 presentation 應用於任何 checkbox 元素的所有後代元素，因為它是不支援語義子元素的角色。

例如，考慮以下 checkbox 元素，它包含一個標題。

html
<div role="checkbox"><h6>Name of my checkbox</h6></div>

由於 checkbox 的後代是演示性的，因此以下程式碼等效

html
<div role="checkbox"><h6 role="presentation">Name of my checkbox</h6></div>

從輔助技術使用者的角度來看，標題不存在，因為之前的程式碼片段在 無障礙樹 中等效於以下程式碼

html
<div role="checkbox">Name of my checkbox</div>

關聯的 WAI-ARIA 角色、狀態和屬性

aria-checked

aria-checked 的值定義複選框的狀態。此屬性具有以下三種可能的值之一

true

複選框已選中。

false

複選框未選中。

mixed

複選框部分選中或處於不確定狀態。

tabindex="0"

用於使其可聚焦，以便輔助技術使用者可以跳到它並立即開始讀取。

鍵盤互動

鍵 功能
空格 啟用複選框

所需的 JavaScript

所需的事件處理程式

onclick

處理複選框和關聯標籤上的滑鼠單擊，這將透過更改 aria-checked 屬性的值和複選框的外觀來更改複選框的狀態，使其在視覺上顯示為選中或未選中

onKeyDown

處理使用者按下 空格鍵 以更改複選框狀態的情況，方法是更改 aria-checked 屬性的值以及複選框的外觀，使其在視覺上顯示為選中或未選中

示例

以下示例使用 CSS 和 JavaScript 建立一個原本無語義的複選框元素，以處理元素的選中或未選中狀態。

HTML

html
<span
  role="checkbox"
  id="chkPref"
  aria-checked="false"
  onclick="changeCheckbox()"
  onKeyDown="changeCheckbox(event.code)"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label
  id="chk1-label"
  onclick="changeCheckbox()"
  onKeyDown="changeCheckbox(event.code)"
  >Remember my preferences</label
>

CSS

css
[role="checkbox"] {
  padding: 5px;
}

[role="checkbox"]:focus {
  border: 2px solid #0198e1;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}

JavaScript

js
function changeCheckbox(code) {
  const item = document.getElementById("chkPref");
  const checked = item.getAttribute("aria-checked");

  if (code && code !== "Space") {
    return;
  } else if (checked === "true") {
    item.setAttribute("aria-checked", "false");
  } else {
    item.setAttribute("aria-checked", "true");
  }
}

無障礙問題

當 checkbox 角色新增到元素時，使用者代理應執行以下操作

  • 在作業系統的無障礙 API 中公開元素具有 checkbox 角色。
  • 當 aria-checked 值更改時，傳送一個無障礙狀態更改事件。

輔助技術產品應執行以下操作

  • 螢幕閱讀器應將元素宣佈為複選框，並可選地提供有關如何啟用它的說明。

實施複選框的人員應執行以下操作

  • 確保複選框可以透過鍵盤控制元件和單擊來訪問和互動
  • 在使用者互動後保持 aria-checked 屬性的最新狀態
  • 提供指示覆選框獲得焦點時的樣式。

注意：關於輔助技術如何處理此技巧，觀點可能存在分歧。以上提供的資訊僅是其中一種觀點，可能會發生變化。

最佳實踐

ARIA 的第一條規則是：如果原生 HTML 元素或屬性具有您需要的語義和行為，請使用它，而不是重新利用元素並新增 ARIA 角色、狀態或屬性來使其可訪問。因此，建議使用原生 HTML 複選框 使用表單控制元件，而不是使用 JavaScript 和 ARIA 重新建立複選框的功能。

另請參閱