ARIA: checkbox 角色

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"

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

鍵盤互動

鍵	Function
`空格`	啟用複選框

必需的 JavaScript

所需的事件處理程式

onclick: 處理滑鼠單擊複選框和相關標籤，透過更改 aria-checked 屬性的值以及複選框的外觀來更改複選框的狀態，使其對可見使用者顯示為選中或未選中。
onKeyDown: 處理使用者按下 空格鍵 以透過更改 aria-checked 屬性的值以及複選框的外觀來更改複選框的狀態，使其對可見使用者顯示為選中或未選中。

示例

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

HTML

html

<span
  role="checkbox"
  id="chkPref"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label id="chk1-label">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

const item = document.getElementById("chkPref");
const label = document.getElementById("chk1-label");

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

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

item.addEventListener("keydown", (event) => {
  changeCheckbox(event.code);
});

label.addEventListener("keydown", (event) => {
  changeCheckbox(event.code);
});

item.addEventListener("click", changeCheckbox);
label.addEventListener("click", changeCheckbox);