1. 项目概述：当AI遇上无障碍合规，一场效率革命

如果你是一名开发者、项目经理或者网站所有者，最近可能已经感受到了来自合规层面的压力。无论是欧盟的《欧洲无障碍法案》在2025年6月正式生效，还是美国ADA相关诉讼案件数量屡创新高，一个清晰的信号是：网站无障碍访问不再是“锦上添花”的加分项，而是“必须要有”的法律底线和商业必需品。然而，传统的无障碍审计流程往往令人望而生畏——要么需要手动逐项检查，耗时耗力；要么依赖专业的审计工具，学习成本高且价格不菲。更让人头疼的是，许多无障碍问题其实非常简单，比如图片缺少 alt 属性、表单输入框没有关联标签，但你就是需要一个系统性的方法来发现它们。

这就是为什么当我接触到 SiteAudit MCP 这个工具时，感觉像是打开了一扇新的大门。它本质上是一个模型上下文协议服务器，能将一系列网站审计工具“嫁接”到像Claude这样的AI智能体上。其中， accessibility_audit 这个工具专门用于进行 WCAG 2.1 合规性检查。最吸引人的是，它无需启动浏览器、无需渲染页面，纯粹通过分析HTML结构，就能在10秒内完成一次基础审计，并且完全免费。这对于需要快速自查、批量筛查或者在开发流程中嵌入检查的团队来说，无疑是一个效率利器。本文将深入拆解这个工具的原理、使用方法、能做什么、不能做什么，并结合我自己的实操经验，分享如何将其融入你的工作流，真正把无障碍合规从负担变成优势。

2. 核心工具原理与能力边界解析

在深入使用之前，我们必须先搞清楚这个工具的工作原理和它的能力范围。这决定了我们该在什么场景下信任它，以及在什么情况下需要寻求其他工具的帮助。

2.1 静态分析与动态渲染：两种审计路径的本质区别

传统的无障碍审计工具，如Google Lighthouse的Accessibility面板或Deque的axe-core，通常属于 动态分析 。它们需要一个真实的浏览器环境（如Chrome）来加载、渲染整个页面，执行JavaScript，并计算最终的样式。这种方式非常强大，可以检测到依赖于渲染结果的问题，例如：

  • 颜色对比度 ：需要计算前景色和背景色的实际RGB值，并应用公式得出对比度比率。
  • 焦点指示器 ：需要模拟键盘Tab键导航，观察焦点框是否可见、样式是否清晰。
  • 视觉顺序与DOM顺序一致性 ：需要对比CSS布局后的视觉位置和代码中的DOM顺序。

而SiteAudit MCP的 accessibility_audit 工具采用的是 静态分析 。它不运行JavaScript，不加载CSS，也不渲染页面。它只是向目标URL发起一个HTTP请求，获取返回的HTML源代码，然后像语法解析器一样，分析这份源代码的 结构 和 语义 。这种方式的优势是 极致的速度 和 极低的资源消耗 ，因为它避开了最耗时的渲染环节。但其检测范围也自然被限制在那些仅通过HTML标记就能判断的问题上。

理解这个区别至关重要。你不能指望一个静态分析工具告诉你按钮的颜色对比度是否达标，就像你不能指望用尺子去测量温度一样。但它能非常高效地告诉你，这个按钮在代码里有没有一个可访问的名称（ aria-label 或内部文本）。

2.2 accessibility_audit 的详细检查清单

基于静态分析的原则，该工具主要检查以下几大类WCAG 2.1成功标准。了解每一项检查背后的“为什么”，能帮助我们在修复问题时更有针对性。

2.2.1 结构性与导航相关检查

这部分检查确保网站有一个清晰、可导航的骨架，对于使用屏幕阅读器或仅依赖键盘的用户至关重要。

  • 语言声明 ：检查 <html> 标签是否包含 lang 属性（如 lang=“en” ）。这对应 WCAG 3.1.1（页面语言） 。屏幕阅读器需要根据此属性切换发音库，确保正确朗读内容。没有它，辅助技术可能会用错误的语言语调来朗读，造成理解障碍。
  • 标题层级 ：检查是否只有一个 <h1> 元素，以及标题层级是否连续（例如，没有从 <h2> 直接跳到 <h4> 的情况）。这对应 WCAG 1.3.1（信息与关系） 和 2.4.6（标题与标签） 。标题是屏幕阅读器用户最重要的导航地标之一。一个清晰的层级就像一本书的目录，能让他们快速理解页面结构并跳转到感兴趣的部分。
  • 地标区域 ：检查页面是否包含 <main> 元素或具有 role=“main” 属性的元素。这也对应 WCAG 1.3.1 。 <main> 标识了页面的核心内容区域，允许用户跳过重复的导航栏直接进入主题。
  • 跳过导航链接 ：检查页面是否存在“跳过导航”或“跳至主要内容”的链接（通常是一个隐藏的、页面加载时第一个可获得焦点的链接）。这对应 WCAG 2.4.1（绕过块） 。对于键盘用户，每次页面刷新都要Tab几十次才能穿过顶部导航到达内容区，是极其糟糕的体验。“跳过链接”一键解决此问题。

2.2.2 内容可访问性检查

这部分检查确保非文本内容有替代方案，交互元素有明确的标识。

  • 图片替代文本 ：统计所有 <img> 标签，计算缺少 alt 属性的图片比例。这对应 WCAG 1.1.1（非文本内容） 。 alt 文本是视障用户理解图片内容的唯一途径。装饰性图片应设置为 alt=“” （空字符串），而信息性图片必须有描述性文本。
  • 空链接 ：检查 <a> 链接是否包含可访问的文本内容。一个链接如果内部没有文本（或只有不可读的图标字体），且没有 aria-label 等属性，对屏幕阅读器用户来说就是“无名”的，无法知道其作用。
  • 无名按钮 ：检查 <button> 元素或 role=“button” 的元素是否具有可访问名称。可访问名称可以通过内部文本、 aria-label 属性或 aria-labelledby 属性提供。没有名称的按钮对辅助技术用户来说是不可操作的。

2.2.3 表单可访问性检查

表单是交互的关键，也是最容易出问题的地方。

  • 输入框标签 ：检查每个 <input> 、 <textarea> 、 <select> 元素是否都有与之关联的标签。关联方式可以是：
    1. 使用 <label for=“input_id”> 显式关联。
    2. 使用 aria-label 属性直接提供标签。
    3. 将输入控件包裹在 <label> 标签内。 这对应 WCAG 1.3.1（信息与关系） 和 3.3.2（标签或说明） 。清晰的标签不仅对屏幕阅读器用户必要，对所有用户（尤其是在小屏幕上）理解该输入框要填什么也至关重要。

2.3 工具的能力边界与互补方案

正如前文所述，静态分析有其局限性。 accessibility_audit 无法检查 以下需要渲染和交互才能评估的问题：

  1. 颜色对比度 ：这是WCAG 2.1 AA级标准中最常见的不合规项之一（准则1.4.3）。必须通过浏览器计算实际渲染后的颜色值。
  2. 焦点指示器可见性 ：需要实际用Tab键导航，观察焦点环是否清晰可见，是否符合最小对比度要求。
  3. 键盘导航顺序与陷阱 ：需要实际使用键盘遍历所有交互元素，检查顺序是否合乎逻辑，是否有元素无法获得焦点，或焦点是否会被困在某个区域（如模态框）。
  4. 动态内容更新 ：对于通过Ajax或JavaScript动态加载的内容，需要检查是否有适当的ARIA实时区域（ aria-live ）通知辅助技术。

注意 ：不要因为 accessibility_audit 检查通过就认为网站完全合规。它覆盖的是“基础结构”问题，而颜色对比、键盘导航等“视觉与交互”问题同样重要，且是法律诉讼中的高频雷区。

因此，一个完整的无障碍审计策略应该是 分层 的：

  • 第一层（快速/频繁） ：使用 accessibility_audit 进行日常检查、代码提交前检查、批量站点筛查。它能快速揪出那些“低级错误”。
  • 第二层（深度/发布前） ：使用 axe-core （可集成到测试框架中）或 Google Lighthouse （通过其 lighthouse_audit 工具）进行包含渲染的全面检查。
  • 第三层（专家/用户） ：结合手动键盘测试、屏幕阅读器测试（如NVDA, VoiceOver）以及真实残障用户测试。

幸运的是，SiteAudit MCP也提供了 lighthouse_audit 工具，可以调用Google PageSpeed Insights API来获取包含颜色对比度等指标的完整Lighthouse无障碍评分。在实际工作中，我通常会要求Claude同时运行这两个审计，然后给我一份合并报告。

3. 从安装到实战：无缝集成工作流

了解了原理，接下来就是动手环节。将 accessibility_audit 集成到你的工作流中非常简便，无论是通过托管服务还是自托管。

3.1 安装与配置：两种主流方式

3.1.1 使用MCPize（推荐给大多数用户，尤其是初学者）

这是最快捷、无痛的方式，特别适合不想在本地配置环境的用户。

  1. 访问 mcpize.com/mcp/siteaudit-mcp 。
  2. 点击页面上的“Install”按钮。
  3. 系统会引导你完成授权，该工具就会被添加到你的Claude桌面应用或支持的AI平台中。
  4. 免费套餐每月提供100次审计，对于个人开发者或小团队日常使用完全足够。

其背后的原理是，MCPize平台托管了SiteAudit MCP服务器，你通过配置让本地的Claude应用连接到这个远程服务器。你的MCP配置文件（通常是 claude_desktop_config.json ）会被自动更新，添加如下内容：

{
  "mcpServers": {
    "siteaudit": {
      "url": "https://siteaudit-mcp.mcpize.run/mcp"
    }
  }
}

3.1.2 自托管（适合有定制需求或注重数据隐私的团队）

如果你希望工具运行在自己的服务器上，或者需要集成到内部CI/CD流程，自托管是更好的选择。它依赖Python的 uvx 工具来运行。

  • 通过Claude命令行安装 ： 
    claude mcp add siteaudit -- uvx --from siteaudit-mcp siteaudit
  • 手动编辑配置文件 ：找到你的Claude桌面应用配置目录下的 claude_desktop_config.json 文件，添加： 
    {
  "mcpServers": {
    "siteaudit": {
      "command": "uvx",
      "args": ["--from", "siteaudit-mcp", "siteaudit"]
    }
  }
}
    这种方式会在你每次启动Claude时，本地启动一个SiteAudit MCP服务器进程。

实操心得 ：对于团队协作，我强烈建议统一采用自托管方式，并在内部文档中记录配置步骤。这样可以避免因依赖外部服务导致的不可用，也便于控制审计频率和网络策略。个人使用则优先选择MCPize，省心省力。

3.2 基础审计与报告解读

安装完成后，在Claude的对话窗口中，你就可以像与专家对话一样发出指令了。

指令示例 ： “请对 https://www.gov.uk 运行一次无障碍审计。”

几秒钟后，你会得到一份结构化的报告。我们以原文中gov.uk的示例来学习如何解读：

  • 总分与等级 ： 94/100 (Grade: A) 。这是一个非常高的分数，表明其基础HTML结构非常健全。
  • 问题与警告 ： Issues: 0, Warnings: 2 。这里“Issues”通常指高严重性问题（如缺失 alt 文本、无标签表单），而“Warnings”指中低严重性问题或建议项。
  • 关键指标 ：
    • Images: 15 total, 15 with alt text - 图片替代文本覆盖率100%，完美。
    • Form inputs: 2 total, 2 with labels - 表单标签覆盖率100%，完美。
    • Headings: 12 total, 1 H1 - 标题结构良好，只有一个H1。
  • 警告详情 ：
    • [medium] No <main> element or role='main' found - 缺少明确的 <main> 地标。报告也指出，该站点使用了 <article> 包装，这可能隐含了主内容区，但显式声明 <main> 仍是最佳实践。
    • [low] No skip navigation link detected - 缺少“跳过导航”链接。对于gov.uk这样导航可能很复杂的站点，这是一个有价值的改进点。

这份报告的精髓在于，它没有停留在分数上，而是直接指向了具体的代码缺陷和对应的WCAG准则号。开发者拿到后，可以立刻定位到需要修改的文件和行数。

3.3 进阶使用场景：超越单次检查

这个工具的威力在批量处理和对比分析中才能真正体现出来。

3.3.1 批量审计与优先级排序 对于管理多个网站的数字代理商或企业IT部门，可以一次性审计所有站点并排序。

  • 指令 ： “请对 site1.com, site2.com, site3.com 运行无障碍审计，并按分数从低到高排序，列出每个站点最急需修复的前三个问题。”
  • 输出价值 ：Claude会并行执行审计，并生成一个对比表格。你可以一眼看出哪个站点问题最严重，并集中资源优先处理“短板”。这在资源有限的情况下，能实现合规风险管理的最大化收益。

3.3.2 竞品差距分析 这是一个在商业竞争中极具价值的用法。SiteAudit MCP内置了 competitor_gap_analysis 工具。

  • 指令 ： “请比较 mycompany.com 与 comp1.com, comp2.com, comp3.com 在无障碍访问方面的表现，给出差距分析报告。”
  • 输出价值 ：Claude会生成一份详细报告，通常包含：
    1. 你与竞争对手在各维度（SEO、安全、性能、无障碍）的平均分对比。
    2. 你的主要短板领域（例如，“在无障碍方面，你比竞争对手平均分低15%”）。
    3. 每个领域表现最好的竞争对手。
    4. 具体的差距点与改进建议。 这份报告可以用于向管理层汇报，证明无障碍投资的竞争必要性，或在销售过程中向客户展示你的专业度和透明度。

3.3.3 与Lighthouse审计结合 为了获得最全面的视图，可以要求Claude综合静态和动态分析的结果。

  • 指令 ： “请对 mysite.com 同时运行 full_audit（或 accessibility_audit）和 lighthouse_audit，然后给我一份合并的无障碍评估摘要，突出显示需要人工复核的潜在问题。”
  • 输出价值 ：你会得到一份整合报告，其中 accessibility_audit 指出的结构性问题（如缺失标签）和 lighthouse_audit 指出的渲染相关问题（如颜色对比度不足）被并列呈现。Claude甚至能帮你交叉验证，例如，如果一个按钮在静态检查中“无名”，在动态检查中颜色对比度又不足，那它就是需要 最高优先级 修复的关键问题。

4. 融入开发生命周期：从成本中心到质量支柱

仅仅把审计工具当作事后检查的“警察”是远远不够的。真正的价值在于将其“左移”，融入到软件开发和内容发布的每一个环节中，使其成为质量保障的“伙伴”。

4.1 针对不同角色的实战工作流

4.1.1 开发者：编码时的“安全带”

  • 本地提交前检查 ：在将代码推送到远程仓库前，可以在本地运行一个快速脚本，调用MCP服务器对当前开发服务器的页面进行审计。这能防止明显的无障碍缺陷进入代码库。
  • 示例（简化思路） ：写一个Git预提交钩子（pre-commit hook），当修改涉及前端HTML文件时，自动启动一个本地测试服务器，并对关键页面运行 accessibility_audit ，如果发现高严重性问题则阻止提交。
  • CI/CD流水线集成 ：这是更成熟的做法。在持续集成服务器（如GitHub Actions, GitLab CI）的构建流程中，加入一个审计步骤。可以设置质量关卡：例如，无障碍分数低于80分或存在任何“Issues”级别的错误，则构建失败或标记为需要人工审核。这确保了生产环境部署的代码始终符合最低标准。

4.1.2 数字代理商与自由职业者：交付物中的专业体现

  • 标准化交付物 ：将无障碍审计报告作为每个网站项目交付的 标准附件 。这不仅展示了你的专业性和对细节的关注，更是在法律层面提供了“已尽合理努力”的证据。
  • 销售与售前利器 ：在与潜在客户初次沟通时，当场用5分钟演示对其现有网站的无障碍审计。直观地展示问题（“您的官网有43%的图片没有描述”）和风险，远比空谈“我们注重无障碍”更有说服力。这能迅速建立专业信任，并将对话从价格转向价值。
  • 客户留存与续约 ：定期（如每季度）使用 competitor_gap_analysis 工具为客户生成竞品监控报告。展示客户网站在行业中的无障碍水平位置，并主动提出优化方案。这从被动的“修复问题”转变为主动的“创造价值”，极大提升客户粘性。

4.1.3 合规与法务团队：风险管理的量化工具

  • 定期合规报告 ：代替手动抽样检查，自动化地对公司所有线上资产（官网、产品页、帮助中心、活动页面）进行季度性无障碍扫描。生成统一的仪表盘和趋势图，量化合规进展，向管理层清晰展示投资回报和风险缓解情况。
  • 建立“善意努力”证据链 ：在面临法律质询时，能够出示系统性的、定期执行的自动化审计报告和修复记录，是证明企业已采取“善意努力”来遵守无障碍法规的有力证据。这可能会直接影响诉讼结果或调解金额。

4.2 超越工具：培养团队的无障碍意识

工具再强大，也只是辅助。最终解决问题的是人。因此，在引入自动化审计的同时，必须辅以基本的无障碍知识培训。

  • 开发规范 ：在团队编码规范中明确加入无障碍要求，例如：“所有 <img> 必须包含 alt 属性，装饰性图片设为空 alt=“” ”、“所有可交互元素必须可通过键盘Tab键访问并具有清晰焦点样式”、“表单输入必须与 <label> 关联”。
  • 设计评审 ：在设计稿评审阶段，就加入对颜色对比度、字体大小、交互状态的检查。使用Figma或Sketch的插件（如Stark）可以在设计阶段提前发现问题，避免开发返工。
  • 测试用例 ：在QA测试用例中，加入关键的无障碍场景测试，如纯键盘导航测试、屏幕阅读器朗读关键流程测试。

5. 常见问题、局限性与排查技巧

在实际使用中，你可能会遇到一些疑问或异常情况。以下是我总结的一些常见问题及处理思路。

5.1 审计结果不准确或与预期不符

问题1：工具报告“缺少语言声明”，但我明明在 <html> 标签里看到了 lang 属性。

  • 排查思路 ：
    1. 检查属性值 ：确保 lang 属性的值符合BCP 47标准（如 en , zh-CN ）。拼写错误或格式不对可能导致解析失败。
    2. 检查HTML结构 ：使用浏览器的“查看页面源代码”（而非检查元素），确认 lang 属性是直接写在服务器返回的初始HTML中。如果 lang 属性是通过JavaScript动态添加的，静态分析工具将无法看到它，因为工具只分析初始HTML响应。
    3. 检查重定向 ：你提供的URL是否发生了重定向？工具审计的可能是重定向后的最终页面。尝试对最终URL直接进行审计。

问题2：工具说“有多个H1”，但我在页面上只看到一个视觉上的大标题。

  • 排查思路 ：
    1. 隐藏的H1 ：检查页面中是否在不可见区域（如用CSS display: none 或 aria-hidden=“true” 隐藏）存在额外的 <h1> 标签。有时为了SEO或旧代码遗留，会存在隐藏的标题。
    2. 组件复用 ：如果页面由多个框架或组件拼装而成，确保每个组件没有错误地引入自己的 <h1> 。一个页面只应有一个代表主内容的 <h1> 。
    3. 动态加载 ：同语言声明问题，如果第二个 <h1> 是动态加载内容的一部分，静态工具可能抓取不到完整DOM。此时需要结合Lighthouse等动态工具验证。

问题3：审计一个单页面应用时，结果非常不完整，只检查了初始加载的空白框架。

  • 原因与对策 ：这是静态分析工具对SPA的固有局限。SPA的内容几乎全部由JavaScript在客户端渲染。 accessibility_audit 只能看到初始的、几乎为空的HTML壳。
  • 解决方案 ：
    1. 使用动态工具 ：对于SPA，必须使用 axe-core （可集成到Cypress、Playwright等E2E测试中）或 Lighthouse （可设置为在页面完全加载后运行审计）来进行测试。
    2. 服务端渲染 ：如果项目采用SSR，确保服务器端渲染出的HTML包含了主要内容的结构和语义化标签，这样静态工具也能分析到大部分内容。

5.2 性能与速率限制

问题：免费版每月100次审计不够用怎么办？

  • 策略 ：
    1. 精准审计 ：不要对每个小修改都审计整个站点。可以针对修改的特定页面或组件进行审计。
    2. 自托管 ：自托管版本通常没有明确的调用次数限制（取决于你的服务器资源），适合高频使用。
    3. 缓存策略 ：对于内容不常变的页面（如“关于我们”），审计结果可以缓存一段时间（如24小时），避免重复请求。
    4. 批量审计优化 ：使用 compare_sites 或批量指令时，确保列表中的站点都是必要的，避免浪费额度在无关站点上。

5.3 与其他工具的结果冲突

问题： accessibility_audit 给了高分，但Lighthouse或axe-core却报出一堆颜色对比度问题。

  • 正确理解 ：这 不是 冲突，而是 互补 。正如前文强调的， accessibility_audit 不检查需要渲染的问题。颜色对比度、焦点样式等都属于动态渲染检查范畴。
  • 行动指南 ：将此视为一个完整的审计流程。用 accessibility_audit 确保HTML结构健康（地基），用Lighthouse/axe-core确保视觉和交互可访问（装修）。两者结合才能盖出坚固又美观的房子。

5.4 无法连接到MCP服务器

问题：配置完成后，Claude提示无法连接SiteAudit MCP服务器。

  • 排查步骤 ：
    1. 检查网络 ：确保你的机器可以访问外网（对于MCPize托管版）或能正常运行 uvx 命令（对于自托管版）。
    2. 检查配置 ：仔细核对 claude_desktop_config.json 文件中的JSON格式是否正确，有无多余的逗号或括号。
    3. 重启Claude ：修改配置文件后，完全退出并重启Claude桌面应用。
    4. 查看日志 ：在Claude的设置中或系统控制台查看是否有更详细的错误日志。
    5. 命令行测试 ：对于自托管，可以尝试在终端直接运行 uvx --from siteaudit-mcp siteaudit ，看工具本身能否正常启动。

将自动化无障碍审计工具融入你的工作流，不是一个一蹴而就的项目，而是一个持续改进的过程。它始于一个简单的命令，成长于每一次提交前的检查，成熟于整个团队对包容性设计理念的认同。技术的价值在于赋能，而 accessibility_audit 这类工具，正是将复杂的合规要求，转化为开发者触手可及的具体行动。当你发现修复一个缺失的 alt 属性只需要几秒钟，而它可能帮助一位视障用户理解你的产品时，这种正反馈会驱动你持续做对的事情。从我个人的经验来看，最大的收获不是避免了法律风险，而是在这个过程中，被迫以更多元的视角去审视自己的产品，最终做出了对所有人都更友好、更健壮的设计。这，或许才是无障碍运动带给技术从业者最深远的礼物。

Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

从 ReAct 到 MCP：一文看懂主流 Agent 框架的演化与差异

avatar MCP技术社区
cover

Claude Fable 5 系统提示词拆解：Agent 工具调用、搜索规则和安全边界

avatar MCP技术社区
cover

Harness Engineering：让 AI Agent 从会回答到能可靠做事

avatar MCP技术社区