ARIA：切換角色

ARIA switch 角色與 複選框 角色相同，只是它不是“選中”或“未選中”，而是“開啟”或“關閉”。與 複選框 角色一樣，aria-checked 屬性是必需的。兩個可能的值是 true 和 false。與 <input type="checkbox"> 或 role="checkbox" 不同，它沒有“未確定”或“混合”狀態。switch 角色不支援 aria-checked 屬性的 mixed 值；如果將 mixed 值分配給 switch，則會將其值設定為 false。

輔助技術可能會選擇使用專門的表示形式來表示 switch 小部件，以反映開/關開關的概念。

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

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

例如，考慮以下 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-checked 屬性

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

aria-readonly 屬性

aria-readonly 屬性受 switch 角色支援。它指示使用者是否可以編輯小部件的狀態。false 值表示使用者可以更改小部件的狀態；true 值表示使用者無法更改小部件的狀態。預設值為 false。

單擊事件處理程式

當用戶單擊開關小部件時，會觸發 單擊事件，必須處理該事件才能更改小部件的狀態。

更改aria-checked 屬性

當在開關小部件上觸發單擊事件時，處理程式必須將 aria-checked 屬性的值從 true 更改為 false，反之亦然。

當 switch 角色新增到元素中時，使用者代理 會以以下方式處理它

• 該元素在系統的無障礙基礎結構中公開，具有 switch 角色。
• 當 aria-checked 屬性的值發生變化時，如果可用，並且支援 switch 角色，系統會使用系統的無障礙 API 觸發一個可訪問的事件。
• 所有作為具有應用了 switch 角色的元素的後代的元素，都會自動分配 presentation 角色。這可以防止用於構建開關的元素被輔助技術單獨互動。這些元素中的文字對於使用者代理仍然可見，並且可能會被讀取或以其他方式傳遞給使用者，除非它使用 display: none 或 aria-hidden="true" 明確隱藏。

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

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

以下示例將幫助您瞭解如何應用和使用 switch 角色。

這個簡單的示例只是建立一個部件併為其分配 ARIA switch 角色。按鈕的樣式類似於開/關電源開關。

HTML

這裡的 HTML 非常簡單。開關實現為一個 <button> 元素，該元素最初被選中，因為其 aria-checked 屬性被設定為 "true"。開關有兩個子元素，包含“關閉”和“開啟”標籤，並且後面跟著一個 <label> 來標識開關。

<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 程式碼定義並應用一個函式來處理開關部件上的點選事件。該函式將 aria-checked 屬性從 true 更改為 false，反之亦然。

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

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 的目的是為開關建立一種外觀，讓人想起電源開關的正規化。

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  font:
    12px "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: #262;
  color: #eef;
}

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

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

最有趣的部分可能是屬性選擇器和 :first-child 和 :last-child 偽類的使用，它們負責根據開關是開啟還是關閉來更改開關的外觀。

結果

結果如下所示

• ARIA：複選框角色
• <input type="checkbox">
• aria-hidden