网络无障碍意味着构建可以被残疾人士有效使用的网站。这包括使用屏幕阅读器、仅使用键盘导航、语音控制、屏幕放大器或有色盲限制的人。在WordPress生态系统中，无障碍既是许多司法管辖区的法律要求，也是接触更广泛受众的实用方式——全球超过10亿人有某种形式的残疾。
在本指南中，我们涵盖了使您的WordPress网站可访问的实用步骤，遵循Web内容无障碍指南（WCAG）2.2的AA级别——这是包括美国ADA、欧盟EAA和加拿大AODA在内的无障碍法律最常要求的标准。
理解WCAG 2.2原则
WCAG围绕四个原则组织，称为POUR：
| 原则 | 含义 | WordPress示例 |
|---|---|---|
| 可感知 | 用户可以通过视觉、听觉或触觉感知内容 | 图像的替代文本、视频的字幕、足够的颜色对比 |
| 可操作 | 用户可以导航并与界面互动 | 键盘导航、跳过链接、没有键盘陷阱 |
| 可理解 | 用户可以理解内容及如何使用界面 | 清晰的语言、一致的导航、错误信息 |
| 强健 | 内容在不同浏览器、设备和辅助技术上均可正常工作 | 有效的HTML、适当的ARIA角色、语义化标记 |
选择可访问的主题
您的WordPress主题的HTML结构和CSS构成了您网站可访问性的基础。在选择WordPress主题时，请评估以下可访问性因素：
- 语义化HTML：主题使用适当的HTML5元素（header、nav、main、article、aside、footer），而不是为所有内容使用通用的div
- 标题层次：H1 → H2 → H3遵循逻辑顺序，没有跳过层级
- 跳过链接：存在“跳到内容”链接作为第一个可聚焦元素，允许键盘用户跳过导航
- 键盘导航：所有交互元素（链接、按钮、表单）都可以通过Tab键访问和使用
- 焦点指示器：聚焦的元素有可见的轮廓或高亮（没有通过outline: none移除）
- 颜色对比：文本符合WCAG AA对比率（正常文本为4.5:1，大文本为3:1）
在WordPress.org上标记为“可访问性准备”的主题已通过基本的可访问性审查。然而，这个标签表示的是一个起点，而不是完全符合WCAG的标准。在流行主题中，GeneratePress以其干净的语义HTML和适当的ARIA标记而著称。
图像可访问性
替代文本
每个有意义的图像都需要描述性的替代文本。WordPress使这变得简单——在媒体库和插入内容中的图像时，替代文本字段是可用的。
| 图像类型 | 替代文本方法 | 示例 |
|---|---|---|
| 产品照片 | 描述产品 | “红色皮革斜挎包，金色扣，正面视图” |
| 截图 | 描述截图显示的内容 | “WordPress仪表板显示插件页面，有12个活动插件” |
| 信息图 | 总结关键信息 | “比较图表：Elementor与Gutenberg功能。Elementor有100多个小部件，Gutenberg有90多个块” |
| 装饰性图像 | 空替代文本（alt=""） | 背景图案、分隔符、纯装饰图标 |
| 图表/图形 | 描述趋势或关键数据点 | “折线图显示网站流量从2025年1月到12月增加45%” |
图像优化以提高可访问性
- 不要使用文本图像——使用实际文本并通过CSS进行样式设置
- 确保嵌入图像中的文本符合对比要求
- 为复杂图像（图表、图解）提供长描述，使用相邻段落或longdesc属性
- 确保图像具有适当的尺寸，以免导致布局偏移（CLS）
键盘导航
许多用户完全通过键盘导航网站，
键盘操作——Tab键向前移动，Shift+Tab键向后移动，Enter键激活链接/按钮，空格键切换复选框和点击按钮，Escape键关闭模态框。
常见的键盘可访问性问题
- 焦点陷阱：不允许通过Tab键返回主内容的模态对话框（模态框应将焦点保持在模态框内，Escape键应关闭它们）
- 缺少焦点指示器：移除聚焦元素默认轮廓的CSS（切勿全局使用 *:focus { outline: none }）
- 具有点击处理程序的非交互元素：包含onClick事件的div或span，无法通过键盘访问（应使用按钮或链接）
- 仅在悬停时打开的下拉菜单：键盘用户无法触发悬停状态。菜单也应在聚焦/Enter时打开
- 没有ARIA的自定义组件：没有适当ARIA角色和键盘处理程序的标签、手风琴和轮播
颜色和对比度
WCAG AA要求这些最低对比度比率：
| 元素 | 最低比率 | 示例（通过） | 示例（未通过） |
|---|---|---|---|
| 普通文本（<18px） | 4.5:1 | #333 在 #fff 上（12.6:1） | #999 在 #fff 上（2.8:1） |
| 大文本（≥18px 或 ≥14px 粗体） | 3:1 | #555 在 #fff 上（7.4:1） | #aaa 在 #fff 上（2.3:1） |
| UI组件（按钮，输入框） | 3:1 | 蓝色 #2563eb 按钮（4.6:1） | 浅蓝色 #93c5fd（1.8:1） |
| 非文本内容（图标，边框） | 3:1 | 深色图标在浅色背景上 | 浅灰色图标在白色上 |
使用WebAIM的对比度检查器或axe浏览器扩展工具来验证对比度比率。不要仅依赖颜色传达信息——除了颜色编码外，还应使用文本标签、图案或图标。
表单可访问性
表单是可访问性最关键的领域之一。无论使用 Gutenberg块、Gravity Forms，还是 WPForms：
- 为每个输入添加标签：使用与每个输入相关联的 <label> 元素，通过for/id属性。占位符文本不能替代标签
- 将相关字段分组：使用 <fieldset> 和 <legend> 来分组相关输入（例如，送货地址字段）
- 提供错误消息：当验证失败时，识别出哪个字段有错误并描述如何修复。使用aria-describedby将错误消息与其字段关联
- 标记必填字段：使用required属性并通过文本（不仅仅是星号）可视化指示必填字段
- 支持自动完成功能：添加适当的自动完成属性（name, email, tel, address-line1），以便浏览器可以自动填充表单数据
内容可访问性
标题结构
适当的标题层次结构帮助屏幕阅读器用户理解页面结构并在各部分之间导航。规则：
- 每个页面一个H1（页面/帖子标题）
- H2用于主要部分
- H3用于H2内的子部分
- 切勿跳过级别（H2 → H4而没有H3是不正确的）
- 不要将标题用于视觉样式——应使用CSS类
链接文本
避免使用在上下文中无意义的通用链接文本：
| 差的链接文本 | 可访问的链接文本 |
|---|---|
| "点击这里" | "阅读WordPress安全指南" |
| "阅读更多" | "阅读完整的Elementor Pro评测" |
| "了解更多" | "了解如何优化WooCommerce结账" |
| "这里" | "下载性能基准报告" |
表格
数据表应包括：
- <thead>，包含用于列标题的 <th> 元素（带有scope="col"）
- <th scope="row"> 用于行标题
- 描述表格目的的 <caption> 元素
- 简单结构——尽量避免合并单元格，因为它们对屏幕阅读器来说难以解释
测试您网站的可访问性
| 工具 | 类型 | 测试内容 |
|---|---|---|
| axe DevTools | 浏览器扩展 | 自动化WCA |
| G 违规检测 | ||
| WAVE | 浏览器扩展 / 网站 | 带有内联注释的视觉可访问性评估 |
| Lighthouse | Chrome 开发者工具 | 带有分数和建议的可访问性审计 |
| 键盘测试 | 手动 | 仅使用 Tab、Enter 和 Escape 导航整个网站 |
| 屏幕阅读器 | 手动 | 使用 VoiceOver（Mac）、NVDA（Windows）或 TalkBack（Android）进行测试 |
自动化工具大约能捕捉到 30-50% 的可访问性问题。使用键盘和屏幕阅读器进行手动测试是必要的，以识别自动化工具无法检测的交互问题。
可访问性的 WordPress 插件
- WP Accessibility：添加跳过链接，修复常见的可访问性问题，为用户偏好添加工具栏
- One Click Accessibility：添加前端可访问性工具栏（字体大小、对比度、链接高亮）
- 具有可访问性的起始模板： Astra 和 GeneratePress 在其基础主题中都具有强大的可访问性基础
注意：可访问性覆盖插件（添加带有“修复”按钮的浮动小部件）受到可访问性社区的广泛批评。它们并未使网站可访问——它们添加了一个表面层，实际上可能干扰辅助技术。专注于将可访问性构建到您的主题和内容中，而不是依赖于覆盖。
有关更多详细信息，请参阅官方文档： WCAG 指南, WordPress 可访问性团队.
常见问题
WordPress 默认情况下可访问吗？
WordPress 核心在可访问性方面有了显著改善。管理面板在很大程度上可以通过键盘导航，块编辑器包含 ARIA 标签。然而，您网站的可访问性在很大程度上取决于您使用的主题和插件。HTML 结构不良的主题将削弱 WordPress 内置的可访问性功能。
我法律上需要一个可访问的网站吗？
在许多司法管辖区，是的。ADA（美国）、欧洲可访问性法案（欧盟，2025 年 6 月生效）、AODA（加拿大）和类似法律要求网站必须可访问。具体要求取决于您的位置、商业类型和受众。请咨询法律专业人士以了解您情况的具体要求。
可访问性会影响 SEO 吗？
是的，二者有显著重叠。适当的标题结构、描述性 alt 文本、语义 HTML、快速页面加载和移动友好性对可访问性和 SEO 都有益处。遵循 WCAG 指南的网站往往排名更好，因为它们提供了根本上更好的用户体验。有关 SEO 最佳实践，请查看我们的清单。
页面构建器能创建可访问的网站吗？
Elementor 和其他页面构建器如果正确使用，可以创建可访问的内容。关键是确保适当的标题层次结构，为图像添加 alt 文本，使用语义小部件（按钮而不是样式化的 div），并测试键盘导航。构建器本身并不决定可访问性——使用它的方式才是关键。
WordPress 网站上最常见的可访问性错误是什么？
图像缺失或不充分的 alt 文本是最常报告的 WCAG 违规行为。第二常见的是颜色对比不足。这两者都很容易修复——它们需要关注和持续的实践，而不是技术专长。
我如何使 WooCommerce 可访问？
WooCommerce 的默认模板具有合理的可访问性。需要验证的关键领域：产品图像的 alt 文本、结账字段上的表单标签、购物车和结账过程的键盘可导航性，以及表单验证失败的可访问错误消息。使用可访问的主题作为基础可以显著减少所需的 WooCommerce 特定工作。
