UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
返回知识库
Typography Color Accessibility

可见焦点状态

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

focuskeyboardaccessibility

设计原则

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

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

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

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

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

来源提示 来源提示:综合 W3C WCAG 2.2、Apple Accessibility、IBM Carbon Accessibility 和主流设计系统可访问性实践整理。

Agent 指令

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

适用场景

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

避免做法

  • outline: none 后没有替代样式。
  • hover 明显但 focus 不可见。

知识元数据

分类
Typography Color Accessibility
质量分
82%
版本
v1
发布
2026/6/6