SuperAPI AI 工具集

accessibility

前端与建站

查看项目

更新于 10-16 00:04

技能介绍

用途:帮助开发者构建符合 WCAG 2.1 AA 的无障碍网站,框架无关、无依赖,状态标注为 Production Ready。

主要能力:以语义化 HTML 为优先,说明 <a>、<button>、<nav>、<article> 等元素的选择决策;在 HTML 无法表达时补充 ARIA,如 aria-label、aria-labelledby、aria-describedby、aria-live、aria-expanded;焦点管理强调不能只写 outline: none,应提供可见焦点样式,对话框需实现焦点陷阱并在关闭后恢复焦点;文本替代要求图片提供 alt,装饰图用 alt="",图标按钮用 aria-label;配色要求正文对比度 4.5:1,大文本与 UI 组件 3:1;表单要求使用可见 <label> 关联输入,错误用 aria-invalid、aria-describedby 与 role="alert" 播报;还给出标签页、跳过链接等可访问组件模式。

使用方式:按语义化 HTML、ARIA、键盘导航、颜色对比、表单五步实施;用键盘(Tab/Shift+Tab、Enter/Space、方向键、Escape)走查,用 NVDA(下载:https://www.nvaccess.org/download/)或 VoiceOver(Cmd+F5)验证,用 axe DevTools 与 Lighthouse 自动扫描,Lighthouse 无障碍分数 90+ 为良好。

适用场景与限制:适用于任何需满足 WCAG 2.1 AA 的网页与组件开发,但资料未提供具体平台限制、定价或完整安装命令;列出 12 类常见问题(焦点缺失、对比度不足、缺 alt、键盘不可达、无标签、标题跳级、对话框无焦点陷阱、动态内容无 aria-live、仅用颜色传意、链接文字不明确、自动播放媒体、自定义控件不可访问)供预防。