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

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

如何手動測試

您應以視覺方式和透過螢幕閱讀器測試互動元素。

測試視覺焦點

如要手動測試視覺焦點,請在頁面上使用 TAB 鍵。

  • 你可以按 TAB 鍵前往每個互動元素嗎?
  • 當使用者進入互動式元素時,是否有可供使用者與之互動的視覺線索?
  • 選取每個互動元素時,外觀是否會變更?

您可以透過多種方式為每個互動元素設定焦點指標樣式。其中一種方法是為 :focus 擬造類別設定樣式。無論使用哪種輸入裝置或方法聚焦元素,系統都會在聚焦元素時套用該樣式。

進一步瞭解如何設定焦點樣式

使用螢幕閱讀器進行測試

使用螢幕閱讀器瀏覽頁面,檢查螢幕閱讀器是否朗讀各個互動控制項的名稱、該控制項的角色,以及目前的互動狀態。如果元素的角色和狀態不明確,您可能需要新增適當的 ARIA 角色。

詳情請參閱自訂控制選項具有 ARIA 角色

請務必仔細留意互動元素的標示方式。螢幕閱讀器和其他輔助技術的使用者需要透過標籤才能瞭解該元素的背景資訊。模糊標籤很常見,而且對於瀏覽內容並沒有幫助。 瞭解如何改善標籤和文字替代文字

重要性

以視覺方式呈現控制項如何協助使用者操作及瀏覽您的網站。這些提示稱為「操作空間」。依需求設計適當的方法,可讓使用者在各種裝置上瀏覽您的網站。

資源

互動式元素表示其用途和狀態稽核作業的原始碼