互动元素(例如链接和按钮)应指示其状态,并且与非互动元素区分开来。如需检查互动元素是否可指示其用途和状态,请结合使用可视化测试和屏幕阅读器测试。
如何手动测试视觉焦点
如需手动测试视觉焦点,请对网页执行 TAB
。
- 您能否使用 Tab 键切换到每个互动元素?
- 当您设计到互动元素时,是否有视觉线索来表明用户可以与之互动?
- 当您选择每个互动元素时,它的外观是否会发生变化?
您可以通过多种方式为每个互动元素设置焦点指示器的样式。一种确定的方法是使用 :focus
。通过 :focus
伪类,您可以对元素应用统一的样式。每当元素获得焦点时,系统都会应用该样式,无论用于聚焦该元素的输入设备或方法如何。
如需了解详情,请参阅样式焦点。
如何使用屏幕阅读器手动测试
使用屏幕阅读器浏览页面,检查屏幕阅读器是否能够读出每个交互式控件的名称、该控件的角色以及当前的交互状态。如果某个元素的角色不明确,且该元素的状态不明确,您可能需要添加适当的 ARIA 角色。有关详情,请参阅自定义控件具有 ARIA 角色。
密切关注互动元素的标记方式也很重要。屏幕阅读器和其他辅助技术的用户依靠标签来了解该元素的上下文。模糊标签很常见,对于浏览内容没有帮助。了解如何改进标签和文本替代选项。
重要意义
提供视觉提示,让用户了解控件将如何帮助用户操作和浏览您的网站。这些提示称为可供性 (affordance)。提供可供性功能,让用户能够通过各种设备使用您的网站。