跳到主要內容

Disclosure

Demo 與 Accessibility Tree

單筆滿一千元免運，未滿則收取八十元。離島與偏遠地區另計。

Accessibility Tree

觀察對象：Disclosure 的控制按鈕。

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

Accessibility Tree

觀察對象：按鈕管的那段內容。

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

鍵盤操作

按鍵行為
Enter / Space切換內容的顯示與隱藏。用原生 <button> 即免費取得，不需自行綁定。
Tab移入與移出控制按鈕。

ARIA 屬性

屬性值用途
rolebutton控制元件必須是按鈕。用原生 <button> 即隱含此角色；用 <div> 加 onClick 則要自己補 role、tabindex 與鍵盤處理，沒有理由這麼做。
aria-expandedtrue / false內容可見時為 true，隱藏時為 false。少了它，螢幕閱讀器使用者按下按鈕後不知道發生了什麼事。
aria-controls內容元素的 id指向這顆按鈕所顯示或隱藏的全部內容。內容用 hidden 而非條件渲染，這個 id 才永遠指得到東西。
aria-hiddentrue箭頭圖示是純視覺，狀態已由 aria-expanded 表達。

WCAG 對應

  • 等級 A2.1.1 鍵盤

    Enter 與空白鍵即可切換，不需要滑鼠。

  • 等級 AA2.4.7 焦點可見

    控制按鈕有橘色 focus ring。

  • 等級 A4.1.2 名稱、角色、值

    控制元件具備 button 角色，aria-expanded 隨內容可見狀態更新，aria-controls 指向被控制的內容。

APG 規則

  • 元件語意

    Disclosure 控制元件須具備 button 角色語意

    用來顯示與隱藏 Disclosure 內容的元素須具備 button 角色語意。

  • 元件語意

    Disclosure 的 aria-expanded 須反映內容的顯示狀態

    Disclosure 按鈕所控制的內容可見時，aria-expanded=true；內容隱藏時，aria-expanded=false。

  • 鍵盤操作

    Disclosure 控制元件可用 Enter 鍵或空白鍵切換內容

    當焦點位於 Disclosure 控制元件時，按下 Enter 鍵或空白鍵可觸發該元件，並切換其所控制內容的顯示與隱藏。