# 无障碍合规检测器

检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议

> 标准页面: https://elysiatools.com/zh/tools/accessibility-checker

- **分类:** Validation

- **关键词:** accessibility, wcag, contrast, alt text, keyboard, a11y

## 概述

无障碍合规检测器是一款专为开发者和设计师打造的实用工具，支持快速检测 HTML 代码片段、网页 URL 或设计稿图片中的常见 WCAG 2.1 无障碍问题。通过自动扫描缺失的 alt 标签、空按钮、表单控件缺陷以及色彩对比度风险，该工具能生成直观的检测报告，并提供可直接落地的修复建议，帮助您轻松满足 WCAG AA 或 AAA 级合规要求，提升产品的普适性与用户体验。

## 输入项

- **HTML 输入** (textarea)
- **页面 URL** (text): https://example.com
- **设计稿图片** (file)
- **WCAG 等级** (select)

## 适用场景

- 在前端开发阶段，需要快速验证 HTML 代码片段是否遗漏了无障碍标签（如 alt 属性或 aria 标签）时。
- 在 UI 设计评审阶段，需要评估设计稿图片中的文本与背景色彩对比度是否符合 WCAG 标准时。
- 在网站上线前，需要对特定网页 URL 进行快速的无障碍基线扫描以排查合规风险时。

## 工作原理

- 选择输入方式：粘贴 HTML 代码片段、输入网页 URL，或上传设计稿图片（支持 PNG、JPEG、WEBP、SVG 格式）。
- 选择目标合规等级：在下拉菜单中指定需要满足的 WCAG AA 或 WCAG AAA 标准。
- 工具将自动解析输入内容，扫描缺失的语义标签、空链接/按钮以及潜在的低对比度色彩组合。
- 获取检测报告：查看生成的 HTML 格式报告，根据具体的错误定位和修复建议优化您的代码或设计。

## 使用案例

- 前端开发者在提交代码前，检查自定义组件（如按钮、表单）是否具备完整的键盘可访问性和屏幕阅读器支持。
- UI/UX 设计师在交付高保真设计稿前，验证品牌主色调与文本颜色的对比度是否达到 4.5:1 的 AA 级标准。
- QA 测试人员在回归测试中，通过输入页面 URL 快速排查新上线页面的基础无障碍合规问题。

## 常见问题

### 支持检测哪些类型的输入？

支持直接粘贴 HTML 代码片段、输入公开的网页 URL，或上传 PNG、JPEG、WEBP、SVG 格式的设计稿图片进行检测。

### WCAG AA 和 AAA 有什么区别？

AA 是大多数网站的通用无障碍合规标准，而 AAA 是最高标准，对色彩对比度、文本大小和多媒体替代内容有更严格的要求。

### 图片检测是如何工作的？

工具会对上传的设计稿图片进行调色板级别的启发式分析，提取主要颜色并计算对比度，从而发现潜在的低对比度文本或图形风险。

### 能否自动修复我的 HTML 代码？

工具目前主要提供检测报告和具体的修复建议（如提示补充特定的 aria 属性或 alt 文本），需要您根据建议手动调整代码。

### 上传的设计稿图片有大小限制吗？

有的，上传的图片文件大小不能超过 20MB。

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [PDF页眉页脚片段](https://elysiatools.com/zh/tools/pdf-header-footer-snippets): 将HTML转换为PDF，并插入Logo/标题/日期等页眉页脚片段
- [图片透明度水印工具](https://elysiatools.com/zh/tools/image-watermark-opacity): 为图片添加具有自定义透明度的水印，支持文字和图片水印，具有高级透明度控制功能
- [图片角落水印工具](https://elysiatools.com/zh/tools/image-watermark-corner): 为图片添加角落水印，可自定义位置、大小、透明度和多角落选项
- [图片对角水印工具](https://elysiatools.com/zh/tools/image-watermark-diagonal): 为图片添加对角水印，可自定义角度、大小、透明度和沿对角线位置
- [图片水印工具](https://elysiatools.com/zh/tools/image-watermark-image): 为图片添加图片水印，可自定义位置、大小、透明度和旋转角度
- [图片平铺水印工具](https://elysiatools.com/zh/tools/image-watermark-tile): 为图片添加平铺水印，可自定义大小、透明度、间距和图案样式
- [SVG Favicon 生成器](https://elysiatools.com/zh/tools/svg-favicon-generator): 将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest

## 示例

- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [网页无障碍审查与可读配色工具](https://elysiatools.com/zh/hubs/web-accessibility-audits): 在一个专题中检查 WCAG 问题、读屏顺序、低对比度区域、色觉缺陷风险和可读配色选择，适合网页与 UI 无障碍工作流。
- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [文本大小写、编码与规范化转换工具](https://elysiatools.com/zh/hubs/text-convert): 在一个专题中比较文本大小写转换、全半角转换、编码转换、Quoted-Printable 处理和行内文本规范化工具。
- [图片整理、修饰与批处理准备工具](https://elysiatools.com/zh/hubs/image-utility): 把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。