SuperAPI AI 工具集

focus-state-design

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为界面提供键盘焦点指示器与焦点管理规范,帮助实现可访问的焦点交互模式。

主要能力与要求:焦点环须在所有背景(明暗)上可见,与周围区域对比度至少3:1,且不能仅依赖颜色变化,应使用outline而非单纯改色。推荐样式为:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; },并仅在提供自定义样式时移除默认样式::focus:not(:focus-visible) { outline: none; }。

焦点管理办法:模态框打开时焦点移入其中第一个可交互元素;关闭时焦点返回触发它的元素;动态内容(如提示、展开区)出现时焦点移至新内容;页面导航时焦点移至主内容区。

反模式:无替代地使用outline: none(违反可访问性);在某些背景上不可见的焦点环;焦点顺序与视觉顺序不一致;动态内容(模态框、抽屉)缺少焦点管理。

限制:资料未说明适用平台、框架、浏览器支持范围及具体实现步骤,暂未提供。