實作無障礙網頁功能：此 Switch 非彼 Switch，可訪問的雙狀態開關作法。

第 11 屆 iThome 鐵人賽

DAY 23

Modern Web

實踐無障礙網頁設計（Web Accessibility）系列第 23 篇

11th鐵人賽好想工作室無障礙 accessibility a11y

Askie Lin

團隊好想工作室 v3.0

2019-10-08 20:58:42

1809 瀏覽

這系列無障礙的鐵人賽文章，實踐的內容主要是根據 W3C：WAI-ARIA 的實踐，從設計模式及組件（Design Patterns and Widgets）裡面挑選最想嘗試的，如果有朋友想瞭解全部 Widget 該怎麼實作及其規範，歡迎自行爬規範內容，也許我們可以討論一下；若以下文章內容理解有任何錯誤，請多指教～

（圖片來源：Unsplash）

開關 Switch（打開文件）

本篇文章介紹的 switch 是 WAI-ARIA 的角色之一，不是前幾天的 WAI-ARIA Practice 1.1 中的設計模式。
A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related checkbox.

不是任天堂的 switch 啊...

（圖片來源：NINTENDO）

switch 這個角色是「開關」的意思。我還記得我對真正對 switch 有印象的是 iPhone 的介面中，有個開關，我還因此也跑去找像這樣的介面該怎麼刻？這是那時候的 Codepen：checkbox for the toggling bar，就...做了一個粉紅色的這樣。那時候完全沒有考慮到訪問性的問題，因為對網頁無障礙方面沒任何認知。所以今天想拿這個以前做過的東西，改成無障礙的版本！

鍵盤的可訪問性

要確保 switch 可以成為焦點（focusable）。

Roles、States、Properties

開關的容器要指定角色屬性 role 為 switch。
- swtich 這個角色繼承自 checkbox 角色（Superclass）。
設定 aria-checked 的值，為 true 或 false。
- 這代表了這個「開關」功能的開與關。針對 checkbox 可以提供的第三個值 mixed 在此無效。

重要註記：
switch 角色提供了與 checkbox 和 toggle button 幾乎相同的功能，但我們指定 switch 作為角色的值，而不是使用 checkbox ，是因為輔助科技能以與其螢幕外觀一致的方式顯示我們的 widget。

拿以前做過的開關組件來改善吧！請打開 Codepen 看看我以前亂寫的東西：checkbox for the toggling bar。

原本的原始碼

HTML

<div class="carousel_box">
  <input type="checkbox" class="carousel_online" id="toggle-1" name="online" checked>
  <label for="toggle-1">
    <span class="online"></span>
  </label>
</div>

沒有定義角色 switch，也沒有必要屬性 aria-checked設定開關值。
原本就想做粉紅色的開關...，不過沒意識到對比度非常低，且粉紅色對開與關的狀態沒什麼指示性，所以決定改個做法。
這個開關小組件沒有成為焦點時需要存在的 focus ring，但可以使用鍵盤操作。
標籤 <label> 沒有標示這個元件的名稱，反而把名稱放到偽元素。
以前的 CSS class 命名看不懂啦？！而且以前不知道 SCSS （>＿＿<）

更改後的原始碼，快來 Codepen 操作看看

HTML

<div class="switch" role="switch" aria-checked="false">
  <input type="checkbox" class="switch__checkbox" id="toggle-1" name="online">
  <label for="toggle-1" class="switch__label">
    <span class="switch__status-message">Online</span>
  </label>
</div>