ARIA：switch 角色

描述

ARIA 的 switch 角色與 checkbox 角色相同，不同之處在於，它不是“已選中”或“未選中”，而是“開啟”或“關閉”。與 checkbox 角色一樣，aria-checked 屬性是必需的。兩個可能的值是 true 和 false。與 <input type="checkbox"> 或 role="checkbox" 不同，它沒有 indeterminate 或 mixed 狀態。switch 角色不支援 aria-checked 屬性的 mixed 值；將 mixed 值賦給 switch 會將其值設定為 false。

輔助技術可能會選擇使用專門的呈現方式來顯示 switch 控制元件，以反映其開關的開啟/關閉概念。

由於開關是一種互動式控制元件，因此它必須是可聚焦的並且可以透過鍵盤進行訪問。如果將該角色應用於不可聚焦的元素，請使用 tabindex 屬性進行更改。用於切換開關值的預期鍵盤快捷鍵是 空格鍵。開發者需要動態更改 aria-checked 屬性的值，當開關被切換時。

所有後代都是展示性的

有些使用者介面元件，當在平臺輔助功能 API 中表示時，只能包含文字。輔助功能 API 無法表示 switch 中包含的語義元素。為了處理這種限制，瀏覽器會自動為任何 switch 元素的所有後代元素應用 presentation 角色，因為該角色不支援語義子元素。

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

<div role="switch"><h3>Title of my switch</h3></div>

由於 switch 的後代元素是呈現性的，因此以下程式碼等效

<div role="switch"><h3 role="presentation">Title of my switch</h3></div>

從輔助技術使用者的角度來看，標題不存在，因為前面的程式碼片段在輔助功能樹中等同於以下內容：

<div role="switch">Title of my switch</div>

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

aria-checked 屬性

使用 switch 角色時，aria-checked 屬性是必需的，因為它表示應用於 switch 角色的控制元件的當前狀態。true 值表示“開啟”狀態；false 值表示“關閉”狀態；switch 角色不支援 mixed 值，並將其視為 false。

aria-readonly 屬性

switch 角色支援 aria-readonly 屬性。它指示控制元件的狀態是否可由使用者編輯。false 值意味著使用者可以更改控制元件的狀態；true 值意味著使用者不能更改控制元件的狀態。預設值為 false。

所需的 JavaScript 功能

點選事件的處理器

當用戶點選 switch 控制元件時，會觸發一個 click 事件，必須處理該事件以更改控制元件的狀態。

更改 aria-checked 屬性

當在 switch 控制元件上觸發 click 事件時，處理器必須將 aria-checked 屬性的值從 true 更改為 false，或反之亦然。

對使用者代理和輔助技術的可能影響

當 switch 角色被新增到元素時，使用者代理會這樣處理它

• 該元素以 switch 角色形式暴露給系統的輔助功能基礎設施。
• 當 aria-checked 屬性的值發生更改時，如果系統輔助功能 API 可用且支援 switch 角色，則會使用該 API 觸發可訪問事件。
• 應用於 switch 元素的所有後代元素都會自動被分配 presentation 角色。這可以防止用於構建 switch 的元素被輔助技術單獨互動。這些元素中的文字對使用者代理仍然可見，並且可以被讀取或以其他方式傳遞給使用者，除非它們被明確隱藏（使用 display: none 或 aria-hidden="true"）。

如果輔助技術支援 switch 角色，它會透過執行以下操作來響應：

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

示例

以下示例應有助於您理解如何應用和使用 switch 角色。

在 ARIA 中新增 switch 角色

此示例建立了一個控制元件，併為其分配了 ARIA switch 角色。該按鈕透過其 aria-checked 屬性設定為 "true" 來實現最初的選中狀態，並具有類似於開啟/關閉電源開關的外觀。

HTML

switch 被實現為一個 <button> 元素，該元素因其 aria-checked 屬性設定為 "true" 而最初被選中。switch 包含兩個子元素，用於顯示“關閉”和“開啟”標籤，後面跟著一個 <label> 來標識該 switch。

<button role="switch" aria-checked="true" id="speakerPower" class="switch">
  <span>off</span>
  <span>on</span>
</button>
<label for="speakerPower" class="switch">Speaker power</label>

JavaScript

此 JavaScript 程式碼定義並應用了一個函式來處理 switch 控制元件的點選事件。該函式將 aria-checked 屬性從 true 更改為 false，或反之亦然。

document.querySelectorAll(".switch").forEach((theSwitch) => {
  theSwitch.addEventListener("click", handleClickEvent);
});

function handleClickEvent(evt) {
  const el = evt.target;

  if (el.getAttribute("aria-checked") === "true") {
    el.setAttribute("aria-checked", "false");
  } else {
    el.setAttribute("aria-checked", "true");
  }
}

CSS

CSS 的目的是為 switch 建立一個類似於電源開關範例的外觀和感覺。

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  vertical-align: middle;
  text-align: center;
  font:
    12px / 20px "Open Sans",
    "Arial",
    serif;
}

button.switch span {
  padding: 0 4px;
  pointer-events: none;
}

[role="switch"][aria-checked="false"] :first-child,
[role="switch"][aria-checked="true"] :last-child {
  background: #226622;
  color: #eeeeff;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
  color: #bbbbdd;
}

label.switch {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
  line-height: 20px;
  vertical-align: middle;
  user-select: none;
}

最有趣的部分可能是使用屬性選擇器以及 :first-child 和 :last-child 偽類來完成根據其開啟或關閉狀態改變 switch 外觀的所有繁重工作。

結果

結果如下所示

規範

另見

• ARIA: checkbox 角色
• <input type="checkbox">
• aria-hidden