← 返回功能
Pro

无障碍检查器

Accessibility Inspector 对任意网页自动执行 WCAG 2.1 Level AA 检查,并生成按类别分类的无障碍问题报告。一键检测颜色 contrast ratio 不足、缺失图片 alt text、不正确的 ARIA role 及属性、表单标签缺失、keyboard navigation 问题以及缺少地标区域——每个问题均支持一键高亮对应元素。

Web 无障碍并非可选项——在许多司法管辖区它是法律要求,对全球 15% 的残障人士而言更是不可或缺。然而无障碍问题在日常开发和测试中往往不可见。一个按钮看起来正常,但如果它只是一个没有 role 属性的样式化 div,screen reader 将完全无法访问。文字对你来说可能清晰可读,但对于低视力用户而言可能未达到 contrast ratio 要求。Accessibility Inspector 自动发现这些隐性问题。它检查数十项 WCAG 2.1 Level AA 标准,包括颜色 contrast ratio(普通文字最低 4.5:1,大号文字 3:1)、图片 alt text 缺失、表单输入标签缺失、不正确的 ARIA role 及属性、缺少文档地标(nav、main、footer)以及 keyboard focus 指示器。每个问题均包含受影响元素、具体违反的 WCAG 标准,以及修复建议。点击任意问题可在页面上高亮对应元素。

实时预览
example.com/app
Accessibility Audit
3 Errors5 Warnings12 Passed
Missing alt text on 3 images
Images must have an alt attribute for screen readers. Show elements →
Contrast ratio too low (2.1:1)
Text on .hero-subtitle fails WCAG AA (minimum 4.5:1). Show element →
Form input missing label
input#email has no associated label element. Show element →
Missing landmark regions
Page lacks main and nav landmark elements. Learn more →
12 checks passed
Language attribute, heading hierarchy, link text, focus indicators...
关键功能

WCAG 2.1 Level AA 检查

针对 WCAG 2.1 Level AA 成功标准自动执行检查,涵盖可感知性、可操作性、可理解性和健壮性四大类别。每项检查显示具体标准(如 1.4.3 对比度、1.1.1 非文本内容)及通过/失败状态。

颜色 contrast ratio 分析

计算页面上每个文本元素的前景色与背景色之间的 contrast ratio。标记普通文字低于 4.5:1 或大号文字(18px+ 或 14px+ 粗体)低于 3:1 的元素,同时显示实际比率与最低要求。

图片 alt text 审计

扫描每个 img、svg 及 image role 元素。标记缺失 alt 属性、非装饰性图片的空 alt,以及过于泛化的 alt text(如 "image"、"photo")。建议每张图片应使用描述性 alt、空 alt(装饰性图片)或 role="presentation"。

ARIA 与语义化 HTML

检查不正确的 ARIA role 使用(role 应用于错误元素)、缺少必需的 ARIA 属性(如图标按钮缺少 aria-label)、aria-labelledby 引用的重复 ID,以及缺少地标区域(无 main、无 nav)。并推荐对应的语义化 HTML 替代方案。

表单标签验证

确保每个表单输入(text、email、password、checkbox、select)都有关联标签——通过 for/id 配对的 label 元素、aria-label 或 aria-labelledby 均可。未标记的输入对 screen reader 完全不可访问。

问题分类与优先级

问题分为三类:错误(必须修复——访问障碍)、警告(建议修复——潜在障碍)、通过(已确认可访问)。错误数量突出显示。点击任意问题可在页面上高亮受影响元素。

常见用例

上线前无障碍审计

在新页面或功能上线前,运行 Accessibility Inspector 尽早发现问题。缺失 alt text、未标记表单字段和 contrast ratio 违规在开发阶段容易修复,但在生产环境中发现代价高昂。

法律合规核查

许多司法管辖区要求符合 WCAG 2.1 Level AA 标准(美国的 ADA、欧盟的 EAA)。在面向公众的页面上运行检查器,在合规缺口演变为法律风险前及时识别。

集成到 QA 测试流程

将无障碍检查纳入 QA 流程的一部分。在视觉 QA 和功能测试完成后,运行 Accessibility Inspector,验证实现未引入无障碍回归问题。

团队成员无障碍培训

在团队会议中对当前网站运行检查器,展示真实的无障碍问题。可视化高亮与清晰的说明有助于开发者理解什么是符合无障碍标准的 HTML 结构,以及为何它至关重要。

第三方内容审计

审计包含第三方 widget、嵌入内容或用户生成 HTML 的页面。这些来源通常会引入无障碍问题(缺失 alt text、contrast ratio 违规),而作为页面所有者,你仍需对此负责。

如何使用
1

启动 Accessibility Inspector

打开 DevSuite Pro 浮动 dock,点击 Accessibility Inspector 图标。工具将扫描页面 DOM,检测无障碍问题。

2

查看审计报告

页面显示按类别分组的报告:错误(红色)、警告(黄色)、通过(绿色)。每个分区列出具体问题、受影响元素及 WCAG 标准参考。

3

点击问题高亮元素

点击任意问题,页面上对应元素将以彩色边框高亮并自动滚动到视图中。报告与 DOM 元素之间的关联即时呈现。

4

查看修复建议

每个问题包含具体修复建议,例如:为图片添加描述性 alt text、将字体颜色 contrast ratio 提高至至少 4.5:1、添加 for='email' 的 label 元素。

5

修复并重新扫描

在代码中进行修改,重新加载页面,再次运行审计。随着问题逐一解决,错误数量应持续减少。目标是将错误数降至零。

准备好尝试了吗? 无障碍检查器?

免费安装 DevSuite Pro,为您的浏览器解锁 39 多个开发者工具。

添加到 Chrome 添加到 Edge 添加到 FireFox