确保仅向屏幕阅读器和其他辅助技术提供页面的相关部分。例如,应在屏幕之外或仅供演示之用的内容对辅助技术隐藏。
如何手动测试
如需检查屏幕外内容是否处于隐藏状态,您需要使用屏幕阅读器手动测试该内容。- 对于 Mac 用户,请观看这个有关使用 VoiceOver 的视频。 - PC 用户可观看这个关于如何使用 NVDA 的视频。 - 对于 Chromebook 用户,请参阅内置屏幕阅读器 ChromeVox。
使用 TAB
键在网页间切换。
屏幕阅读器不应读出隐藏的内容。
修正方法
如需隐藏屏幕外的内容,只需将其设为 display: none
或 visibility: hidden
,即可从 Tab 键顺序中移除包含相应内容的元素。
例如:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
另请参阅正确设置屏幕外内容的公开范围。