建立表單時，您可以使用label你是否曾經對如何處理群組感到困惑？特別是如何為整個群組貼標籤，以及for有時我會為如何處理屬性而苦惱。
這次我們就來整理一下這些群體的標註，並介紹一下具體的方法。
常見觀看方法及問題
至第一項for觀點
對於單選按鈕或複選框組，<label>的for這是將屬性指向第一項的一種方法。
例如以下程式碼：
バナナ
Topics
網頁可訪問性：如何正確標記單選按鈕或複選框組？
- column
至第一項
從視覺上看，它看起來不錯，但螢幕閱讀器無法正確顯示“最喜歡的水果”標籤。它僅與第一個單選按鈕相關聯。因此，整個組無法被正確識別。
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 可能更容易使用。
網站無障礙設計仍處於未來階段！
撰稿人
我們以可靠的團隊結構和快速的回應能力而自豪。
您在網路存取方面遇到困難嗎？
案例研究
他從桌面出版（DTP）領域跳槽到網路領域，不知不覺中就成為了一位精通標記語言、前端、方向和無障礙設計的「技術大師」。自Liberogic創立以來，他一直活躍於多個領域，如今已成為公司內部的活字典。最近，他專注於探索如何充分利用提示來提高效率，並思考著「我們能否更依賴人工智慧來實現無障礙？」他的技術和思維仍在不斷發展。
Futa
標記工程師 / 前端工程師 / Web 無障礙工程師 / Web 總監