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

（圖片來源：Checkbox from Mitchell Geere at dribbble）

Checkbox（打開文件）

A checkable input that has three possible values: true, false, or mixed.

你知道 checkbox 是什麼嗎？

checkbox 是網頁表單元素中，input 的其中一種類型，允許使用者可以在一系列選項中，「複選」他要的選項。

複習原生的 checkbox 該怎麼寫

我們來看一下原生的表單元素 checkbox 的寫法：

<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">

• 這個元素是 <input> 標籤，類型是 checkbox 。
• 它有一個獨特的識別 id ，值是 subscribeNews。
• 勾選 checkbox 所傳送給後端的會是 name （subscribe）及 value（newsletter）。

透過 <label> 來加上標籤，必須（握拳！）

原生寫法會透過 <label> 來為每個表單元素加上標註，螢幕閱讀器也能念出到每個 input 的「標題」，加上標題後，當我們在表單中點擊了「那個標題」，就等於在點擊以建立關聯性的 input。如果你已經知道的話，那麼你知道建立關聯性有兩種做法嗎？

1. <label> 和 <input> 拆開來寫，用 for 屬性指向 input 的 id。
2. <label> 當作容器把 <input> 包起來，不用使用 for 與 id 囉！因為連結性已隱含在其中。

如果想瞭解更多 label 的無障礙做法，可以來看 WAI 的教學，這裡不再贅述。

設計模式

checkbox 作為 WAI-ARIA Practices 1.1 的設計模式之一，它分為兩種類型：「雙重狀態」與「三狀態」。

1. 雙重狀態：最常見的複選框類型，它允許用戶在兩個選項之間進行切換，「已選中（checked）」和「未選中」。
2. 三狀態：新增部分檢查的第三狀態，來看以下說明。

三狀態 checkbox 最常在軟體安裝流程中看到，用於「顯示」與「控制」整個選項群組的狀態，並且可以使用雙狀態 checkbox 分別打開或關閉選項組中的每個選項。

• 三狀態的顯示：
  • 如果選中了選項群組中的所有選項，則三狀態 checkbox 顯示整體狀態為「已全部選取」。
  • 如果選中了選項群組中的某些選項，則三狀態 checkbox 顯示整體狀態為「部分選中」。
  • 如果未選中選項群組中的所有選項，則三狀態 checkbox 顯示整體狀態為「未選取」。
• 三狀態的操作：
  • 使用者可以操作三狀態 checkbox 來一次更改選項群組中的所有選項。

鍵盤的可訪問性

• Space
  • checkbox 可以成為焦點（focusable），當它成為焦點時，可以切換選取狀態。

Roles、States、Properties

• checkbox 元件的容器，要設定角色 role，值為 checkbox。
• checkbox 需要一個可被 Accessibility Tree 標示的名稱，可以透過元件自己的「文字內容」，或是使用 aria-label 補充名稱，再不然就使用 aria-labelledby="某元素id" 指定內容。
• checkbox 元件的狀態：
  • 選中時， aria-checked 值設為 true。
  • 相反地，在未選中時，aria-checked 值設為 false。
  • 如果是三狀態複選框的話，當只有部分選中時，該三狀態的 aria-checked 值設為 mixed。
• 當 checkbox 元件是一整組的選項時：
  • 那麼它們的容器要設定角色 role，值為 group。
  • 使用 aria-labelledby="某元素id"，去標示整個選項群組的名稱，比如說：「<h3>要加在三明治的配菜？</h3> 」。
  • 如果 DOM 中有與 checkbox 選項群組相關的描述，使用 aria-describedby="某元素id" 為它們建立關聯。

實踐開始囉！

今天想引用 WAI-ARIA Practice 1.1 的範例，真的對於理解上有很大的幫助！

<!-- checkbox 群組選項的標題 -->
<h3 id="id-group-label">
  Sandwich Condiments
</h3>

<!-- checkbox 群組 -->
<div role="group" aria-labelledby="id-group-label">
  <ul class="checkboxes">
    <li>
			<!-- checkbox -->
      <div role="checkbox"
           aria-checked="false"
           tabindex="0">
        Lettuce
      </div>
    </li>
    <li>
      <div role="checkbox"
           aria-checked="true"
           tabindex="0">
        Tomato
      </div>
    </li>
    <li>
      <div role="checkbox"
           aria-checked="false"
           tabindex="0">
        Mustard
      </div>
    </li>
    <li>
      <div role="checkbox"
           aria-checked="false"
           tabindex="0">
        Sprouts
      </div>
    </li>
  </ul>
</div>

• checkbox 群組容器
  • 定義角色 role="group"，
  • 透過 aria-labelledby 關聯 h3 標題。
• checkbox 元件本身
  • 定義角色為 role="checkbox"。
  • 設定 aria-checked 表示是否選取。
  • 加上 tabindex="0" 讓鍵盤可以獲取焦點。
  • 每個復選框元件本身都有文字，以作為 checkbox 本身的名稱。

Reference

• checkbox - MDN
• checkbox - WAI-ARIA 1.1
• checkbox - WAI-ARIA Practices 1.1