如何利用WCAG 2.2构建更易访问的网站
内容提要
WCAG 2.2是W3C发布的最新网页无障碍指南，涵盖可感知、可操作、可理解、健壮四大原则。文章重点介绍前端开发中常见的A级和AA级要求，包括语义化HTML、图片替代文本、颜色对比度、键盘操作、焦点可见性、表单标签与错误提示、拖拽替代方案、目标尺寸、认证辅助等。强调无障碍应融入开发过程，而非事后审计，并建议结合自动工具与人工测试验证。
延伸解读
WCAG 2.2 新增标准对前端开发的影响
WCAG 2.2 引入了多项新的成功标准，如焦点不被遮挡（2.4.11）、拖拽替代（2.5.7）、目标尺寸（2.5.8）、冗余输入（3.3.7）和一致帮助（3.2.6）。这些标准更贴近现代 Web 开发中的常见问题，例如粘性头部遮挡焦点、拖拽操作缺乏替代、小尺寸点击目标等。开发者应关注这些新增要求，并在设计阶段就考虑解决方案，而不是事后修补。
无障碍不是“合规清单”，而是开发实践
文章强调，无障碍应融入开发过程，而非仅作为事后审计。WCAG 的合规性基于完整页面，而非单个检查项。开发者应避免仅修复个别问题就宣称“符合 WCAG”，而应系统性地将语义化 HTML、键盘支持、对比度等要求纳入日常开发。同时，自动化工具只能检测部分问题，人工测试（如键盘操作、缩放、屏幕阅读器）仍不可或缺。
ARIA 的正确使用：不替代原生 HTML
ARIA 角色并不自动提供键盘行为，开发者需自行实现交互。文章强调，优先使用原生 HTML 元素（如 button、input），仅在必要时使用 ARIA 补充状态（如 aria-expanded）。滥用 ARIA 可能导致可访问性更差。例如，div 加 role="button" 仍需手动添加键盘事件，而原生 button 已内置。因此，开发者应遵循“先原生，后 ARIA”的原则。
Q&A
WCAG 2.2 是什么？它由谁发布？
WCAG 2.2 是 W3C 发布的最新网页内容无障碍指南，它提供了一套标准，帮助开发者创建对残障人士更友好的网站。它基于四大原则：可感知、可操作、可理解、健壮。
WCAG 2.2 的四个原则是什么？
WCAG 2.2 的四个原则是：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）和健壮（Robust），简称 POUR。
如何为图片编写有用的替代文本？
为图片编写替代文本时，应关注图片在上下文中的目的，而不是简单描述外观。例如，对于图表，应提供图表传达的关键信息，如“收入从2024年的120万英镑增加到2025年的180万英镑”。装饰性图片应使用空的 alt 属性（alt=""），而功能图标（如搜索按钮）应通过 aria-label 提供可访问名称。
如何确保键盘用户能正常操作网站？
确保键盘用户能正常操作网站，需要做到：使用原生 HTML 控件（如 button、a）而不是自定义 div；确保没有键盘陷阱；提供可见的焦点指示；并测试完整的键盘操作流程，包括 Tab 导航、Enter/Space 激活控件、方向键操作自定义组件等。
WCAG 2.2 对表单错误提示有什么要求？
WCAG 2.2 要求错误提示必须能识别出错的字段，并描述错误内容（成功标准 3.3.1），同时提供如何纠正的建议（成功标准 3.3.3）。例如，对于邮箱输入错误，应显示“请输入格式为 name@example.com 的邮箱地址”，并使用 aria-describedby 将错误信息与输入框关联。
WCAG 2.2 对拖拽操作有什么要求？
WCAG 2.2 要求，如果功能依赖拖拽操作，必须提供不使用拖拽的替代方式（成功标准 2.5.7）。例如，在任务卡片上提供“上移”和“下移”按钮，让用户可以通过点击来重新排序，而不是只能拖拽。
如何测试网站的无障碍性？
测试网站无障碍性应结合多种方法：使用自动化工具进行初步检查，手动进行键盘测试（尝试用键盘完成实际任务），测试缩放和重排（如 200% 缩放），检查颜色对比度，手动测试表单错误，检查拖拽替代方案，并检查可访问性树。此外，最好邀请真实残障用户参与测试。
WCAG 2.2 对认证（如登录）有什么新要求？
WCAG 2.2 新增了成功标准 3.3.8 可访问认证（最低），要求认证步骤不能强制用户进行认知功能测试（如记住密码），除非提供替代方案或辅助机制。例如，允许使用密码管理器自动填充和复制粘贴密码，而不是阻止这些操作。
