accessibility-audit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Accessibility Audit

无障碍审计

Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue detection and actionable fixes.

针对Webflow页面的全面WCAG 2.1无障碍审计，包含详细的问题检测和可执行的修复方案。

Important Note

重要说明

ALWAYS use Webflow MCP tools for all operations:

Use Webflow MCP's
```
webflow_guide_tool
```
to get best practices before starting
Use Webflow MCP's
```
data_sites_tool
```
with action
```
list_sites
```
to identify available sites
Use Webflow MCP's
```
data_sites_tool
```
with action
```
get_site
```
to retrieve site details
Use Webflow MCP's
```
data_pages_tool
```
with action
```
list_pages
```
to get all pages
Use Webflow MCP's
```
element_tool
```
with action
```
get_all_elements
```
to get detailed element information (requires Designer)
Use Webflow MCP's
```
element_tool
```
with action
```
add_or_update_attribute
```
to fix accessibility issues (requires Designer)
Use Webflow MCP's
```
element_snapshot_tool
```
to get visual previews of elements
DO NOT use any other tools or methods for Webflow operations
All tool calls must include the required
```
context
```
parameter (15-25 words, third-person perspective)
Designer connection required - This skill needs Designer to access element attributes and styles

所有操作务必使用Webflow MCP工具：

开始前使用Webflow MCP的
```
webflow_guide_tool
```
获取最佳实践
使用Webflow MCP的
```
data_sites_tool
```
并设置action为
```
list_sites
```
来识别可用站点
使用Webflow MCP的
```
data_sites_tool
```
并设置action为
```
get_site
```
来获取站点详情
使用Webflow MCP的
```
data_pages_tool
```
并设置action为
```
list_pages
```
来获取所有页面
使用Webflow MCP的
```
element_tool
```
并设置action为
```
get_all_elements
```
来获取详细元素信息（需要Designer）
使用Webflow MCP的
```
element_tool
```
并设置action为
```
add_or_update_attribute
```
来修复无障碍问题（需要Designer）
使用Webflow MCP的
```
element_snapshot_tool
```
获取元素的可视化预览
禁止使用任何其他工具或方法进行Webflow操作
所有工具调用必须包含必填的
```
context
```
参数（15-25个单词，第三人称视角）
需要连接Designer - 该技能需要Designer来访问元素属性和样式

Instructions

阶段1：站点与页面选择

Phase 1: Site & Page Selection

—

Get site information: Use Webflow MCP's
```
data_sites_tool
```
with action
```
list_sites
```
to identify target site
Ask for page selection:
- If user provides page ID, use it directly
- Otherwise, use
```
data_pages_tool
```
  with action
```
list_pages
```
  to show available pages
- Let user select which page(s) to audit
Confirm audit scope: Ask user what to check:
- Full audit (all accessibility checks)
- Critical issues only (WCAG Level A)
- Specific categories (forms, buttons, navigation, etc.)

获取站点信息：使用Webflow MCP的
```
data_sites_tool
```
并设置action为
```
list_sites
```
来确定目标站点
请求选择页面：
- 如果用户提供页面ID，直接使用
- 否则，使用
```
data_pages_tool
```
  并设置action为
```
list_pages
```
  展示可用页面
- 让用户选择要审计的页面
确认审计范围：询问用户要检查的内容：
- 全面审计（所有无障碍检查项）
- 仅关键问题（WCAG A级）
- 特定类别（表单、按钮、导航等）

Phase 2: Element Extraction & Analysis

阶段2：元素提取与分析

Ensure Designer is connected: Before proceeding, verify Webflow Designer is open and connected
- If not connected, instruct user to open Designer and connect
- This is required to access element attributes and styles
Switch to target page: Use
```
de_page_tool
```
with action
```
switch_page
```
to navigate to the page being audited
Extract all elements: Use
```
element_tool
```
with action
```
get_all_elements
```
for detailed analysis
- Set
```
include_style_properties: true
```
  to check focus styles
- Set
```
include_all_breakpoint_styles: false
```
  to minimize data
Parse element data: Identify interactive and content elements:
- Buttons (Button, LinkBlock with button role)
- Links (TextLink, Link, LinkBlock)
- Form inputs (Input, Select, Textarea)
- Headings (Heading elements with levels)
- Interactive divs/spans (check for onClick or interactive roles)
- Images (Image elements) - SKIP for this audit
Extract attributes for each element:
- ARIA attributes (aria-label, aria-describedby, role, tabIndex)
- DOM attributes (id, domId, href, type, placeholder)
- Text content
- Style properties (outline, border for focus states)
- Element metadata (canHaveAttributes, tag name)

确保已连接Designer：继续操作前，验证Webflow Designer是否已打开并连接
- 如果未连接，指导用户打开并连接Designer
- 这是访问元素属性和样式的必要条件
切换到目标页面：使用
```
de_page_tool
```
并设置action为
```
switch_page
```
导航到要审计的页面
提取所有元素：使用
```
element_tool
```
并设置action为
```
get_all_elements
```
进行详细分析
- 设置
```
include_style_properties: true
```
  以检查焦点样式
- 设置
```
include_all_breakpoint_styles: false
```
  以减少数据量
解析元素数据：识别交互元素和内容元素：
- 按钮（Button、带有button角色的LinkBlock）
- 链接（TextLink、Link、LinkBlock）
- 表单输入框（Input、Select、Textarea）
- 标题（带层级的Heading元素）
- 交互式div/span（检查是否有onClick或交互角色）
- 图片（Image元素）- 本次审计跳过
提取每个元素的属性：
- ARIA属性（aria-label、aria-describedby、role、tabIndex）
- DOM属性（id、domId、href、type、placeholder）
- 文本内容
- 样式属性（outline、border用于检查焦点状态）
- 元数据（canHaveAttributes、标签名）

Phase 3: Accessibility Checks

阶段3：无障碍检查

Critical Issues (Must Fix - WCAG Level A)

关键问题（必须修复 - WCAG A级）

Icon-only buttons without labels (WCAG 4.1.2)
- Find: Button elements with no text content
- Check: Missing
```
aria-label
```
  or
```
aria-labelledby
```
- Impact: Screen readers cannot identify button purpose
- Fix: Add
```
aria-label
```
  attribute with descriptive text
Form 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
```
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>
```
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

仅含图标的按钮无标签（WCAG 4.1.2）
- 查找：无文本内容的Button元素
- 检查：缺少
```
aria-label
```
  或
```
aria-labelledby
```
- 影响：屏幕阅读器无法识别按钮用途
- 修复：添加带有描述性文本的
```
aria-label
```
  属性
表单输入框无标签（WCAG 1.3.1）
- 查找：Input、Select、Textarea元素
- 检查：缺少关联标签或
```
aria-label
```
- 影响：用户不知道输入框的用途
- 修复：添加
```
aria-label
```
  或使用
```
id
```
  与
```
<label>
```
  关联
非语义化点击处理器（WCAG 2.1.1）
- 查找：Div或Span元素（通过元素类型识别）
- 检查：具有交互行为但缺少合适的角色/键盘支持
- 影响：无法通过键盘访问，屏幕阅读器无法识别交互性
- 修复：添加
```
role="button"
```
  、
```
tabIndex="0"
```
  ，建议使用原生
```
<button>
```
无目标的链接（WCAG 2.1.1）
- 查找：缺少
```
href
```
  属性的Link元素
- 检查：仅使用onClick而无href的链接
- 影响：无法通过键盘访问，破坏浏览器功能
- 修复：添加合适的
```
href
```
  或转换为按钮

Serious Issues (Should Fix - WCAG Level AA)

严重问题（建议修复 - WCAG AA级）

Focus outline removed without replacement (WCAG 2.4.7)
- 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)
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
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

移除焦点轮廓但未提供替代方案（WCAG 2.4.7）
- 查找：带有
```
outline: none
```
  样式的元素
- 检查：无可见的替代焦点指示器
- 影响：键盘用户无法看到焦点位置
- 修复：添加可见的焦点样式（边框、阴影、背景变化）
缺少键盘处理器（WCAG 2.1.1）
- 查找：带有onClick处理器的元素
- 检查：缺少Enter/Space键的onKeyDown事件
- 影响：无法仅通过键盘使用
- 修复：添加键盘事件处理器
触摸目标过小（WCAG 2.5.5）
- 查找：可点击元素（按钮、链接）
- 检查：宽度或高度小于44px
- 影响：移动设备上难以点击
- 修复：增加内边距或设置min-width/min-height为44px

Moderate Issues (Consider Fixing)

中等问题（考虑修复）

Heading hierarchy problems (WCAG 1.3.1)
- Find: Heading elements (h1-h6)
- Check: Skipped levels (h1 → h3, skipping h2)
- Impact: Confusing document structure
- Fix: Use proper sequential heading levels
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
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

标题层级问题（WCAG 1.3.1）
- 查找：标题元素（h1-h6）
- 检查：层级跳跃（如h1直接到h3，跳过h2）
- 影响：文档结构混乱
- 修复：使用正确的连续标题层级
正的tabIndex值（WCAG 2.4.3）
- 查找：tabIndex > 0的元素
- 检查：破坏自然的Tab顺序
- 影响：键盘导航混乱
- 修复：仅使用tabIndex="0"或"-1"，依靠自然DOM顺序
缺少必填属性的角色（WCAG 4.1.2）
- 查找：带有ARIA角色的元素
- 检查：缺少必填的ARIA属性（如role="button"但无tabIndex）
- 影响：无障碍语义不完整
- 修复：为角色添加必填属性

Phase 4: Issue Categorization & Scoring

阶段4：问题分类与评分

Categorize all findings:
- Critical: Must fix (blocks access)
- Serious: Should fix (significantly impacts usability)
- Moderate: Consider fixing (improves experience)
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
Generate severity summary:
- Total issues found
- Breakdown by severity
- Most common issue types
- Pages/sections most affected

对所有发现的问题分类：
- 关键：必须修复（阻碍访问）
- 严重：建议修复（严重影响可用性）
- 中等：考虑修复（提升体验）
计算无障碍评分（0-100）：
- 初始分为100
- 每个关键问题：扣10分
- 每个严重问题：扣5分
- 每个中等问题：扣2分
- 最低分为0
生成严重程度摘要：
- 发现的问题总数
- 按严重程度细分
- 最常见的问题类型
- 受影响最严重的页面/区域

Phase 5: Report Generation

阶段5：报告生成

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
- Critical: X issues
- Serious: X issues
- Moderate: X issues

Accessibility Score: XX/100

Most Common Issues:
1. [Issue type] - X occurrences
2. [Issue type] - X occurrences
3. [Issue type] - X occurrences
═══════════════════════════════════════════════════

Provide actionable insights:
- Prioritized fix list (critical first)
- Quick wins (easy fixes with big impact)
- Design pattern recommendations
- Resources for learning more

创建特定格式的详细报告：

═══════════════════════════════════════════════════
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
- Critical: X issues
- Serious: X issues
- Moderate: X issues

Accessibility Score: XX/100

Most Common Issues:
1. [Issue type] - X occurrences
2. [Issue type] - X occurrences
3. [Issue type] - X occurrences
═══════════════════════════════════════════════════

提供可执行的建议：
- 按优先级排列的修复列表（关键问题优先）
- 快速修复项（易实施且影响大）
- 设计模式建议
- 学习资源链接

Phase 6: Fix Suggestions & Approval (Optional)

阶段6：修复建议与确认（可选）

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
Generate post-fix report:
- Issues fixed: X
- Issues remaining: Y
- New accessibility score: XX/100 (improved from YY/100)

提供自动修复选项：Designer已连接，可提供自动修复

展示修复预览：

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

应用已确认的修复：使用
```
element_tool
```
并设置action为
```
add_or_update_attribute
```
- 分批处理
- 针对大量修复任务展示进度
- 报告每个修复的成功/失败情况
生成修复后报告：
- 已修复问题数：X
- 剩余问题数：Y
- 新的无障碍评分：XX/100（较之前的YY/100有所提升）

Phase 7: Export & Resources (Optional)

阶段7：导出与资源（可选）

Offer export formats:
- Markdown (readable documentation)
- JSON (machine-readable for tracking)
- CSV (spreadsheet for team review)
Provide resources:
- WCAG 2.1 quick reference links
- Webflow accessibility best practices
- Recommended testing tools (browser extensions, screen readers)

提供导出格式选项：
- Markdown（易读的文档格式）
- JSON（便于跟踪的机器可读格式）
- CSV（供团队评审的电子表格格式）
提供资源：
- WCAG 2.1速查链接
- Webflow无障碍最佳实践
- 推荐测试工具（浏览器扩展、屏幕阅读器）

Important Considerations

重要注意事项

What This Skill Checks

本技能检查的内容

✅ 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

✅ 按钮无障碍性（标签、角色） ✅ 表单输入框标签与关联 ✅ 链接语义与键盘访问 ✅ 焦点可见性与键盘导航 ✅ 标题层级与结构 ✅ ARIA角色与属性 ✅ 触摸目标大小 ✅ 交互元素语义

What This Skill Does NOT Check

本技能不检查的内容

❌ 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)

❌ 图片替代文本（请使用asset-audit技能） ❌ 颜色对比度（需要视觉分析） ❌ 动画/动效偏好 ❌ 屏幕阅读器测试（需要手动验证） ❌ 内容可读性（语言水平、清晰度）

Limitations

局限性

Cannot detect visual-only issues (color contrast, small text)
Cannot test actual screen reader behavior
Cannot validate content quality or clarity
Relies on element attributes and structure only

无法检测仅视觉层面的问题（颜色对比度、小文本）
无法测试实际的屏幕阅读器行为
无法验证内容质量或清晰度
仅依赖元素属性和结构

Examples

示例

Example 1: Full Page Audit

示例1：单页审计

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:

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:

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:

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:

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:

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:

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:

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)

Example 2: Multi-Page Audit

示例2：多页审计

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:

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)

Example 3: Critical Issues Only

示例3：仅关键问题审计

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)

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)

Safety Rules

安全规则

Preview & Confirmation

预览与确认

Always show detailed issue list before suggesting fixes
Clearly mark severity levels (critical/serious/moderate)
Explain impact of each issue in user-friendly terms
Provide specific WCAG reference for each finding

建议修复前始终展示详细的问题列表
清晰标记严重程度（关键/严重/中等）
用用户易懂的语言解释每个问题的影响
为每个发现的问题提供具体的WCAG参考

Granular Approval for Fixes

修复的精细化确认

Allow user to select which issues to fix
Warn about fixes that might affect visual design
Process fixes in batches with progress indicators
Report success/failure for each fix attempt

允许用户选择要修复的问题
警告可能影响视觉设计的修复
分批处理修复并展示进度指示器
报告每个修复尝试的成功/失败情况

Error Handling

错误处理

If page cannot be accessed, explain clearly
If Designer not connected, list limitations
If element cannot be modified, suggest manual fix
Separate automated fixes from manual review items

如果无法访问页面，清晰说明原因
如果未连接Designer，列出局限性
如果无法修改元素，建议手动修复
将自动修复项与手动审核项分开

Validation

验证

Verify element types before suggesting fixes
Check if element supports attributes before adding
Test that suggested fixes are valid for element type
Warn if fix might break existing functionality

建议修复前验证元素类型
添加属性前检查元素是否支持该属性
测试建议的修复对元素类型是否有效
警告修复可能破坏现有功能

Output Standards

输出标准

Icons & Formatting

图标与格式

🔍 Discovery/Analysis
🔄 Processing
✅ Pass/Success
❌ Fail/Critical Issue
⚠️ Warning/Serious Issue
💡 Suggestion/Moderate Issue
📊 Report/Summary
🎯 Priority/Action Item
🔴 Critical Priority
🟡 Medium Priority
🟢 Low Priority

🔍 发现/分析
🔄 处理中
✅ 通过/成功
❌ 失败/关键问题
⚠️ 警告/严重问题
💡 建议/中等问题
📊 报告/摘要
🎯 优先级/行动项
🔴 高优先级
🟡 中优先级
🟢 低优先级

Report Structure

报告结构

Clear severity categorization
Specific element identification with IDs
Current state vs recommended fix
WCAG reference for each issue
Summary with actionable priorities
Score for measurable progress

清晰的严重程度分类
带ID的特定元素识别
当前状态与建议修复对比
每个问题的WCAG参考
带可执行优先级的摘要
用于衡量进度的评分

Communication

沟通规范

Use clear, jargon-free language
Explain WHY something is an issue (impact on users)
Provide specific, actionable fixes
Encourage testing with real assistive technology
Emphasize that automated checks are just the start

使用清晰、无术语的语言
解释问题存在的原因（对用户的影响）
提供具体、可执行的修复方案
鼓励使用真实辅助技术进行测试
强调自动化检查只是起点

Resources to Include

包含的资源

WCAG 2.1 Quick Reference

WCAG 2.1速查

https://www.w3.org/WAI/WCAG21/quickref/

https://www.w3.org/WAI/WCAG21/quickref/

Webflow Accessibility Resources

Webflow无障碍资源

Webflow University: Accessibility best practices
Using semantic HTML in Webflow
Adding ARIA attributes in Webflow

Webflow University：无障碍最佳实践
Webflow中的语义化HTML使用
Webflow中添加ARIA属性

Testing Tools

测试工具

Keyboard: Tab, Shift+Tab, Enter, Space
Screen readers: NVDA (Windows), JAWS, VoiceOver (Mac/iOS)
Browser extensions: axe DevTools, WAVE, Lighthouse

键盘：Tab、Shift+Tab、Enter、Space
屏幕阅读器：NVDA（Windows）、JAWS、VoiceOver（Mac/iOS）
浏览器扩展：axe DevTools、WAVE、Lighthouse

Common Fixes

常见修复方案

Button labels: Always include visible text or aria-label
Form labels: Use Webflow's label element or aria-label
Focus styles: Use :focus-visible pseudo-class
Semantic HTML: Use proper elements (button, a, label)

按钮标签：始终包含可见文本或aria-label
表单标签：使用Webflow的label元素或aria-label
焦点样式：使用:focus-visible伪类
语义化HTML：使用合适的元素（button、a、label）