Web 可访问性（Accessibility，简称 a11y）是确保所有人，包括残障人士，都能平等地访问和使用 Web 内容的实践。构建可访问的 Web 应用不仅是一种道德责任，在许多国家和地区，这也是法律要求。本文将介绍如何创建符合 WCAG（Web 内容可访问性指南）标准的无障碍 Web 应用。

理解 WCAG 标准

WCAG 是由 W3C 制定的一系列指南，旨在使 Web 内容对残障人士更加可访问。WCAG 2.1 基于四个主要原则：

• 可感知（Perceivable）：信息和用户界面组件必须以用户可以感知的方式呈现。
• 可操作（Operable）：用户界面组件和导航必须是可操作的。
• 可理解（Understandable）：信息和用户界面的操作必须是可理解的。
• 健壮（Robust）：内容必须足够健壮，以便能被各种用户代理（包括辅助技术）可靠地解释。

语义化 HTML

使用语义化的 HTML 是构建可访问性 Web 应用的基础。语义化 HTML 不仅提供了结构，还传达了内容的含义。

  
网站标题


  
首页
  
关于




  
网站标题


      

使用正确的语义化元素，如 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 等，可以帮助屏幕阅读器和其他辅助技术更好地理解页面结构。

键盘可访问性

许多用户依赖键盘而非鼠标来导航网页。确保所有交互元素都可以通过键盘访问和操作是非常重要的。

  点击我



      

此外，确保焦点顺序合理，并提供可见的焦点指示器，这对键盘用户来说非常重要。

ARIA 属性

ARIA（Accessible Rich Internet Applications）是一组属性，可以添加到 HTML 元素上，以提供额外的语义信息和增强可访问性。

  表单提交成功！




  选择一个选项


  
选项 1
  
选项 2

      

但要注意，ARIA 应该谨慎使用。如果可以使用原生 HTML 元素实现相同的功能，那么应该优先使用原生元素。

颜色和对比度

确保文本和背景之间有足够的对比度，这对于视力障碍用户非常重要。WCAG 2.1 要求：

• AA 级：普通文本的对比度至少为 4.5:1，大文本至少为 3:1。
• AAA 级：普通文本的对比度至少为 7:1，大文本至少为 4.5:1。

此外，不要仅仅依赖颜色来传达信息，应该结合使用其他视觉提示，如图标、文本或模式。

图像和多媒体

为所有非装饰性图像提供替代文本，为视频提供字幕和音频描述，为音频提供文本记录。

表单可访问性

表单是用户与网站交互的主要方式之一，确保表单可访问对于创建包容性体验至关重要。

  

    姓名
    
    

  
  
  

    邮箱
    
  
  
  提交

      

关键点包括：

• 使用 <label> 元素关联表单控件
• 提供清晰的错误消息和验证反馈
• 确保表单可以通过键盘完成
• 使用 aria-required, aria-describedby 等属性提供额外信息

响应式设计和缩放

确保你的网站在不同设备上都能正常工作，并支持文本缩放和页面缩放，这对于视力障碍用户非常重要。

/* 使用相对单位 */
body {
  font-size: 16px;
}

h1 {
  font-size: 2em;  /* 32px */
}

p {
  font-size: 1rem;
  line-height: 1.5;
}

/* 确保内容在缩放时不会被截断 */
.container {
  max-width: 100%;
  overflow-x: auto;
}
      

测试和工具

定期测试你的网站可访问性是非常重要的。有许多工具可以帮助你进行可访问性测试：

• 自动化工具：如 Axe, WAVE, Lighthouse 等。
• 屏幕阅读器：如 NVDA, JAWS, VoiceOver 等。
• 键盘测试：尝试仅使用键盘导航你的网站。
• 对比度检查器：确保颜色对比度符合 WCAG 标准。

总结

构建可访问的 Web 应用是一个持续的过程，需要在设计和开发的各个阶段都考虑可访问性。通过遵循 WCAG 标准，使用语义化 HTML，确保键盘可访问性，正确使用 ARIA，注意颜色对比度，为多媒体提供替代内容，以及创建可访问的表单，我们可以创建真正包容所有用户的 Web 体验。

记住，可访问性不仅仅是为了残障用户，它最终会提升所有用户的体验。通过构建可访问的 Web 应用，我们可以确保每个人都能平等地访问和使用我们的内容。