60 秒決策
先確認使用者要完成的事。
適合使用
- 在工具列中切換一個獨立功能，例如粗體或側欄顯示。
- 按鈕本身必須呈現目前是否啟用。
不適合使用
- 需要多選或互斥選項的完整群組。
- 切換是長時間、立即儲存的系統設定。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
按下狀態要有語意
使用 aria-pressed 與明確的視覺差異，讓人知道目前是否啟用。
圖示不能自己說話
圖示按鈕需要 accessible name；初學者不必猜測 B、眼睛或月亮代表什麼。
只切換一個功能
Toggle Button 適合單一功能開關，群組選擇應使用其他適當控制項。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
未按下
功能尚未啟用。
已按下
功能已啟用，aria-pressed 為 true。
Focus
鍵盤使用者可看見目前焦點並以 Space 或 Enter 切換。
停用
功能目前不可用，保留原因或說明。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
單一格式切換
先觀察：粗體按鈕如何在按下與未按下間表達同一個功能。
操作：按粗體切換按鈕。
預期結果：按下狀態與預覽文字同步，不需要猜目前是否啟用。
可操作 Demo
單一功能切換
這段文字目前使用一般字重。
粗體尚未啟用。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立一個「粗體」Toggle Button。按下後切換 aria-pressed 與視覺狀態，保留可理解的文字或 accessible name；它只切換單一功能，不要拿來代替多選 Checkbox 群組。驗收清單
不要只確認欄位能不能點。
- 是否使用 aria-pressed 表示狀態？
- 圖示是否有可理解名稱？
- 按下樣式是否不只改變顏色？
- 是否只代表單一功能？
- 鍵盤是否可切換與看見 Focus？