網頁無障礙：單選按鈕與核取方塊群組該如何正確設定 label？

製作表單時，你是否曾對單選按鈕與核取方塊群組的 label 處理感到猶豫？尤其是該如何為整個群組加上標籤，以及該如何處理 for 屬性，常讓人傷腦筋。

本文將整理這類群組的標籤設定方式，並具體介紹做法。

常見做法與問題點

將 for 指向第一個項目

這是針對單選按鈕或核取方塊群組，<label>將 for 屬性指向第一個項目的做法。

例如像以下這樣的程式碼。

<div class="form-group">
  <label for="fruit-apple">好きな果物</label>
  <div>
    <label><input type="radio" id="fruit-apple" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

外觀上看起來沒有問題，但螢幕閱讀器只會將「喜歡的水果」這個標籤關聯到第一個單選按鈕，因此無法正確辨識整個群組。

未指定 for

<div class="form-group">
  <label>好きな果物</label>
  <div>
    <label><input type="radio" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

這種做法並不清楚標籤與哪個元素相關聯。尤其對使用螢幕閱讀器的使用者而言，無法清楚得知哪個選項與標籤相對應，容易造成困擾。

有什麼可以改善的建議方案？

以 role 屬性進行分組，並以 aria-labelledby 加上標籤

將單選按鈕與核取方塊以 role="radiogroup" 或 role="group" 進行分組，並透過 aria-labelledby 指定 ID，使其與對應的標籤元素相關聯。如此一來，可以明確讓螢幕閱讀器得知「喜歡的水果」這個標籤適用於整個群組。

單選按鈕

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="radiogroup" aria-labelledby="fruit-group">
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

核取方塊

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="group" aria-labelledby="fruit-group">
      <label><input type="checkbox" name="fruit" value="apple">りんご</label>
      <label><input type="checkbox" name="fruit" value="orange">みかん</label>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

使用 <fieldset>與 <legend>的方法

另一種做法是使用 <fieldset>fieldset 與 <legend>legend。此方法基於 HTML 語意，即使不額外加上特殊屬性或 role，也能讓整個群組被正確辨識。

以下範例中，將單選按鈕群組以 <fieldset>fieldset 包覆，並使用 <legend>legend 作為標籤。

註：注意！在設計上，您可能會希望將標籤與輸入欄位並排排列。若要這樣做，需要將 fieldset 設為 display: contents;，但部分瀏覽器會從無障礙樹狀結構中移除 legend，因此不建議這麼做。若為了版面對齊而以 CSS 強行調整，導致無障礙性受損，並不理想。

<div class="form-group">
  <fieldset>
    <legend>好きな果物</legend>
    <div>
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </fieldset>
</div>

總結

為單選按鈕或核取方塊群組加上標籤，可整理如下。

使用 role 屬性搭配 aria-labelledby 的方法

• 可依需求彈性調整
• 搭配 role="group" 明確設定群組標籤

使用 <fieldset>與 <legend>的方法

• 基於語意的標準做法
• 可實現更穩健且具無障礙性的實作
• 依版面配置不同，無障礙性上可能會有問題

依設計與需求而定，兩種方法只要選擇得當，都能實現適當的無障礙性。

使用 <fieldset>fieldset 與 <legend>legend 在語意上較為正確，但在聯絡表單等情況下，由於整體版面結構的關係，使用 role 屬性搭配 aria-labelledby 可能更為方便。

網頁無障礙還有很深的學問！