互動元素會指出其用途和狀態
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
連結和按鈕等互動元素應表明其狀態,且與非互動式元素有所區別。如要檢查互動元素是否指出其目的和狀態,請同時使用視覺元素和螢幕閱讀器測試。
如何手動測試
您應以視覺方式和透過螢幕閱讀器測試互動元素。
測試視覺焦點
如要手動測試視覺焦點,請在頁面上使用 TAB 鍵。
- 你可以按 TAB 鍵前往每個互動元素嗎?
- 當使用者進入互動式元素時,是否有可供使用者與之互動的視覺線索?
- 選取每個互動元素時,外觀是否會變更?
您可以透過多種方式為每個互動元素設定焦點指標樣式。其中一種方法是為 :focus
擬造類別設定樣式。無論使用哪種輸入裝置或方法聚焦元素,系統都會在聚焦元素時套用該樣式。
進一步瞭解如何設定焦點樣式。
使用螢幕閱讀器進行測試
使用螢幕閱讀器瀏覽頁面,檢查螢幕閱讀器是否朗讀各個互動控制項的名稱、該控制項的角色,以及目前的互動狀態。如果元素的角色和狀態不明確,您可能需要新增適當的 ARIA 角色。
詳情請參閱自訂控制選項具有 ARIA 角色。
請務必仔細留意互動元素的標示方式。螢幕閱讀器和其他輔助技術的使用者需要透過標籤才能瞭解該元素的背景資訊。模糊標籤很常見,而且對於瀏覽內容並沒有幫助。
瞭解如何改善標籤和文字替代文字。
重要性
以視覺方式呈現控制項如何協助使用者操作及瀏覽您的網站。這些提示稱為「操作空間」。依需求設計適當的方法,可讓使用者在各種裝置上瀏覽您的網站。
資源
互動式元素表示其用途和狀態稽核作業的原始碼
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-05-02 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2019-05-02 (世界標準時間)。"],[],[]]