ThemesCorners
博客
11 分钟阅读作者 ThemesCorners

WordPress 无障碍检查清单——WCAG 2.2 AA 的实战版

一份层层累积、能让真实用户用起来的无障碍修复清单——还能在法庭上站得住。

2026 年的无障碍诉讼已不是稀罕事。欧盟无障碍法案自 2025 年中生效，美国 ADA 相关诉讼对电商行业保持稳定密度。那些承诺一键让你「WCAG 合规」的插件其实做不到，而且已多次在法庭上被判定不充分。

好消息是：真正的无障碍是几周认真工作就能达成的。下面是我们在发布每款主题、审计每个客户站点时都跑的清单。

开始之前先做一次真实审计

三种工具，配合使用：

  1. axe DevTools（浏览器扩展）。自动捕获约 50% 的无障碍问题。
  2. NVDA 或 VoiceOver。真的用屏幕阅读器走一遍你的站点。这种体验比任何工具报告教你的都多。
  3. 只用键盘。拔掉鼠标，用 Tab、Shift+Tab、Enter、方向键、Esc 走完你的主要流程。

如果你不能在五分钟内只用键盘完成主流程，下面这些审计结果都是噪音——先把这一条解决。

检查清单

1. 页面结构

  • 每页只有一个 <h1>，描述这个页面。
  • 标题层级不要跳级（不要从 <h2> 直接跳到 <h4>）。
  • 地标元素到位：<header>、<nav>、<main>、<footer>——并且只能有一个 <main>。
  • 每个页面第一个可获得焦点的元素是「跳到主内容」链接。

2. 颜色对比度

  • 正文文字与背景对比度至少 4.5:1。
  • 大字（18px 粗体或 24px 常规）至少 3:1。
  • 非文本 UI（按钮边框、焦点环、纯图标按钮）至少 3:1。
  • 用 oklch 对比度工具检查调色板——sRGB 工具在某些色相上算低。

WordPress 常见坑：

  • 把 text-muted 设为 slate-400 或更浅的主题。很多都这样，检查你的。
  • bg-blue-500 text-white 的按钮看着还行但只是勉强达标——bg-blue-600 更稳。
  • 「禁用」按钮状态经常对比度不达标，是真实的无障碍问题。

3. 焦点可见

  • 每个可获焦元素都有可见的焦点指示。浏览器默认蓝色环可以；很多主题把它去掉了。
  • 焦点指示与周围颜色对比度至少 3:1。
  • 焦点顺序与视觉顺序一致（不要在页面里跳来跳去）。

Tailwind 里：不要在没有 focus-visible:ring-2 替代的情况下使用 outline-none。

4. 表单

  • 每个输入框都有 <label>。占位符不是标签。
  • 必填字段同时用视觉与 aria-required="true" 标注。
  • 错误信息用 aria-describedby 与输入框关联，并用 aria-live="polite" 公告。
  • 接受特定格式的输入要带 inputmode 与 autocomplete 属性。

5. 图片

  • 每个 <img> 要有有意义的 alt；纯装饰用 alt=""。
  • 复杂图（图表、流程图）要在旁边或通过 aria-describedby 提供更长描述。
  • LCP 图片不应是装饰——如果是装饰，你的英雄区什么都没干。

WordPress 里：媒体库的 Alt text 字段是源头。把添加 alt 文本变成编辑流程的一部分，不是可选项。

6. 链接与按钮

  • 链接文字描述目的地（「阅读安全指南」，不是「点这里」）。
  • 看起来像链接的按钮、看起来像按钮的链接，必须用正确的元素。<button> 触发动作；<a> 导航。
  • 纯图标按钮要有 aria-label。
  • 在新标签页打开的链接要说明（视觉上加图标，语义上用 aria-label，如「文档（在新标签页打开）」）。

7. 表格

  • <table> 只用于真实的表格数据，不用于布局。
  • 表头用 <th>，加 scope="col" 或 scope="row"。
  • 标题用 <caption>。
  • 尽量避免合并单元格。

8. 动态内容

  • 模态对话框要把焦点锁在自身内，关闭时把焦点还回触发元素，并响应 Esc 关闭。
  • 工具提示内容键盘可达，不只是鼠标悬停。
  • 轮播（尽量别用）要有暂停控件、切换时管理焦点、并公告当前切换。
  • Toast 通知非紧急用 role="status"，紧急用 role="alert"。

9. 动效

  • 尊重 prefers-reduced-motion。用户开启时所有动画都应禁用或简化：
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
  • 自动播放的视频必须有用户可控的控制器。
  • 视差效果要提供关闭方式。

10. WordPress 专属

  • 区块编辑器本身是很多主题无障碍质量的来源——覆盖编辑器样式的主题可能给作者带来无障碍问题。
  • 多次出现的 wp_nav_menu 输出需要 aria-label。
  • 搜索表单即使视觉上隐藏也要有 <label>。
  • 经典评论表单是已知无障碍弱点——检查并修复。

无障碍插件能做（和不能做）的事

UserWay、accessiBe、EqualWeb 这类插件宣传一键 WCAG 合规。现实是：

  • 它们叠加一个浮层菜单，可调字号、对比度等——对用户有一定帮助。
  • 它们声称「自动修复」无障碍问题。做不到——这从根本上需要修改页面生成的 HTML，对静态结构性问题，JS 浮层无能为力。
  • 它们已在多起美国 ADA 诉讼中被判不充分。部分残障倡议组织已主动反对推荐。

只把它们当作真正修复底层问题之上的一层。如果不修底层，插件在法庭上救不了你。

法律到底要求什么（粗略指引）

这不是法律意见——请咨询所在司法管辖区的律师。

  • 欧盟：欧盟无障碍法案适用于面向消费者的电商、银行、交通等若干类别。执法自 2025 年 6 月开始，2026–2027 年逐步收紧。
  • 美国：ADA Title III。适用于「公众设施场所」，法院已多次将其延伸到商业网站。和解协议通常要求 WCAG 2.1 AA。
  • 英国：Equality Act 2010。执法力度不如美国，但在加强。
  • 澳大利亚：Disability Discrimination Act。有 Maguire v SOCOG 的著名判例。

无论你在哪个司法管辖区，WCAG 2.2 Level AA 都是实用目标。WCAG 2.2 自 2023 年底起就是 W3C 推荐标准。

现实时间表

对一个中等规模的 WordPress 站点（50–200 页）：

  • 第 1 周：跑三种审计，修 axe 暴露的前 10 个问题。
  • 第 2 周：修焦点可见、对比度、缺失 alt 文本。
  • 第 3 周：修表单——标签、错误、autocomplete。
  • 第 4 周：用屏幕阅读器测试，修发现的问题。
  • 持续：把无障碍加进编辑流程清单。新内容发布前必须通过。

然后每六个月重审。WCAG 标准在演化，你的内容在演化，第三方插件会引入退化。无障碍是过程，不是状态。

我们的主题如何帮助

我们的主题自带：

  • 语义化 HTML5（正确地标、标题层级）
  • 每个可交互元素都有可见焦点指示
  • 所有默认配色组合都满足 WCAG AA 对比度
  • 跳到主内容链接
  • 键盘可导航的菜单与折叠
  • 支持 prefers-reduced-motion

这就是你原本要请无障碍顾问花钱补回去的基线。再往后，保持内容可访问就靠你了——上传图片要写 alt，链接文字要明确，标题结构要清晰——但主题不会跟你作对。

相关文章