用 Cursor 内置浏览器做网页可访问性审计：检查缺失标签…

在 Cursor 中打开网页后，用 aria/accessibility 快照和键盘模拟快速审计常见可访问性问题并给出修复清单。

适用场景

解决思路

1. 使用 browser_navigate 打开目标 URL。
2. 使用 browser_snapshot 捕获页面的 aria/accessibility tree；这是屏幕阅读器使用的同一棵树。
3. 审计该树，检查缺失标签：button 元素无可访问名称（无文本、无 aria-label）。
4. 缺失标签：img 元素无 alt 文本。
5. 缺失标签：input 元素无关联的 label 或 aria-label。
6. 缺失标签：a（链接）元素无文本内容。
7. 缺失标签：仅图标按钮缺少 aria-label。
8. 语义 HTML：可点击的 div 或 span 应改为 button 或 a。
9. 语义 HTML：缺少 nav、main、header、footer 地标。
10. 语义 HTML：标题层级跳跃（h1 → h3）。
11. 语义 HTML：列表未使用 ul/ol/li。
12. 键盘导航：交互元素未出现在 tab 顺序中。
13. 键盘导航：自定义组件没有 role 和键盘处理程序。
14. 键盘导航：模态框中的焦点陷阱（应困住焦点，但也要允许按 Escape 关闭）。
15. 键盘导航：缺少 skip-to-content 链接。
16. ARIA 问题：可聚焦元素上使用 aria-hidden="true"。
17. ARIA 问题：无效的 role 值。
18. ARIA 问题：aria-expanded 没有对应的可折叠内容。
19. ARIA 问题：aria-controls 指向不存在的 ID。
20. 对比度（使用 screenshot 做视觉检查）：白底上的浅灰色文本。
21. 对比度：placeholder 文本太淡。
22. 对比度：禁用状态难以区分。
23. 使用 browser_press 模拟 Tab 键按下，并验证：每个交互元素都能获得焦点。
24. 键盘测试：焦点顺序符合逻辑（从上到下、从左到右）。
25. 键盘测试：焦点可见（focus ring 或 outline）。
26. 键盘测试：Escape 能关闭模态框/下拉菜单。
27. 按模板报告：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
28. 针对每个问题，在源代码中应用修复。常见修复：为图标按钮添加 aria-label="Close"。
29. 常见修复：将 input 包裹在 <label> 中或添加 htmlFor。
30. 常见修复：将 <div onClick> 改为 <button>。
31. 常见修复：为图片添加 alt 文本。
32. 常见修复：修复标题层级。

适用边界 · 注意事项

• 无法使用 Cursor 内置浏览器工具时，不要用此流程。
• 需要完整 WCAG 合规认证或跨浏览器/屏幕阅读器真机测试时，不能只依赖 aria snapshot。
• 目标不是网页（如原生移动应用/桌面应用）时不适用。