accessibility-auditing

无障碍审计

使用 Cursor 内置的浏览器审计网页的无障碍问题，无需使用外部工具。

工作流

1. 打开页面

使用 browser_navigate 打开目标 URL。

2. 捕获无障碍树

使用 browser_snapshot——它会返回页面的 aria／无障碍树。这与屏幕阅读器使用的树相同。

3. 审计树

检查以下问题：

缺少标签

• 没有可访问名称的 button 元素（没有文本，也没有 aria-label）
• 没有 alt 文本的 img 元素
• 没有关联 label 或 aria-label 的 input 元素
• 没有文本内容的 a（链接）元素
• 缺少 aria-label 的纯图标按钮

语义化 HTML

• 可点击的 div 或 span 元素 → 应使用 button 或 a
• 缺少 nav、main、header、footer 地标
• 标题级别跳跃（h1 → h3）
• 列表未使用 ul／ol／li

键盘导航

• 交互元素未包含在 Tab 顺序中
• 自定义控件没有 role 和键盘事件处理器
• 模态框中的焦点陷阱（应限制焦点，但也应允许按 Escape 关闭）
• 缺少跳转到内容的链接

ARIA 问题

• 对可聚焦元素设置了 aria-hidden="true"
• 无效的 role 值
• 设置了 aria-expanded，但没有对应的可折叠内容
• aria-controls 指向不存在的 ID

对比度（使用截图进行视觉检查）

• 白色背景上的浅灰色文本
• 颜色过浅的占位符文本
• 难以区分的禁用状态

4. 测试键盘导航

使用 browser_press 模拟按 Tab 键，并验证：

• 每个交互元素都能获得焦点
• 焦点顺序符合逻辑（从上到下、从左到右）
• 焦点清晰可见（焦点环或轮廓）
• 按 Escape 可关闭模态框／下拉菜单

5. 报告

Accessibility Audit:
  Critical:
    - 3 buttons with no accessible name (header icons)
    - Login form inputs missing labels
  Warnings:
    - Heading levels skip from h1 to h3
    - No skip-to-content link
    - 2 clickable divs should be buttons
  Passed:
    - All images have alt text
    - Landmarks present (nav, main, footer)
    - Focus order is logical

6. 修复

针对每个问题，在源代码中应用修复。常见修复方式：

• 为图标按钮添加 aria-label="Close"
• 将输入框放在 <label> 中，或添加 htmlFor
• 将 <div onClick> 改为 <button>
• 为图片添加 alt 文本
• 修正标题层级