确保仅向屏幕阅读器和其他辅助技术显示网页的相关部分。例如,屏幕外的内容或仅用于呈现的内容应向辅助技术隐藏。
如何手动测试
如需检查屏幕外内容是否被隐藏,请执行以下操作: 您需要使用屏幕阅读器手动测试相应内容。 - 对于 Mac 用户,请观看这个介绍如何使用 VoiceOver 的视频。 - 对于 PC 用户,请观看这个视频,了解如何使用 NVDA。 - 对于 Chromebook 用户,请查看 内置屏幕阅读器 ChromeVox。
使用 TAB
键可按 Tab 键在页面上导航。
屏幕阅读器不应读出隐藏内容。
解决方法
若要隐藏屏幕外内容,请执行以下操作:
将包含该内容的元素从
只需将其设为 display: none
或 visibility: hidden
即可。
例如:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
另请参阅正确设置屏幕外内容的可见性。