Button

Demo 與 Accessibility Tree

請先勾選同意條款才能送出。

Accessibility Tree

觀察對象：Toggle 按鈕。

元素目前不在無障礙樹中。

Accessibility Tree

觀察對象：以 aria-disabled 停用的按鈕。

元素目前不在無障礙樹中。

按鍵	行為
`Enter / Space`	啟動按鈕。用原生 <button> 即免費取得；用 <div> 加 onClick 則兩個鍵都要自己綁，而且 Space 還要擋掉頁面捲動。
`Tab`	移入與移出。原生 disabled 的按鈕會被整個跳過。

屬性	值	用途
`role`	`button`	觸發動作的元素要有按鈕語意，而且外觀要像按鈕。做成看起來像連結的按鈕，使用者會預期它會導航；反之亦然。會換頁的用 <a>，會做事的用 <button>。
`aria-label`	`關閉`	只有圖示、沒有文字內容時的名稱來源。有文字內容就不要用它覆蓋 —— 看到的和聽到的不一致會違反 WCAG 2.5.3。
`aria-describedby`	`說明元素的 id`	補充說明，在名稱之後播報。「刪除帳號」是名稱，「這個動作無法復原」是說明 —— 兩者不該擠在同一句話裡。
`aria-pressed`	`true / false`	Toggle 按鈕的開關狀態。用它的前提是名稱不隨狀態改變：標籤會在「播放」與「暫停」之間切換的按鈕，狀態已經寫在名稱裡，再加 aria-pressed 就是兩套互相打架的說法。
`aria-disabled`	`true`	停用但保留在 Tab 順序中。原生 disabled 會讓按鈕從鍵盤與螢幕閱讀器的瀏覽路徑中整個消失 —— 使用者不但不能按，連「這裡有一顆按鈕、目前不能用」都不知道。停用原因寫在畫面別處時，用這個。
`aria-busy`	`true`	非同步動作進行中。告訴輔助科技這裡的狀態還在變，先不要當成最終結果。
`aria-hidden`	`true`	圖示是純視覺，名稱已由 aria-label 提供，圖示再進無障礙樹只會重複。

等級 A1.3.1 資訊與關聯性
補充說明以 aria-describedby 與按鈕關聯，而不是只在視覺上擺在旁邊。
等級 A2.1.1 鍵盤
Enter 與空白鍵都能啟動，不需要滑鼠。
等級 AA2.4.6 標題與標籤
按鈕名稱要說明按下去會發生什麼，不能只是「確定」「點這裡」。
等級 AA2.4.7 焦點可見
每顆按鈕都有橘色 focus ring，包含以 aria-disabled 停用的那顆。
等級 A2.5.3 名稱中的標籤
無障礙名稱要包含可見文字。用 aria-label 蓋掉看得見的標籤，語音控制使用者說出畫面上的字就點不到它。
等級 A4.1.2 名稱、角色、值
按鈕具備 button 角色與無障礙名稱；toggle 的按下狀態以 aria-pressed、停用狀態以 disabled 或 aria-disabled 表達。

鍵盤操作
按鈕可用 Enter 鍵或空白鍵啟動
當焦點位於按鈕時，按 Enter 或空白鍵會啟動按鈕。
元件語意
按鈕角色語意與實際功能須一致
觸發操作的元素須具備原生按鈕語意或 role=button，且其外觀與角色須符合該操作，而非顯示為超連結
元件語意
按鈕須具有無障礙名稱
按鈕的無障礙名稱來自其文字內容、aria-labelledby 或 aria-label。
元件語意選做
按鈕須具有無障礙補充說明
若按鈕包含其功能的補充說明，須透過 aria-describedby 指向包含該說明的元素
元件語意
不可用的按鈕須正確傳達停用狀態
當按鈕對應的操作無法使用時，按鈕須傳達停用狀態；若採用 ARIA 的 role=button 語意，須設定 aria-disabled=true。
元件語意
Toggle 按鈕須正確設定 aria-pressed 並維持相同名稱
Toggle 按鈕須設定 aria-pressed，切換為開啟時為 true，關閉時為 false。使用 aria-pressed 時，按鈕名稱不得隨狀態改變；若名稱會改為描述下一個動作，則不得使用 aria-pressed。
焦點管理
啟動按鈕後焦點移到合理位置
按鈕觸發後，焦點移動需視執行動作而定：跳入開啟的對話框、關閉後回到合理的元素、情境未變時維持在按鈕上，或移至新情境的起點。若以快捷鍵觸發按鈕，焦點通常維持在原本使用快捷鍵的情境中。