確保螢幕閱讀器和其他輔助技術只會顯示網頁中的相關部分。舉例來說,非螢幕或單純呈現的內容應隱藏在輔助技術中。
如何手動測試
如要檢查畫面外的內容是否已隱藏,請使用螢幕閱讀器手動測試。- 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>
另請參閱「正確設定畫面外內容的顯示設定」。