互动元素指明其用途和状态

互动元素(例如链接和按钮)应指示其状态,并且与非互动元素区分开来。如需检查互动元素是否可指示其用途和状态,请结合使用可视化测试和屏幕阅读器测试。

如何手动测试视觉焦点

如需手动测试视觉焦点,请对网页执行 TAB

  • 您能否使用 Tab 键切换到每个互动元素?
  • 当您设计到互动元素时,是否有视觉线索来表明用户可以与之互动?
  • 当您选择每个互动元素时,它的外观是否会发生变化?

您可以通过多种方式为每个互动元素设置焦点指示器的样式。一种确定的方法是使用 :focus。通过 :focus 伪类,您可以对元素应用统一的样式。每当元素获得焦点时,系统都会应用该样式,无论用于聚焦该元素的输入设备或方法如何。

如需了解详情,请参阅样式焦点

如何使用屏幕阅读器手动测试

使用屏幕阅读器浏览页面,检查屏幕阅读器是否能够读出每个交互式控件的名称、该控件的角色以及当前的交互状态。如果某个元素的角色不明确,且该元素的状态不明确,您可能需要添加适当的 ARIA 角色。有关详情,请参阅自定义控件具有 ARIA 角色

密切关注互动元素的标记方式也很重要。屏幕阅读器和其他辅助技术的用户依靠标签来了解该元素的上下文。模糊标签很常见,对于浏览内容没有帮助。了解如何改进标签和文本替代选项

重要意义

提供视觉提示,让用户了解控件将如何帮助用户操作和浏览您的网站。这些提示称为可供性 (affordance)。提供可供性功能,让用户能够通过各种设备使用您的网站。

资源

交互式元素指示其用途和状态审核的源代码