輔助技術已隱藏畫面外的內容

確保螢幕閱讀器和其他輔助技術只會顯示網頁中的相關部分。舉例來說,非螢幕或單純呈現的內容應隱藏在輔助技術中。

如何手動測試

如要檢查畫面外的內容是否已隱藏,請使用螢幕閱讀器手動測試。- Mac 使用者請觀看這部 VoiceOver 使用教學影片。 - PC 使用者請參閱這部 NVDA 使用教學影片。- Chromebook 使用者請使用內建螢幕閱讀器 ChromeVox

使用 TAB 鍵瀏覽頁面。 螢幕閱讀器不應朗讀隱藏的內容。

如何修正

如要隱藏畫面外內容,請將包含該內容的元素從分頁順序中移除,方法是將其設為 display: nonevisibility: hidden

例如:

.remove-me {
  visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>

另請參閱「正確設定畫面外內容的顯示設定」。

資源

輔助技術稽核不會顯示「畫面外內容」的原始碼