iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 19
0

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 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 所傳送給後端的會是 namesubscribe)及 valuenewsletter)。

透過 <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


上一篇
實作無障礙網頁功能:輪播圖 Carousel
下一篇
實作無障礙網頁功能:今天沒有拖棚之表單 radio,要選就只選我吧!
系列文
實踐無障礙網頁設計(Web Accessibility)30

尚未有邦友留言

立即登入留言