CSS 无障碍化：WCAG 合规性实践指南

在当今日益数字化的世界中，确保网络无障碍不仅是最佳实践，更是一种道德责任。无障碍网站为所有用户提供平等的机会和访问权限，无论他们的能力如何。本指南重点介绍如何利用 CSS 创建无障碍和包容性的网络体验，并遵守网页内容无障碍指南 (WCAG)。

什么是 WCAG？为何它如此重要？

网页内容无障碍指南 (WCAG) 是一套国际公认的建议，旨在让残障人士更容易访问网络内容。WCAG 由万维网联盟 (W3C) 制定，为网络无障碍提供了一个共享标准，满足全球个人、组织和政府的需求。WCAG 之所以重要，是因为：

它促进包容性，确保每个人都能访问和使用您的网站。
它改善了所有用户的用户体验，而不仅仅是残障人士。
它可以提升您网站的 SEO（搜索引擎优化）。
在某些地区，这可能是法律要求。例如，许多国家有法律规定政府网站和某些私营部门实体必须实现网络无障碍。美国的《美国残疾人法案》(ADA) 已被解释为适用于网站。在欧洲，《欧洲无障碍法案》为包括网站和移动应用在内的多种产品和服务设定了无障碍要求。澳大利亚则有《残疾歧视法》，其中也涵盖了网络无障碍。
它展示了社会责任感并增强您的品牌声誉。

WCAG 原则：POUR

WCAG 基于四个核心原则，通常用首字母缩写 POUR 来记忆：

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

实现无障碍的 CSS 技术

CSS 在实现 WCAG 合规性方面扮演着至关重要的角色。以下是一些需要考虑的关键 CSS 技术：

1. 语义化 HTML 和 CSS

正确使用语义化 HTML 元素为您的内容提供意义和结构，使其更容易被屏幕阅读器和其他辅助技术访问。CSS 则用于增强这些语义化元素的表现形式。

示例：

不要对所有内容都使用通用的 <div> 元素，而应使用像 <article>、<nav>、<aside>、<header>、<footer>、<main>、<section> 以及标题标签 (<h1> 到 <h6>) 这样的语义化元素。

HTML:

<article>
  <h2>文章标题</h2>
  <p>文章内容在此。</p>
</article>

CSS:

article {
  margin-bottom: 20px;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

通过使用 <article> 和 <h2>，您为内容提供了语义，这有助于辅助技术理解其结构和上下文。

2. 颜色与对比度

确保文本和背景颜色之间有足够的色彩对比度，以便视力不佳或色盲的用户能够阅读内容。WCAG 2.1 AA 级要求普通文本的对比度至少为 4.5:1，大号文本（18pt 或 14pt 粗体）的对比度至少为 3:1。

用于检查色彩对比度的工具：

WebAIM 的色彩对比度检查器： https://webaim.org/resources/contrastchecker/
无障碍调色板生成器： https://www.learnui.design/tools/accessible-color-palette-builder.html
Chrome DevTools：Chrome 开发者工具提供内置的色彩对比度检查功能。

示例：

/* 良好对比度 */
body {
  background-color: #000000; /* 黑色 */
  color: #FFFFFF; /* 白色 */
}

/* 不良对比度 */
body {
  background-color: #FFFFFF; /* 白色 */
  color: #F0F0F0; /* 浅灰色 */
}

第一个示例提供了良好的对比度，而第二个示例的对比度很差，许多用户会难以阅读。

超越颜色：不要仅依赖颜色来传达信息。除了颜色之外，还应使用文本标签、图标或其他视觉提示，以确保信息对每个人都是无障碍的。例如，不要只用红色高亮必填的表单字段，而应结合使用红色边框和像“(必填)”这样的文本标签。

3. 焦点指示器

当用户使用键盘（例如，使用 Tab 键）浏览您的网站时，提供清晰的视觉焦点指示器至关重要，这样他们才能知道哪个元素当前拥有焦点。浏览器的默认焦点指示器可能不够清晰，在某些情况下甚至不可见。使用 CSS 自定义焦点指示器，使其更加突出。

示例：a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* 一个蓝色轮廓 */ outline-offset: 2px; /* 在元素和轮廓之间创建空间 */ }

这段 CSS 代码在元素获得焦点时为其添加一个蓝色轮廓。outline-offset 属性在元素和轮廓之间增加了一点空间，提高了可见性。避免在没有提供合适替代方案的情况下完全移除焦点指示器，因为这会使您的网站对键盘用户无法使用。

4. 键盘导航

确保所有交互式元素（链接、按钮、表单字段等）都可以使用键盘进行导航。这对于无法使用鼠标的用户至关重要。HTML 源代码中元素的顺序应与页面上的视觉顺序相匹配，以确保逻辑导航流程。使用 CSS 在保持逻辑键盘导航顺序的同时，对元素进行视觉上的重新排列。

示例：

假设您想使用 CSS 将导航菜单显示在屏幕右侧。但是，为了无障碍性，您希望导航菜单在 HTML 源代码中首先出现，以便屏幕阅读器用户在主内容之前遇到它。

HTML:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>
<main>
  <h1>主内容</h1>
  <p>这是页面的主内容。</p>
</main>

CSS:

body {
  display: flex;
}

nav {
  order: 1; /* 将导航移动到右侧 */
  width: 200px;
  padding: 20px;
}

main {
  order: 0; /* 保持主内容在左侧 */
  flex: 1;
  padding: 20px;
}

通过在 CSS 中使用 order 属性，您可以将导航菜单在视觉上重新排列到屏幕右侧，同时保持其在 HTML 源代码中的原始位置。这确保了键盘用户将首先遇到导航菜单，从而提高了无障碍性。

5. 负责任地隐藏内容

有时您需要从视觉上隐藏内容，但要让屏幕阅读器能够访问到它。例如，您可能想为一个仅由图标表示的链接或按钮提供额外的上下文。避免使用 display: none 或 visibility: hidden，因为这些属性会同时对视觉用户和屏幕阅读器隐藏内容。相反，应使用一种技术，在视觉上隐藏内容的同时保持其对辅助技术的可见性。

示例：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

这个 CSS 类在视觉上隐藏元素，同时保持其对屏幕阅读器的可访问性。将此类应用于您希望被屏幕阅读器读取但不在视觉上显示的文本。

HTML 示例：

<a href="#">编辑 <span class="sr-only">项目</span></a>

在此示例中，文本“项目”在视觉上是隐藏的，但会被屏幕阅读器读取，为“编辑”链接提供了上下文。

ARIA 属性 (Accessible Rich Internet Applications)：明智地使用 ARIA 属性来增强动态内容和复杂 UI 组件的无障碍性。ARIA 属性为辅助技术提供额外的语义信息。但是，避免使用 ARIA 属性来修复可以通过语义化 HTML 解决的无障碍问题。例如，使用 ARIA 角色和属性来定义自定义小部件，并在内容动态更改时向屏幕阅读器提供状态更新。

6. 响应式设计与无障碍性

确保您的网站是响应式的，能够适应不同的屏幕尺寸和设备。这对于可能在移动设备或平板电脑上使用辅助技术的残障用户至关重要。使用 CSS 媒体查询根据屏幕尺寸和方向调整内容的布局和呈现方式。

示例：

@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* 在较小屏幕上垂直堆叠导航项 */
  }
}

这段 CSS 代码使用媒体查询，在较小的屏幕上将导航项的方向更改为垂直，使其在移动设备上更易于导航。

7. 动画与动态效果

过多或实施不当的动画可能会给某些用户带来癫痫发作或晕动症。对于偏好减少动态效果的用户，使用 CSS 来减少或禁用动画。prefers-reduced-motion 媒体查询允许您检测用户是否已请求系统尽量减少其使用的动画或动态效果。

示例：

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none !important;
    transition: none !important;
  }
}

这段 CSS 代码为在其操作系统中启用了“减少动态效果”设置的用户禁用了动画和过渡。考虑提供一个控件，允许用户在您的网站上手动禁用动画。

8. 使用辅助技术进行测试

确保您的网站无障碍的最有效方法是使用辅助技术进行测试，例如屏幕阅读器、屏幕放大镜和语音识别软件。使用多种辅助技术来全面了解您网站的无障碍性。

流行的屏幕阅读器：

NVDA (NonVisual Desktop Access)：一款免费开源的 Windows 屏幕阅读器。
JAWS (Job Access With Speech)：一款流行的商业 Windows 屏幕阅读器。
VoiceOver：macOS 和 iOS 的内置屏幕阅读器。

其他测试技巧：

键盘导航：测试所有交互元素是否都可以使用键盘访问，以及焦点顺序是否合乎逻辑。
表单无障碍性：确保表单字段有正确的标签，并且错误信息清晰易懂。
图片替代文本：验证所有图片是否都有描述性的替代文本，准确传达图片的内容和功能。
动态内容：测试动态内容更新是否能正确地向屏幕阅读器播报。

高级 CSS 无障碍技术

1. 用于主题化的自定义属性 (CSS 变量)

使用 CSS 自定义属性（变量）来创建具有高对比度选项的无障碍主题。这允许用户根据个人需求自定义网站的外观。

示例：

:root {
  --text-color: #333;
  --background-color: #fff;
  --link-color: #007bff;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

a {
  color: var(--link-color);
}

/* 高对比度主题 */
.high-contrast {
  --text-color: #fff;
  --background-color: #000;
  --link-color: #ff0;
}

此示例为文本颜色、背景颜色和链接颜色定义了 CSS 自定义属性。.high-contrast 类覆盖了这些变量以创建高对比度主题。然后，您可以使用 JavaScript 在 <body> 元素上切换 .high-contrast 类以在主题之间切换。

2. 用于无障碍布局的 CSS Grid 和 Flexbox

CSS Grid 和 Flexbox 是强大的布局工具，可用于创建无障碍和响应式布局。但是，务必谨慎使用它们，以确保元素的视觉顺序与 DOM 顺序匹配。

示例：

使用 Flexbox 或 Grid 时，请确保 Tab 键顺序保持逻辑性。如果使用不当，order 属性可能会破坏 Tab 键顺序。

3. `clip-path` 与无障碍性

clip-path 属性可用于创建视觉上有趣的形状和效果。但是，在使用 clip-path 时要小心，因为它有时可能会遮挡内容或使其难以交互。确保被裁剪的内容仍然可以访问，并且裁剪不会干扰键盘导航或屏幕阅读器的访问。

4. `content` 属性与无障碍性

CSS 中的 content 属性可用于在元素之前或之后插入生成的内容。但是，生成的内容并不总是能被屏幕阅读器访问。请谨慎使用 content 属性，并考虑使用 ARIA 属性为辅助技术提供额外的语义信息。

真实案例与研究

让我们来看一些真实世界的例子，以说明这些原则是如何在不同地区和背景下应用的。

政府网站：许多国家，包括英国、加拿大和澳大利亚，对政府网站有严格的无障碍指南。这些网站通常是 WCAG 合规性的典范，展示了在语义化 HTML、色彩对比度和键盘导航方面的最佳实践。
电子商务平台：像亚马逊和阿里巴巴这样的全球电子商务巨头在无障碍方面投入巨资，以覆盖更广泛的受众。他们通常会实现图片替代文本、产品浏览的键盘导航以及可调节字体大小以提高可读性等功能。
教育机构：世界各地的大学和学院越来越注重创建无障碍的在线学习环境。他们通常为视频提供文字记录、为音频内容提供字幕，并提供课程材料的无障碍版本，以适应有残疾的学生。

需要避免的常见无障碍性错误

色彩对比度不足：使用难以让视力不佳用户阅读的颜色组合。
图片缺少替代文本：未能为图片提供描述性的替代文本，使屏幕阅读器用户无法访问它们。
键盘导航性差：创建难以或无法使用键盘导航的网站。
使用表格进行布局：使用 HTML 表格进行布局，而不是使用语义化 HTML 元素。
忽略焦点指示器：移除或遮挡视觉焦点指示器，使键盘用户难以知道哪个元素拥有焦点。
仅依赖颜色传达信息：将颜色作为传达信息的唯一方式，使色盲用户无法访问。
不使用辅助技术进行测试：未能使用屏幕阅读器等辅助技术测试您的网站，以识别和修复无障碍问题。

结论：拥抱无障碍，共创更美好的网络

无障碍不仅是一项技术要求，它也是创建一个包容且人人可访问的网络的基本方面。通过实施这些 CSS 技术并遵守 WCAG 指南，您可以创建不仅视觉上吸引人，而且对所有用户（无论其能力如何）都可用和愉快的网站。将无障碍作为您网站开发过程中不可或缺的一部分，您将为建立一个更具包容性和公平的数字世界做出贡献。

资源与延伸阅读

网页内容无障碍指南 (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
Web 无障碍倡议 (WAI): https://www.w3.org/WAI/
WebAIM: https://webaim.org/
Deque 大学: https://dequeuniversity.com/