accessibility-audit by webflow/webflow-skills
npx skills add https://github.com/webflow/webflow-skills --skill accessibility-audit针对 Webflow 页面的全面 WCAG 2.1 无障碍审计,包含详细问题检测和可操作的修复方案。
始终使用 Webflow MCP 工具进行所有操作:
webflow_guide_tool 在开始前获取最佳实践data_sites_tool 并执行 list_sites 操作来识别可用站点data_sites_tool 并执行 get_site 操作来获取站点详情data_pages_tool 并执行 list_pages 操作来获取所有页面element_tool 并执行 操作来获取详细的元素信息(需要 Designer)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
get_all_elementselement_tool 并执行 add_or_update_attribute 操作来修复无障碍问题(需要 Designer)element_snapshot_tool 来获取元素的视觉预览context 参数(15-25 个词,第三人称视角)data_sites_tool 并执行 list_sites 操作来识别目标站点data_pages_tool 并执行 list_pages 操作来显示可用页面de_page_tool 并执行 switch_page 操作以导航到正在审计的页面element_tool 并执行 get_all_elements 操作进行详细分析
include_style_properties: true 以检查焦点样式include_all_breakpoint_styles: false 以最小化数据量仅图标按钮缺少标签(WCAG 4.1.2)
aria-label 或 aria-labelledbyaria-label 属性表单输入框缺少标签(WCAG 1.3.1)
* 查找:Input、Select、Textarea 元素
* 检查:缺少关联的标签或 `aria-label`
* 影响:用户不知道输入框的用途
* 修复:添加 `aria-label` 或使用 `id` 与 `<label>` 关联
11. 非语义点击处理器(WCAG 2.1.1)
* 查找:Div 或 Span 元素(通过元素类型识别)
* 检查:具有交互行为但缺少适当的角色/键盘支持
* 影响:无法通过键盘访问,屏幕阅读器会错过交互性
* 修复:添加 `role="button"`、`tabIndex="0"`,建议使用真正的 `<button>`
12. 链接缺少目标地址(WCAG 2.1.1)
* 查找:没有 `href` 属性的 Link 元素
* 检查:仅使用 onClick 而没有 href 的链接
* 影响:无法通过键盘访问,破坏浏览器功能
* 修复:添加适当的 `href` 或转换为按钮
* 查找:具有 `outline: none` 样式的元素
* 检查:没有可见的替代焦点指示器
* 影响:键盘用户看不到焦点位置
* 修复:添加可见的焦点样式(边框、盒阴影、背景变化)
14. 缺少键盘处理器(WCAG 2.1.1)
* 查找:具有 onClick 处理器的元素
* 检查:缺少针对 Enter/Space 键的 onKeyDown 处理器
* 影响:无法仅使用键盘操作
* 修复:添加键盘事件处理器
15. 触摸目标太小(WCAG 2.5.5)
* 查找:可点击元素(按钮、链接)
* 检查:宽度或高度 < 44px
* 影响:在移动设备上难以点击
* 修复:增加内边距或将最小宽度/最小高度设置为 44px
* 查找:标题元素(h1-h6)
* 检查:跳过的层级(h1 → h3,跳过了 h2)
* 影响:令人困惑的文档结构
* 修复:使用正确的顺序标题层级
17. 正值的 tabIndex(WCAG 2.4.3)
* 查找:具有 tabIndex > 0 的元素
* 检查:破坏了自然的 Tab 键顺序
* 影响:令人困惑的键盘导航
* 修复:仅使用 tabIndex="0" 或 "-1",让自然的 DOM 顺序生效
18. 角色缺少必需属性(WCAG 4.1.2)
* 查找:具有 ARIA 角色的元素
* 检查:缺少必需的 ARIA 属性(例如,role="button" 但没有 tabIndex)
* 影响:无障碍语义不完整
* 修复:为角色添加必需的属性
* 关键:必须修复(阻碍访问)
* 严重:应该修复(显著影响可用性)
* 中等:考虑修复(改善体验)
20. 计算无障碍分数(0-100):
* 从 100 分开始
* 关键问题:每个扣 10 分
* 严重问题:每个扣 5 分
* 中等问题:每个扣 2 分
* 最低分数:0
21. 生成严重性摘要:
* 发现的问题总数
* 按严重性细分
* 最常见的问题类型
* 受影响最严重的页面/部分
创建详细报告,使用特定格式:
═══════════════════════════════════════════════════ 无障碍审计:[页面名称] ═══════════════════════════════════════════════════
关键问题(X 个) ─────────────────── [A11Y] 元素:按钮 "提交" 问题:按钮缺少可访问名称 位置:表单部分,元素 ID:{component: "abc", element: "xyz"} 当前状态:<button><CloseIcon /></button> 修复:添加 aria-label="关闭" WCAG:4.1.2 名称、角色、值
[A11Y] 元素:输入框 问题:表单输入框缺少标签 位置:联系表单,元素 ID:{component: "def", element: "uvw"} 当前状态:<input type="email" /> 修复:添加 aria-label="电子邮件地址" 或与 <label> 关联 WCAG:1.3.1 信息和关系
严重问题(X 个) ────────────────── [A11Y] 元素:链接 "阅读更多" 问题:焦点轮廓被移除且无可见替代方案 位置:博客部分 当前状态:outline: none 修复:添加可见的焦点样式(例如,border: 2px solid blue) WCAG:2.4.7 焦点可见
中等问题(X 个) ─────────────────── [A11Y] 元素:标题 问题:标题层级跳过(h1 → h3) 位置:文章部分 当前状态:<h3>子章节</h3> 在 <h1>标题</h1> 之后 修复:更改为 <h2> 或添加中间的 h2 WCAG:1.3.1 信息和关系
═══════════════════════════════════════════════════ 摘要 ─────────────────────────────────────────────────── 问题总数:X
无障碍分数:XX/100
最常见问题:
提供可操作的见解:
* 优先修复列表(关键问题优先)
* 快速见效的修复(易于实施且影响大)
* 设计模式建议
* 更多学习资源
提供自动修复问题的选项:Designer 已连接,因此可以提供自动修复
显示修复预览:
您想修复哪些问题?
[1] ✓ 为提交按钮添加 aria-label 元素:联系表单中的按钮 修复:添加 aria-label="提交联系表单" 安全:是(仅添加属性)
[2] ✓ 为电子邮件输入框添加 aria-label 元素:联系表单中的输入框 修复:添加 aria-label="电子邮件地址" 安全:是
[3] ⚠️ 修复标题层级 元素:文章部分中的 h3 修复:将标题级别从 h3 更改为 h2 安全:可能影响视觉样式
输入数字以跳过(例如,"3"),输入 "all" 修复所有,输入 "none" 取消
应用批准的修复:使用 element_tool 并执行 add_or_update_attribute 操作
* 分批处理
* 对于大型修复集显示进度
* 报告每个修复尝试的成功/失败
27. 生成修复后报告:
* 已修复问题:X
* 剩余问题:Y
* 新的无障碍分数:XX/100(从 YY/100 提高)
* Markdown(可读文档)
* JSON(机器可读,用于跟踪)
* CSV(电子表格,供团队审查)
29. 提供资源:
* WCAG 2.1 快速参考链接
* Webflow 无障碍最佳实践
* 推荐的测试工具(浏览器扩展、屏幕阅读器)
✅ 按钮无障碍性(标签、角色) ✅ 表单输入框标签和关联 ✅ 链接语义和键盘访问 ✅ 焦点可见性和键盘导航 ✅ 标题层级和结构 ✅ ARIA 角色和属性 ✅ 触摸目标大小 ✅ 交互式元素语义
❌ 图片替代文本(请使用 asset-audit 技能) ❌ 颜色对比度(需要视觉分析) ❌ 动画/运动偏好 ❌ 屏幕阅读器测试(需要手动验证) ❌ 内容可读性(语言水平、清晰度)
用户提示:
对我的主页进行无障碍审计
步骤 1:站点与页面选择
🔍 无障碍审计:页面选择
我将帮助您审计主页的无障碍问题。
首先,让我获取您的站点信息...
可用站点:
1. 公司网站
2. 作品集站点
哪个站点?(1/2)
用户响应: 1
步骤 2:页面选择
公司网站中的可用页面:
1. 主页(/)
2. 关于(/about)
3. 联系(/contact)
4. 博客(/blog)
您想审计哪个页面?(1 表示主页)
用户响应: 1
步骤 3:审计范围
您希望进行什么级别的审计?
1. 全面审计(所有 WCAG 检查)- 推荐
2. 仅关键问题(A 级合规性)
3. 特定类别(按钮、表单、导航)
您的选择:(1/2/3)
用户响应: 1
步骤 4:审计进度
🔄 正在运行无障碍审计...
进度:
✅ 已提取页面内容(45 个元素)
✅ 正在分析按钮和交互式元素
✅ 正在检查表单输入框和标签
✅ 正在验证标题层级
✅ 正在检查键盘导航
🔄 正在分析焦点状态...
分析完成!
步骤 5:报告
═══════════════════════════════════════════════════
无障碍审计:主页
═══════════════════════════════════════════════════
关键问题(3 个)
───────────────────
[A11Y] 元素:按钮(导航切换)
问题:仅图标按钮缺少可访问名称
位置:页眉导航
元素 ID:{component: "nav-01", element: "btn-menu"}
当前状态:<button><MenuIcon /></button>
修复:添加 aria-label="打开导航菜单"
WCAG:4.1.2 名称、角色、值
[A11Y] 元素:输入框(电子邮件订阅)
问题:表单输入框缺少标签
位置:页脚,新闻通讯注册
元素 ID:{component: "footer-01", element: "email-input"}
当前状态:<input type="email" placeholder="输入电子邮件" />
修复:添加 aria-label="新闻通讯的电子邮件地址"
WCAG:1.3.1 信息和关系
[A11Y] 元素:Div(可点击卡片)
问题:非语义交互式元素
位置:服务部分,卡片 2
元素 ID:{component: "services-01", element: "card-02"}
当前状态:<div onClick={...}>服务卡片</div>
修复:转换为 <button> 或添加 role="button" + tabIndex="0"
WCAG:2.1.1 键盘
严重问题(5 个)
──────────────────
[A11Y] 元素:链接 "了解更多"
问题:焦点轮廓被移除且无可见替代方案
位置:英雄部分
元素 ID:{component: "hero-01", element: "cta-link"}
当前状态:outline: none
修复:添加焦点样式 - border: 2px solid #0066cc 或 box-shadow
WCAG:2.4.7 焦点可见
[A11Y] 元素:按钮 "订阅"
问题:触摸目标太小(30px × 36px)
位置:页脚新闻通讯表单
元素 ID:{component: "footer-01", element: "submit-btn"}
当前状态:小按钮
修复:增加内边距或设置 min-height: 44px
WCAG:2.5.5 目标大小
[继续显示另外 3 个严重问题...]
中等问题(4 个)
───────────────────
[A11Y] 元素:标题 "我们的服务"
问题:标题层级跳过(h1 → h3)
位置:服务部分
元素 ID:{component: "services-01", element: "heading"}
当前状态:<h3>我们的服务</h3> 跟在 <h1>欢迎</h1> 之后
修复:更改为 <h2> 以保持正确的层级
WCAG:1.3.1 信息和关系
[继续显示另外 3 个中等问题...]
═══════════════════════════════════════════════════
摘要
───────────────────────────────────────────────────
问题总数:12
- 关键:3 个问题(必须修复)
- 严重:5 个问题(应该修复)
- 中等:4 个问题(考虑修复)
无障碍分数:64/100
最常见问题:
1. 缺少按钮标签 - 2 次出现
2. 焦点样式被移除 - 3 次出现
3. 标题层级问题 - 2 次出现
快速见效的修复(简单 + 高影响):
✨ 为图标按钮添加 aria-label(2 分钟,+20 分)
✨ 为输入框添加标签(5 分钟,+10 分)
✨ 添加焦点样式(10 分钟,+15 分)
═══════════════════════════════════════════════════
💡 后续步骤:
1. 首先修复关键问题(阻碍部分用户访问)
2. 为键盘用户添加可见的焦点样式
3. 使用键盘导航进行测试(Tab、Enter、Space 键)
4. 考虑使用屏幕阅读器进行测试(NVDA/JAWS/VoiceOver)
您希望我帮助修复这些问题吗?(需要 Designer 连接)
用户提示:
审计我整个站点的无障碍性
代理响应:
🔍 多页面无障碍审计
我将审计您站点上所有页面的无障碍问题。
找到 8 个页面:
1. 主页
2. 关于
3. 服务
4. 团队
5. 博客
6. 博客文章模板(CMS)
7. 联系
8. 隐私政策
这大约需要 2-3 分钟。
继续进行全站点审计吗?(是/否)
用户: 是
进度:
🔄 正在审计站点无障碍性...
进度:████████████░░░░░░░░ 60%(5/8 个页面)
✅ 主页 - 分数:64/100(12 个问题)
✅ 关于 - 分数:78/100(6 个问题)
✅ 服务 - 分数:71/100(9 个问题)
✅ 团队 - 分数:85/100(4 个问题)
✅ 博客 - 分数:82/100(5 个问题)
🔄 正在分析博客文章模板...
最终报告:
═══════════════════════════════════════════════════
全站点无障碍审计
═══════════════════════════════════════════════════
总体分数:73/100
已审计页面:8
问题总数:48
- 关键:11 个问题
- 严重:21 个问题
- 中等:16 个问题
═══════════════════════════════════════════════════
按页面统计的问题
═══════════════════════════════════════════════════
🔴 最低分数(需要关注):
1. 主页 - 64/100(12 个问题:3 个关键,5 个严重,4 个中等)
2. 服务 - 71/100(9 个问题:2 个关键,5 个严重,2 个中等)
3. 关于 - 78/100(6 个问题:1 个关键,3 个严重,2 个中等)
🟢 最高分数:
1. 团队 - 85/100(4 个问题:0 个关键,2 个严重,2 个中等)
2. 博客 - 82/100(5 个问题:1 个关键,2 个严重,2 个中等)
═══════════════════════════════════════════════════
全站点模式
═══════════════════════════════════════════════════
站点中最常见的问题:
1. 缺少按钮标签(图标按钮)- 8 次出现
受影响的页面:主页、服务、博客、联系
2. 焦点轮廓被移除 - 12 次出现
受影响的页面:所有页面(站点范围的 CSS 问题)
3. 表单输入框缺少标签 - 5 次出现
受影响的页面:主页、联系
4. 触摸目标太小(<44px)- 9 次出现
受影响的页面:主页、关于、服务、联系
═══════════════════════════════════════════════════
建议
═══════════════════════════════════════════════════
🎯 全站点修复(修复一次,处处受益):
1. 向全局 CSS 添加焦点样式(影响所有页面的 12 个问题)
2. 更新按钮组件以要求 aria-label(影响 8 个问题)
3. 在设计系统中增加最小触摸目标大小(影响 9 个问题)
📋 页面特定优先级:
1. 主页:修复导航菜单按钮和新闻通讯表单
2. 服务页面:为服务卡片交互添加标签
3. 联系页面:为所有表单输入框添加正确的标签
💡 设计系统改进:
- 创建具有必需 aria-label 的无障碍按钮组件
- 为所有交互式组件添加焦点状态变体
- 设置最小触摸目标大小标准(44px)
您希望:
1. 获取特定页面的详细报告
2. 将发现导出到文件(Markdown/JSON/CSV)
3. 帮助修复全站点问题(需要 Designer)
用户提示:
仅检查我的联系页面的关键无障碍问题
代理响应:
🔍 关键问题审计:联系页面
正在运行快速扫描以查找阻碍性无障碍问题...
✅ 页面已分析
═══════════════════════════════════════════════════
关键问题:联系页面
═══════════════════════════════════════════════════
发现:4 个关键问题
[1] 表单输入框缺少标签
元素:电子邮件输入框
位置:联系表单,顶部
问题:屏幕阅读器没有可访问名称
修复:添加 aria-label="您的电子邮件地址"
WCAG:1.3.1(A 级)
[2] 表单输入框缺少标签
元素:消息文本区域
位置:联系表单,底部
问题:屏幕阅读器没有可访问名称
修复:添加 aria-label="您的消息"
WCAG:1.3.1(A 级)
[3] 按钮缺少标签
元素:提交按钮
位置:联系表单,底部
问题:仅图标按钮,没有文本
修复:添加 aria-label="提交联系表单"
WCAG:4.1.2(A 级)
[4] 非语义交互式元素
元素:社交媒体链接(Instagram)
位置:页脚
问题:使用 onClick 的 Div 而不是正确的链接
修复:转换为 <a href="..."> 并添加 aria-label="Instagram"
WCAG:2.1.1(A 级)
═══════════════════════════════════════════════════
⚠️ 影响:这些问题会阻止屏幕阅读器用户使用您的联系表单。
🔧 预计修复时间:5 分钟
您希望我:
1. 运行全面审计(包括严重和中等问题)
2. 立即修复这 4 个关键问题(需要 Designer)
3. 导出此报告(Markdown/JSON/CSV)
每周安装次数
213
仓库
GitHub 星标数
35
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode185
codex184
cursor180
gemini-cli176
github-copilot168
claude-code164
Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue detection and actionable fixes.
ALWAYS use Webflow MCP tools for all operations:
webflow_guide_tool to get best practices before startingdata_sites_tool with action list_sites to identify available sitesdata_sites_tool with action get_site to retrieve site detailsdata_pages_tool with action list_pages to get all pageselement_tool with action get_all_elements to get detailed element information (requires Designer)element_tool with action add_or_update_attribute to fix accessibility issues (requires Designer)element_snapshot_tool to get visual previews of elementscontext parameter (15-25 words, third-person perspective)data_sites_tool with action list_sites to identify target sitedata_pages_tool with action list_pages to show available pagesde_page_tool with action switch_page to navigate to the page being auditedelement_tool with action get_all_elements for detailed analysis
include_style_properties: true to check focus stylesinclude_all_breakpoint_styles: false to minimize dataIcon-only buttons without labels (WCAG 4.1.2)
aria-label or aria-labelledbyaria-label attribute with descriptive textForm inputs without labels (WCAG 1.3.1)
* Find: Input, Select, Textarea elements
* Check: Missing associated label or `aria-label`
* Impact: Users don't know what input is for
* Fix: Add `aria-label` or associate with `<label>` using `id`
11. Non-semantic click handlers (WCAG 2.1.1)
* Find: Div or Span elements (identified by element type)
* Check: Interactive behavior without proper role/keyboard support
* Impact: Not keyboard accessible, screen readers miss interactivity
* Fix: Add `role="button"`, `tabIndex="0"`, suggest using real `<button>`
12. Links without destination (WCAG 2.1.1)
* Find: Link elements with no `href` attribute
* Check: Links that only use onClick without href
* Impact: Not keyboard accessible, breaks browser features
* Fix: Add proper `href` or convert to button
* Find: Elements with `outline: none` style
* Check: No visible alternative focus indicator
* Impact: Keyboard users can't see focus
* Fix: Add visible focus style (border, box-shadow, background change)
14. Missing keyboard handlers (WCAG 2.1.1)
* Find: Elements with onClick handlers
* Check: Missing onKeyDown for Enter/Space keys
* Impact: Not usable with keyboard alone
* Fix: Add keyboard event handlers
15. Touch target too small (WCAG 2.5.5)
* Find: Clickable elements (buttons, links)
* Check: Width or height < 44px
* Impact: Hard to tap on mobile devices
* Fix: Increase padding or min-width/min-height to 44px
* Find: Heading elements (h1-h6)
* Check: Skipped levels (h1 → h3, skipping h2)
* Impact: Confusing document structure
* Fix: Use proper sequential heading levels
17. Positive tabIndex (WCAG 2.4.3)
* Find: Elements with tabIndex > 0
* Check: Disrupts natural tab order
* Impact: Confusing keyboard navigation
* Fix: Use tabIndex="0" or "-1" only, let natural DOM order work
18. Role without required attributes (WCAG 4.1.2)
* Find: Elements with ARIA roles
* Check: Missing required ARIA attributes (e.g., role="button" without tabIndex)
* Impact: Incomplete accessibility semantics
* Fix: Add required attributes for role
* Critical: Must fix (blocks access)
* Serious: Should fix (significantly impacts usability)
* Moderate: Consider fixing (improves experience)
20. Calculate accessibility score (0-100):
* Start at 100
* Critical issue: -10 points each
* Serious issue: -5 points each
* Moderate issue: -2 points each
* Minimum score: 0
21. Generate severity summary :
* Total issues found
* Breakdown by severity
* Most common issue types
* Pages/sections most affected
Create detailed report with specific format:
═══════════════════════════════════════════════════ ACCESSIBILITY AUDIT: [Page Name] ═══════════════════════════════════════════════════
CRITICAL (X issues) ─────────────────── [A11Y] Element: Button "Submit" Issue: Button missing accessible name Location: Form section, element ID: {component: "abc", element: "xyz"} Current: <button><CloseIcon /></button> Fix: Add aria-label="Close" WCAG: 4.1.2 Name, Role, Value
[A11Y] Element: Input field Issue: Form input without label Location: Contact form, element ID: {component: "def", element: "uvw"} Current: <input type="email" /> Fix: Add aria-label="Email address" or associate with <label> WCAG: 1.3.1 Info and Relationships
SERIOUS (X issues) ────────────────── [A11Y] Element: Link "Read more" Issue: Focus outline removed without visible alternative Location: Blog section Current: outline: none Fix: Add visible focus style (e.g., border: 2px solid blue) WCAG: 2.4.7 Focus Visible
MODERATE (X issues) ─────────────────── [A11Y] Element: Heading Issue: Heading hierarchy skipped (h1 → h3) Location: Article section Current: <h3>Subsection</h3> after <h1>Title</h1> Fix: Change to <h2> or add intermediate h2 WCAG: 1.3.1 Info and Relationships
═══════════════════════════════════════════════════ SUMMARY ─────────────────────────────────────────────────── Total Issues: X
Accessibility Score: XX/100
Most Common Issues:
Provide actionable insights :
* Prioritized fix list (critical first)
* Quick wins (easy fixes with big impact)
* Design pattern recommendations
* Resources for learning more
Offer to fix issues automatically : Designer is already connected, so offer auto-fixes
Show preview of fixes :
Which issues would you like to fix?
[1] ✓ Add aria-label to Submit button Element: Button in contact form Fix: Add aria-label="Submit contact form" Safe: Yes (adding attribute only)
[2] ✓ Add aria-label to email input Element: Input in contact form Fix: Add aria-label="Email address" Safe: Yes
[3] ⚠️ Fix heading hierarchy Element: h3 in article section Fix: Change heading level from h3 to h2 Safe: May affect visual styling
Type numbers to skip (e.g., "3"), "all" for all, "none" to cancel
Apply approved fixes : Use element_tool with action add_or_update_attribute
* Process in batches
* Show progress for large fix sets
* Report success/failure for each
27. Generate post-fix report :
* Issues fixed: X
* Issues remaining: Y
* New accessibility score: XX/100 (improved from YY/100)
* Markdown (readable documentation)
* JSON (machine-readable for tracking)
* CSV (spreadsheet for team review)
29. Provide resources :
* WCAG 2.1 quick reference links
* Webflow accessibility best practices
* Recommended testing tools (browser extensions, screen readers)
✅ Button accessibility (labels, roles) ✅ Form input labels and associations ✅ Link semantics and keyboard access ✅ Focus visibility and keyboard navigation ✅ Heading hierarchy and structure ✅ ARIA roles and attributes ✅ Touch target sizes ✅ Interactive element semantics
❌ Image alt text (use asset-audit skill instead) ❌ Color contrast ratios (requires visual analysis) ❌ Animation/motion preferences ❌ Screen reader testing (needs manual verification) ❌ Content readability (language level, clarity)
User prompt:
Run an accessibility audit on my homepage
Step 1: Site & Page Selection
🔍 Accessibility Audit: Page Selection
I'll help you audit your homepage for accessibility issues.
First, let me get your site information...
Available sites:
1. Company Website
2. Portfolio Site
Which site? (1/2)
User response: 1
Step 2: Page Selection
Available pages in Company Website:
1. Home (/)
2. About (/about)
3. Contact (/contact)
4. Blog (/blog)
Which page would you like to audit? (1 for Home)
User response: 1
Step 3: Audit Scope
What level of audit would you like?
1. Full audit (all WCAG checks) - Recommended
2. Critical issues only (Level A compliance)
3. Specific categories (buttons, forms, navigation)
Your choice: (1/2/3)
User response: 1
Step 4: Audit Progress
🔄 Running Accessibility Audit...
Progress:
✅ Extracted page content (45 elements)
✅ Analyzing buttons and interactive elements
✅ Checking form inputs and labels
✅ Validating heading hierarchy
✅ Checking keyboard navigation
🔄 Analyzing focus states...
Analysis complete!
Step 5: Report
═══════════════════════════════════════════════════
ACCESSIBILITY AUDIT: Home
═══════════════════════════════════════════════════
CRITICAL (3 issues)
───────────────────
[A11Y] Element: Button (navigation toggle)
Issue: Icon-only button missing accessible name
Location: Header navigation
Element ID: {component: "nav-01", element: "btn-menu"}
Current: <button><MenuIcon /></button>
Fix: Add aria-label="Open navigation menu"
WCAG: 4.1.2 Name, Role, Value
[A11Y] Element: Input (email subscription)
Issue: Form input without label
Location: Footer, newsletter signup
Element ID: {component: "footer-01", element: "email-input"}
Current: <input type="email" placeholder="Enter email" />
Fix: Add aria-label="Email address for newsletter"
WCAG: 1.3.1 Info and Relationships
[A11Y] Element: Div (clickable card)
Issue: Non-semantic interactive element
Location: Services section, card 2
Element ID: {component: "services-01", element: "card-02"}
Current: <div onClick={...}>Service card</div>
Fix: Convert to <button> or add role="button" + tabIndex="0"
WCAG: 2.1.1 Keyboard
SERIOUS (5 issues)
──────────────────
[A11Y] Element: Link "Learn more"
Issue: Focus outline removed without visible alternative
Location: Hero section
Element ID: {component: "hero-01", element: "cta-link"}
Current: outline: none
Fix: Add focus style - border: 2px solid #0066cc or box-shadow
WCAG: 2.4.7 Focus Visible
[A11Y] Element: Button "Subscribe"
Issue: Touch target too small (30px × 36px)
Location: Footer newsletter form
Element ID: {component: "footer-01", element: "submit-btn"}
Current: Small button
Fix: Increase padding or set min-height: 44px
WCAG: 2.5.5 Target Size
[continues with 3 more serious issues...]
MODERATE (4 issues)
───────────────────
[A11Y] Element: Heading "Our Services"
Issue: Heading hierarchy skipped (h1 → h3)
Location: Services section
Element ID: {component: "services-01", element: "heading"}
Current: <h3>Our Services</h3> follows <h1>Welcome</h1>
Fix: Change to <h2> to maintain proper hierarchy
WCAG: 1.3.1 Info and Relationships
[continues with 3 more moderate issues...]
═══════════════════════════════════════════════════
SUMMARY
───────────────────────────────────────────────────
Total Issues: 12
- Critical: 3 issues (must fix)
- Serious: 5 issues (should fix)
- Moderate: 4 issues (consider fixing)
Accessibility Score: 64/100
Most Common Issues:
1. Missing button labels - 2 occurrences
2. Focus styles removed - 3 occurrences
3. Heading hierarchy problems - 2 occurrences
Quick Wins (Easy + High Impact):
✨ Add aria-label to icon buttons (2 min, +20 score points)
✨ Add input labels (5 min, +10 score points)
✨ Add focus styles (10 min, +15 score points)
═══════════════════════════════════════════════════
💡 Next Steps:
1. Fix critical issues first (blocks access for some users)
2. Add visible focus styles for keyboard users
3. Test with keyboard navigation (Tab, Enter, Space keys)
4. Consider testing with screen reader (NVDA/JAWS/VoiceOver)
Would you like me to help fix these issues? (requires Designer connection)
User prompt:
Audit accessibility across my entire site
Agent response:
🔍 Multi-Page Accessibility Audit
I'll audit all pages on your site for accessibility issues.
Found 8 pages:
1. Home
2. About
3. Services
4. Team
5. Blog
6. Blog Post Template (CMS)
7. Contact
8. Privacy Policy
This will take approximately 2-3 minutes.
Proceed with full site audit? (yes/no)
User: yes
Progress:
🔄 Auditing Site Accessibility...
Progress: ████████████░░░░░░░░ 60% (5/8 pages)
✅ Home - Score: 64/100 (12 issues)
✅ About - Score: 78/100 (6 issues)
✅ Services - Score: 71/100 (9 issues)
✅ Team - Score: 85/100 (4 issues)
✅ Blog - Score: 82/100 (5 issues)
🔄 Analyzing Blog Post Template...
Final Report:
═══════════════════════════════════════════════════
SITE-WIDE ACCESSIBILITY AUDIT
═══════════════════════════════════════════════════
OVERALL SCORE: 73/100
Pages Audited: 8
Total Issues: 48
- Critical: 11 issues
- Serious: 21 issues
- Moderate: 16 issues
═══════════════════════════════════════════════════
ISSUES BY PAGE
═══════════════════════════════════════════════════
🔴 Lowest Scores (Need Attention):
1. Home - 64/100 (12 issues: 3 critical, 5 serious, 4 moderate)
2. Services - 71/100 (9 issues: 2 critical, 5 serious, 2 moderate)
3. About - 78/100 (6 issues: 1 critical, 3 serious, 2 moderate)
🟢 Highest Scores:
1. Team - 85/100 (4 issues: 0 critical, 2 serious, 2 moderate)
2. Blog - 82/100 (5 issues: 1 critical, 2 serious, 2 moderate)
═══════════════════════════════════════════════════
SITE-WIDE PATTERNS
═══════════════════════════════════════════════════
Most Common Issues Across Site:
1. Missing button labels (icon buttons) - 8 occurrences
Pages affected: Home, Services, Blog, Contact
2. Focus outline removed - 12 occurrences
Pages affected: All pages (site-wide CSS issue)
3. Form inputs without labels - 5 occurrences
Pages affected: Home, Contact
4. Small touch targets (<44px) - 9 occurrences
Pages affected: Home, About, Services, Contact
═══════════════════════════════════════════════════
RECOMMENDATIONS
═══════════════════════════════════════════════════
🎯 Site-Wide Fixes (Fix Once, Helps Everywhere):
1. Add focus styles to global CSS (affects 12 issues across all pages)
2. Update button component to require aria-label (affects 8 issues)
3. Increase minimum touch target size in design system (affects 9 issues)
📋 Page-Specific Priorities:
1. Home page: Fix navigation menu button and newsletter form
2. Services page: Add labels to service card interactions
3. Contact page: Add proper labels to all form inputs
💡 Design System Improvements:
- Create accessible button component with required aria-label
- Add focus state variants to all interactive components
- Set minimum touch target size standard (44px)
Would you like:
1. Detailed report for specific page
2. Export findings to file (Markdown/JSON/CSV)
3. Help fixing site-wide issues (requires Designer)
User prompt:
Check my contact page for critical accessibility issues only
Agent response:
🔍 Critical Issues Audit: Contact Page
Running quick scan for blocking accessibility issues...
✅ Page analyzed
═══════════════════════════════════════════════════
CRITICAL ISSUES: Contact Page
═══════════════════════════════════════════════════
Found: 4 critical issues
[1] Form Input Missing Label
Element: Email input field
Location: Contact form, top
Issue: No accessible name for screen readers
Fix: Add aria-label="Your email address"
WCAG: 1.3.1 (Level A)
[2] Form Input Missing Label
Element: Message textarea
Location: Contact form, bottom
Issue: No accessible name for screen readers
Fix: Add aria-label="Your message"
WCAG: 1.3.1 (Level A)
[3] Button Missing Label
Element: Submit button
Location: Contact form, bottom
Issue: Icon-only button with no text
Fix: Add aria-label="Submit contact form"
WCAG: 4.1.2 (Level A)
[4] Non-Semantic Interactive Element
Element: Social media link (Instagram)
Location: Footer
Issue: Div with onClick instead of proper link
Fix: Convert to <a href="..."> with aria-label="Instagram"
WCAG: 2.1.1 (Level A)
═══════════════════════════════════════════════════
⚠️ Impact: These issues prevent screen reader users from using your contact form.
🔧 Estimated fix time: 5 minutes
Would you like me to:
1. Run full audit (includes serious and moderate issues)
2. Fix these 4 critical issues now (requires Designer)
3. Export this report (Markdown/JSON/CSV)
Weekly Installs
213
Repository
GitHub Stars
35
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode185
codex184
cursor180
gemini-cli176
github-copilot168
claude-code164
后端测试指南:API端点、业务逻辑与数据库测试最佳实践
11,800 周安装