請務必只讓螢幕閱讀器和其他輔助技術存取網頁的相關部分。例如,輔助技術應隱藏畫面外的內容。
如何手動測試
如要確認螢幕外內容是否已隱藏,則應使用螢幕閱讀器進行測試。
- 如果您是 Mac 使用者,請觀看這部 VoiceOver 使用教學影片。
- PC 使用者請觀看這部 NVDA 使用教學影片。
- Chromebook 使用者請參閱內建螢幕閱讀器 ChromeVox 相關說明。
使用 TAB 鍵瀏覽頁面。螢幕閱讀器不應朗讀隱藏的內容。
如何修正
如要隱藏畫面外內容,請將含有該內容的元素設為 display: none
或 visibility: hidden
,從而從分頁順序中移除該元素。
例如:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
另請參閱「正確設定畫面外內容的可見度」。