Topics

建立表單時，您可以使用label你是否曾經對如何處理群組感到困惑？特別是如何為整個群組貼標籤，以及for有時我會為如何處理屬性而苦惱。

這次我們就來整理一下這些群體的標註，並介紹一下具體的方法。

常見觀看方法及問題

至第一項for觀點

對於單選按鈕或複選框組，<label>的for這是將屬性指向第一項的一種方法。

例如以下程式碼：

 最愛的水果



  蘋果

  橘子

  香蕉

從視覺上看，它看起來不錯，但螢幕閱讀器無法正確顯示“最喜歡的水果”標籤。它僅與第一個單選按鈕相關聯。因此，整個組無法被正確識別。

for不指定

最喜歡的水果



蘋果

橘子

香蕉

這種方法使得標籤與哪個元素相關變得不清楚，特別是對於使用螢幕閱讀器的使用者而言。目前尚不清楚哪些選項與標籤相關。就變成這樣了。

這些都是很好的改進想法

使用 aria-labelledby 按角色屬性和標籤分組

單選按鈕和複選框role="radiogroup"或者role="group"並將元素與 aria-labelledby 指定的 ID 的標籤關聯起來。這樣可以讓螢幕閱讀器清楚地看到「Favorite Fruit」這個標籤適用於整個群組。

單選按鈕

最愛的水果





 蘋果

 橘子

 香蕉

複選框

好きな果物





 蘋果

 橘子

 香蕉

<fieldset>和<legend>如何使用

另一種方法是<fieldset>和<legend>這種方法依賴 HTML 語義，並確保整個群組被正確識別，而無需任何特殊屬性或角色。

在下面的範例中，我們建立了一組單選按鈕。<fieldset>並作為標籤<legend>我正在使用。

※ 注意！ ：有時您可能需要並排佈局標籤和輸入框。在這種情況下，請使用 fieldset。display: contents;但不建議這樣做，因為有些瀏覽器會將圖例從可訪問性樹中移除。強行用 CSS 對齊佈局並失去可訪問性並不好。

最喜歡的水果



蘋果

橘子

香蕉

概括

單選按鈕或複選框組的標籤可以如下組織：

使用 role 屬性和 aria-labelledby

• 如有需要，可靈活定制
• 明確設定群組標籤並結合 role="group"

<fieldset>和<legend>如何使用

• 基於語義的標準方法
• 允許更強大、更易於存取的實現
• 某些佈局存在可訪問性問題

根據您的設計和要求，您可以透過選擇任一方法來實現適當的可訪問性。

<fieldset>和<legend>更具語義性，但在查詢表單的情況下，例如，由於整體佈局結構，role 屬性和 aria-labelledby 可能更容易使用。

網站無障礙設計仍處於未來階段！