accessibility-auditing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Accessibility Auditing

无障碍审计

Audit a web page for accessibility issues using Cursor's built-in browser without external tools.

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

Workflow

工作流程

1. Open the Page

1. 打开页面

Use

browser_navigate

to open the target URL.

使用

browser_navigate

打开目标URL。

2. Capture the Accessibility Tree

2. 捕获无障碍树

Use

browser_snapshot

— this returns the aria/accessibility tree of the page. This is the same tree that screen readers use.

使用

browser_snapshot

——这会返回页面的aria/无障碍树，与屏幕阅读器使用的树一致。

3. Audit the Tree

3. 审核树结构

Check for these issues:

Missing Labels

```
button
```
elements with no accessible name (no text, no
```
aria-label
```
)
```
img
```
elements with no
```
alt
```
text
```
input
```
elements with no associated
```
label
```
or
```
aria-label
```
```
a
```
(link) elements with no text content
Icon-only buttons missing
```
aria-label
```

Semantic HTML

Clickable
```
div
```
or
```
span
```
elements → should be
```
button
```
or
```
a
```
Missing
```
nav
```
,
```
main
```
,
```
header
```
,
```
footer
```
landmarks
Headings that skip levels (h1 → h3)
Lists that aren't using
```
ul
```
/
```
ol
```
/
```
li
```

Keyboard Navigation

Interactive elements missing from tab order
Custom widgets without
```
role
```
and keyboard handlers
Focus traps in modals (should trap focus, but also allow Escape to close)
Skip-to-content link missing

ARIA Issues

```
aria-hidden="true"
```
on focusable elements
Invalid
```
role
```
values
```
aria-expanded
```
without corresponding collapsible content
```
aria-controls
```
pointing to non-existent IDs

Contrast (use screenshot for visual check)

Light gray text on white backgrounds
Placeholder text that's too faint
Disabled states that are indistinguishable

检查以下问题：

缺失标签

无可访问名称的
```
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. Test Keyboard Navigation

4. 测试键盘导航

Use

browser_press

to simulate Tab key presses and verify:

Every interactive element receives focus
Focus order is logical (top-to-bottom, left-to-right)
Focus is visible (focus ring or outline)
Escape closes modals/dropdowns

使用

browser_press

模拟Tab键按下，验证：

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

5. Report

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

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. Fix

6. 修复

For each issue, apply the fix in the source code. Common fixes:

Add
```
aria-label="Close"
```
to icon buttons
Wrap inputs in
```
<label>
```
or add
```
htmlFor
```
Change
```
<div onClick>
```
to
```
<button>
```
Add
```
alt
```
text to images
Fix heading hierarchy

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

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