分类

← View All Tools

无障碍合规检测器

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

示例结果

2 个示例

审查落地页片段中的缺失标签

扫描一小段 HTML，提前发现空按钮、缺失 alt 和无标签表单字段

Accessibility report with critical issues for images, links, buttons, and forms.
查看输入参数
{ "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />", "wcagLevel": "AA" }

检查设计稿图片中的对比度风险

对设计稿图片做调色板级对比度启发式分析，提前发现潜在低对比组合

Accessibility report with palette-based contrast warnings from a design image.
查看输入参数
{ "designImage": "/public/samples/images/logo.png", "wcagLevel": "AAA" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/png, image/jpeg, image/webp, image/svg+xml

关键信息

分类
Validation
输入类型
textarea, text, file, select
输出类型
html
样本覆盖
4
支持 API
Yes

概览

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

适用场景

  • •在前端开发阶段，需要快速验证 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 快速排查新上线页面的基础无障碍合规问题。

用户案例

1. 审查落地页片段中的缺失标签

前端开发者
背景原因
开发者正在编写一个新的产品落地页，其中包含多个图标按钮和自定义表单输入框。
解决问题
担心图标按钮对屏幕阅读器不可见，且表单缺少关联的 label 标签，可能导致无障碍测试不通过。
如何使用
将落地页的 HTML 片段粘贴到“HTML 输入”框中，并将“WCAG 等级”设置为“AA”。
示例配置
{
  "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />",
  "wcagLevel": "AA"
}
效果
生成一份 HTML 报告，精准指出图片缺失 alt 属性、链接和按钮缺少可访问名称，以及输入框缺少 label，并提供修复代码示例。

2. 检查设计稿图片中的对比度风险

UI 设计师
背景原因
设计师完成了一套包含浅色背景和灰色文本的登录界面设计稿，准备交付给开发团队。
解决问题
需要确认浅灰色文本在白色背景上是否满足严格的无障碍对比度要求。
如何使用
上传登录界面的设计稿图片，并在“WCAG 等级”中选择“AAA”。
示例配置
{
  "designImage": "/public/samples/images/logo.png",
  "wcagLevel": "AAA"
}
效果
报告显示调色板级别的对比度警告，指出浅灰文本与背景的对比度低于 7:1，提示设计师加深文本颜色以满足 AAA 级标准。

用 Samples 测试

xml, html, image
XML 示例
XML（可扩展标记语言）格式示例，从简单到复杂结构
preferred input family image
image
Windows C++ 图像处理示例
Windows C++ 图像处理示例，包括读取/保存图像、调整大小和使用Windows Imaging Component进行格式转换
preferred input family image
image
SVG示例
可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
preferred input family image
image
Web Rust 图像处理示例
Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换
preferred input family image
image

相关专题

ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
TextConvert工具专题
探索 80 个围绕 text 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。
XmlConvert工具专题
探索 33 个围绕 xml 的 convert 工作流工具，快速找到相近能力。

常见问题

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

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

WCAG AA 和 AAA 有什么区别？

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

图片检测是如何工作的？

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

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

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

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

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

API 文档

请求端点

POST /zh/api/tools/accessibility-checker

请求参数

参数名 类型 必填 描述
htmlInput textarea 否 -
pageUrl text 否 -
designImage file (需要先上传) 否 -
wcagLevel select 否 -

文件类型参数需要先通过 POST /upload/accessibility-checker 上传获取 filePath，然后将 filePath 传递给对应的文件字段。

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-accessibility-checker": {
      "name": "accessibility-checker",
      "description": "检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

支持 URL 文件链接或 Base64 编码作为文件参数。

如果遇见问题，请联系我们：[email protected]