互動元素會指出其用途和狀態

連結和按鈕等互動元素應指出其狀態,並且與非互動元素有區別。如要檢查互動元素是否顯示其目的和狀態,請同時使用視覺和螢幕閱讀器測試。

如何手動測試視覺焦點

如要手動測試視覺焦點,請TAB 瀏覽頁面。

  • 您能夠以 Tab 鍵移至各個互動元素嗎?
  • 當您進入互動元素後,是否有任何視覺線索可以讓使用者與該元素互動?
  • 選擇每個互動元素時,每個互動元素的外觀是否都會改變?

每個互動元素的焦點指標樣式有很多種,其中一個確保方法是使用 :focus:focus 虛擬類別可用來為元素套用統一樣式。每當元素聚焦時,系統就會套用該樣式,無論輸入裝置或用於聚焦該樣式的方法為何。

詳情請參閱樣式聚焦

如何使用螢幕閱讀器手動測試

使用螢幕閱讀器瀏覽頁面,並確認螢幕閱讀器能夠朗讀每個互動控制項的名稱、該控制項的角色,以及目前的互動狀態。如果元素的角色不夠明確,且元素狀態不明,您可能需要新增適當的 ARIA 角色。詳情請參閱自訂控制項具有 ARIA 角色的說明。

此外,請務必密切注意互動元素的標記方式。螢幕閱讀器和其他輔助技術的使用者必須使用標籤來瞭解該元素的背景資訊。模糊標籤很常見,對於瀏覽內容沒有幫助。進一步瞭解如何改善標籤和文字替代方案

這些資訊的重要性

提供視覺化提示,說明控制項的功能可協助使用者操作及瀏覽你的網站。這些提示稱為預設選項。提供預設用途,方便使用者透過各種裝置瀏覽您的網站。

資源

互動元素原始碼稽核用途和狀態