Web 無障礙：如何正確為單選按鈕或核取方塊群組標記 label？

建立表單時，是否曾對單選按鈕或核取方塊群組的 label 處理感到困惑？特別是在決定如何標記整個群組，以及如何處理 for 屬性時，經常會遇到問題。

本次我們將整理這些群組標記方法，並介紹具體的做法。

常見做法與問題點

將 for 指向第一個項目

這是將 的 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>

使用 和 的方法

另一種方法是使用 和 。此方法基於 HTML 語義，無需添加特殊屬性或 role，整個分組就能被正確識別。

在下面的範例中，單選按鈕分組用 包裹，並使用 作為標籤。

※ 注意！：設計上可能希望將標籤和輸入框並排配置。在這種情況下，需要將 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" 明確設定群組標籤

使用 和 的方法

• 基於語義的標準方法
• 能夠實現更穩健且可訪問的實現
• 依版面配置可能存在無障礙問題

根據設計和需求，無論選擇哪種方法都能實現適當的無障礙性。

雖然 和 在語義上更佳，但在聯絡表單等情況下，role 屬性和 aria-labelledby 的方法可能更容易使用，取決於整體版面結構。

網頁無障礙設計還有很多深度要探索！