SuperAPI AI 工具集

aria-patterns

前端与建站

查看项目

更新于 10-15 21:36

技能介绍

用途:为自定义交互组件提供正确的 ARIA 角色、状态与属性,使组件可被屏幕阅读器和键盘正常使用。适用于构建自定义组件、让动态内容可访问、修复屏幕阅读器问题、为自定义控件补充键盘支持。

主要能力:给出常见组件的可复制模式,包括按钮与切换按钮、模态对话框、下拉菜单、标签页、手风琴、工具提示、警告与状态消息、组合框(自动补全)、进度与加载。每个模式列出所需角色、状态、属性及预期键盘行为,例如模态框需打开时聚焦、焦点陷阱、Escape 关闭、关闭后焦点返回触发元素;下拉菜单支持 Enter/Space、方向键、Escape、Home、End;标签页支持左右方向键、Home、End、Tab 进入面板。

使用方式:先识别组件类型,优先检查原生 HTML 能否实现,再套用 ARIA 模式,补充键盘支持,最后用屏幕阅读器验证播报。文档强调 ARIA 首要规则:能用原生 HTML 就不用 ARIA,如优先用 <button> 而非 <div role="button">;不改变原生语义;所有交互式 ARIA 元素必须可键盘访问;不在可聚焦元素上使用 role="presentation" 或 aria-hidden="true";所有交互元素必须有可访问名称。还提供常用属性速查(aria-label、aria-labelledby、aria-describedby、aria-expanded、aria-controls、aria-hidden、aria-live、aria-pressed、aria-selected、aria-current)以及 .sr-only 屏幕阅读器专用文本样式。

测试建议:仅用键盘 Tab、方向键、Enter、Escape 操作;用 VoiceOver、NVDA 或 JAWS 测试;检查标签、状态与变化是否被播报;用 axe DevTools 做自动化审计。

限制:资料未提供该技能的安装命令、收费方式、平台支持范围或版本信息,暂未提供。