60 秒決策
先確認使用者要完成的事。
適合使用
- 多個 Checkbox、Radio 或相關控制項共同回答一個問題。
- 群組需要共同規則、說明或錯誤訊息。
不適合使用
- 只是視覺上剛好排在一起，實際沒有共同問題。
- 用 div 把一組互斥或多選控制項包起來卻沒有語意。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
共同問題包成一組
通知管道、付款方式、聯絡偏好等都有一個共同題目。
Legend 留在 Fieldset 裡
群組標題移到外面後，選項對輔助科技就失去共同脈絡。
群組錯誤也有位置
整組未選時，把錯誤放在群組附近，別逐項亂標紅。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
正常群組
Legend、選項與共同說明一起出現。
部分選取
Checkbox 群組可保留每個項目的獨立狀態。
群組未完成
需要選一項時，錯誤說明整組規則。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
通知管道群組
先觀察：一組 Checkbox 是否有共同名稱，而不是幾個散落的勾選框。
操作：逐項勾選通知管道並用 Tab 走過所有選項。
預期結果：使用者知道自己正在設定同一件事，選項仍可各自操作。
可操作 Demo
相關選項的欄位群組
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「通知管道」的 Fieldset，將 Email、站內通知與每週摘要三個 Checkbox 放進同一個 fieldset。群組必須有 Legend，讓鍵盤與輔助科技知道這些選項是在回答同一題。不要只用 div 排版。驗收清單
不要只確認欄位能不能點。
- 多個相關控制項是否使用 fieldset？
- 是否有能說明共同問題的 Legend？
- 群組必填或錯誤是否放在群組附近？
- 鍵盤是否能逐項操作？