SuperAPI AI 工具集

accessibility-interaction-patterns

通用与其它

查看项目

更新于 10-15 21:41

技能介绍

用途:该技能面向 Web 应用交互设计,说明如何让界面行为不依赖鼠标与视觉,覆盖键盘访问、焦点顺序、屏幕阅读器播报、可见状态反馈以及动效与时间预期。核心观点是无障碍不是事后打磨,而是交互组件设计的一部分。

主要能力:优先使用原生 HTML 元素(button、a href、input/textarea、select、radio、checkbox 等),并给出用户意图与推荐元素的对照;说明键盘交互的最低预期(Tab/Shift+Tab、Enter 与 Space 激活、方向键、焦点始终可见);讲解焦点管理时机(打开/关闭模态框、客户端路由跳转、表单校验失败、展示新交互内容),并给出模态框与路由切换的代码示例;强调可见焦点样式(:focus-visible)不可随意移除;说明 ARIA 的正确用法(aria-expanded、aria-controls、aria-current、aria-busy、aria-live)及不应以 ARIA 替代原生语义;给出表单标签、错误关联(aria-invalid、aria-describedby)与错误处理规则;介绍异步反馈状态(加载、保存、成功、错误、同步中)与 live region 播报;列举模态框、下拉菜单、标签页、折叠面板等常见组件的无障碍要求;讨论指针、触摸与拖拽的替代方案;说明 prefers-reduced-motion 与时间压力问题;总结 SPA 常见陷阱与测试清单。

使用方式:作为开发与评审交互组件时的参考清单,按用途、能力、用法与限制逐项对照实现。

适用场景:Web 前端开发、组件库设计、SPA 交互实现与无障碍测试。

限制:资料未提供具体安装命令、依赖或平台信息,暂未提供。