Interface Lab
返回知识库
Typography Color Accessibility

可见焦点状态

键盘和辅助技术用户需要清楚知道当前焦点在哪里,焦点态不能被 reset 掉。

设计原则

焦点态是交互路径的一部分,不是浏览器默认样式的瑕疵。

原则

焦点态是交互路径的一部分,不是浏览器默认样式的瑕疵。

设计动作

为所有可交互元素设计高对比 focus-visible;焦点环不应被 overflow 裁切,键盘顺序要符合视觉顺序。

正反例

正向示例:按钮、链接、输入框、标签页、菜单、卡片入口。 反向示例:outline: none 后没有替代样式。

适用场景

按钮、链接、输入框、标签页、菜单、卡片入口。 页面有复杂导航或管理操作。

来源提示

来源提示:综合 W3C WCAG 2.2、Apple Accessibility、IBM Carbon Accessibility 和主流设计系统可访问性实践整理。 WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/

Agent 指令

为所有可交互元素设计高对比 focus-visible;焦点环不应被 overflow 裁切,键盘顺序要符合视觉顺序。