修复报告

无障碍修复报告

我们在真实浏览器中按 WCAG 2.2 A 级和 AA 级测试您的网站，仅用键盘走完其主要路径（在网店上，一直走到结账按钮），并基于您自己的标记，为开发人员给出每个障碍的修改方案。

我们检查什么

WCAG 2.2 A 级和 AA 级规则
在您的关键页面以及站点地图中最多 20 个其他页面上运行 axe-core 自动化测试：替代文本、颜色对比度、按钮和链接的名称、表单标签、标题层级、地标区域和 ARIA。
键盘流程测试
只使用键盘：在网店上，从首页到产品页、选项、“加入购物车”和购物车，在结账按钮前停止；在其他网站上，从首页到关键页面、其主要行动号召及表单字段。绝不提交任何内容。
焦点陷阱和可见焦点
焦点是否会被困住（例如在 Cookie 横幅中），以及访客能否看到焦点所在的位置。
320 px 下的手机重排
页面在小屏手机上是否需要横向滚动（WCAG 1.4.10）。
律师函指控对照表
如果您粘贴了律师函，每项指控都会与我们的测试复现的问题进行比对，并附上每个页面的实例数量。
需人工检查的项目
测试标记出但无法判定的内容，例如图片上的文字，并说明如何逐项检查。

Harbor & Pine 的真实输出。这是我们搭建的一家存在常见问题的虚构商店。

Critical
@axe/button-name/help{"$en":"Buttons must have discernible text"}
41 instances on 9 pages. WCAG 4.1.2 requires every control to have a name. Unnamed buttons often include quantity steppers, close buttons and slider arrows.
Fix: Add visible text, visually hidden text, or an aria-label that says what the button does (for example {a} or {b}).{"a":"aria-label=\"Close\"","b":"aria-label=\"Increase quantity\""}
Critical
@axe/image-alt/help{"$en":"Images must have alternative text"}
22 instances on 7 pages. WCAG 1.1.1 requires a text alternative for meaningful images. Without it, a screen reader user can't tell which product a photo shows.
Fix: Describe what matters to a shopper: product name, color and the angle shown (for example 'Canvas tote in olive, front view').
Critical
@axe/label/help{"$en":"Form elements must have labels"}
7 instances on 6 pages. WCAG 1.3.1, 3.3.2 and 4.1.2 require form fields to have labels. Newsletter sign-up and search fields are common offenders.
Fix: Placeholder text alone does not count as a label.

这是完整的 WCAG 审计吗？

这是自动化审计加键盘流程测试。自动化测试只能发现网站上的部分 WCAG 问题，因此报告还会列出需要人工检查的内容以及检查方法。

它对应对 ADA 律师函有帮助吗？

如果您粘贴了律师函，报告会显示哪些指控能被我们的测试在您的网站上复现，并附上证据。这是事实记录，不是法律意见；关于律师函本身，请咨询律师。

代码适用于哪些平台？

修复方案按我们识别出的平台编写：Shopify 模板、WordPress 和 WooCommerce、Webflow、BigCommerce、Wix、Squarespace、Next.js 等框架，或纯 HTML。如果我们看不到您的源代码，文件位置会以提示的形式给出。

5 次复测是什么？

开发人员修改后，您可以从报告中再次运行相同的检查，最多五次，查看哪些问题已不再复现。