使用 WCAG 2.1 测试 Drupal 网站的可访问性

已发表: 2023-05-16

您是否知道美国四分之一的成年人有残疾*？这是一个惊人的 6100 万人，他们可能会受到无法访问的网站的影响。

作为 Drupal 开发人员，您有能力通过确保您的站点符合 Web 内容可访问性指南 (WCAG) 来有所作为。在此博客中，我们将探讨在 Drupal 中测试 WCAG 2.1 可访问性的主要功能和最佳实践，以便您可以创建包容所有用户的网站。

什么是辅助功能 (A11y)

可访问性是指让尽可能多的人可以使用网站，特别是对于残疾人。 A11y指的是什么？ A11y 只是指“辅助功能”一词，其中 11 表示“A”和“Y”之间的字符数

WCAG 及其起源

WCAG 代表 Web 内容可访问性指南。它被认为是网站可访问性的标准化基准。 WCAG 准则由万维网联盟 (W3C) 创建，是使您的网站可供所有人使用的最佳和最简单方法。大多数政府和医疗保健组织都严格遵守 WCAG 准则，以确保网站遵守无障碍法（例如，第 508 条）。

WCAG的原则

如果您想采用 WCAG 合规性，则有四个主要的可访问性原则。它们遵循“POUR”首字母缩写词，代表可感知、可操作、可理解和稳健。

可感知

简而言之，内容应该可以被用户感知。这意味着他们必须能够识别呈现给他们的信息。它包括允许用户清楚地听到音频内容并确保它与背景噪音区分开来。

可操作

这一切都是为了确保用户可以舒适地浏览您的网站并且界面是用户友好的。网站不得有任何无法访问的部分或用户可能无法完成的任何步骤。设计网页内容时应避免快速移动和闪烁的内容。应该让没有键盘的人可以很容易地浏览网站，同时确保不能使用鼠标的用户可以使用键盘访问该网站。

可以理解

用户必须能够处理提供给他们的信息，并且能够理解如何使用和浏览网站。这包括使文本清晰、可读和可预测，以确保页面以用户友好和预期的方式显示。

强壮的

这突出表明该技术可以随着未来技术的发展而发展并构建您的网站。作为经验法则，如果技术发生变化和发展，内容也应该保持可访问性。它还需要被具有不同残疾的广泛用户理解，并且仍然易于理解。例如，该站点使其与最新版本的屏幕阅读器兼容。

为什么要遵守 WCAG

以下是 WCAG 实施的一些优势

一个易于访问的网站可以为您的品牌建立良好的信誉并改善搜索引擎优化。您的网站将在搜索引擎结果中排名更高。
一个易于访问的网站可以提高参与度、覆盖面和保留率，因为您将有效地消除阻止广泛人群访问您的内容的障碍。
一旦 WCAG 作为任何网站的一部分实施，它就被视为标准。

WCAG 2.0/2.1 成功标准：实施最广泛

站点上的每个输入字段都有适当的标签
装饰性内容以一种可以被辅助技术忽略的方式实现。例如，屏幕阅读器忽略的装饰图像
为所有预先录制的音频/视频内容提供字幕
为音频内容提供手语翻译
有意义的内容序列，例如任何页面上的标题都按顺序放置
用户能够暂停或停止音频或独立于系统整体音量控制音频音量以自动播放视频。
文字与图片的对比度为4.5:1，大尺寸文字与图片为3:1。对比度不适用于装饰性内容或标志或品牌名称
低或无背景音频。预先录制的音频/视频不包含任何背景噪音
内容的所有功能都可以通过键盘界面访问。不会有关键字陷阱。
为用户提供足够的时间来阅读和使用内容
如果内容是基于时间的，则允许用户暂停或调整时间限制
对于任何快速移动的内容，例如自动轮播，用户将看到暂停或停止它的选项
当经过身份验证的用户的会话过期时，用户将能够在重新身份验证后继续会话而不会丢失数据。
页面标题、标题和标签将描述网页的主题
键盘焦点可见且突出显示
可聚焦组件将按照表示意义和可操作性的顺序获得焦点。
网页的每个部分都附有其部分标题
除了装饰图片，所有图片都有有意义的替代文字
键盘和屏幕阅读器可以访问音频、视频、表单、下拉菜单、锚文本、URL 和替代文本
内容清晰度根据页面的缩放级别进行调整。内容清晰可见，即使在最大缩放级别
带有帮助上下文的页眉和页脚菜单应该在整个站点的所有页面上都可用
这些网站正确实施了悬停和焦点状态

屏幕阅读器

许多有视觉障碍的人使用屏幕放大镜和屏幕阅读器。屏幕阅读器是一种可以大声朗读屏幕上显示的数字文本的软件。一些屏幕阅读器示例包括：

JAWS (Windows) 和 Dolphin Screen Reader (Windows) 等付费产品。
NVDA (Windows)、ChromeVox (Chrome) 和 Orca (Linux) 等免费软件。
内置 OS（操作系统）的软件，如 VoiceOver（macOS、iPadOS、iOS）、Narrator（Windows）、ChromeVox（在 Chrome OS 上）和 TalkBack（Android）。

三个级别的可访问性

WCAG 2.1 有 3 个级别的成功标准

A 级：满足 WCAG 2.0 中定义的所有 30 个基本成功标准。至少，所有网站都应达到此级别的合规性。
AA 级：满足所有 A 级成功标准，并满足额外的 28 个可访问性成功标准。这个级别实现了更广泛的可访问性范围，并且通常是大多数开发团队要实现的目标。
AAA 级：网站应满足所有三个级别的成功标准，包括 28 个额外的成功标准。此级别通常保留给特殊站点，例如政府组织。

大多数与 WCAG 兼容的站点都广泛属于可访问性成功标准 A 级或 AA 级。

测试 Drupal 网站的可访问性

以下是对 Drupal 网站执行可访问性测试所遵循的步骤

运行 Google Chrome Lighthouse 审核并修复突出显示的可访问性问题
运行 Wave 工具审核
手动验证键盘高亮焦点和页面的 Tab 键顺序
使用所需的屏幕阅读器软件验证页面。例如，画外音
验证所有分辨率（例如宽桌面、笔记本电脑、选项卡和移动设备）上的站点可访问性
使用 W3C 的标记和 CSS 验证工具验证站点代码
使用 Kontrast 等 Chrome 扩展工具或 Color Contrast Analyzer 等应用程序验证网站的颜色对比度以确保其符合标准 (4:5:1)

Drupal 如何帮助达到可访问性标准

Web 开发必须包括可访问性，以确保网站功能正常并且可供残障人士访问。 Drupal 以其对可访问性的坚定奉献而闻名。查看 Drupal 如何提升可访问性以及它提供哪些工具和功能来帮助网站变得更加用户友好。

1. 构建 Drupal 的可访问性

Drupal 开发团队的目标一直是构建一个可供尽可能多的用户使用的平台。在开发核心 Drupal 平台时，遵循 Web 内容可访问性指南 (WCAG) 2.1 AA 级要求。这表明各种残疾，例如影响视觉、听觉、身体、语言、认知和神经系统的残疾，都可以访问 Drupal 网站。

2. 默认辅助功能

得益于响应式设计，Drupal 的默认主题能够适应各种屏幕尺寸和设备，适用于那些使用移动设备或辅助技术的人。
Drupal 创建语义 HTML 标记，帮助屏幕阅读器和其他辅助技术工具理解网站的结构。
Drupal 包含一个用于向照片添加替代文本的字段，这有助于盲人理解网站内容。
Drupal 支持键盘导航，这对于无法使用鼠标的用户来说至关重要。
易于使用和使用辅助技术导航的表单由 Drupal 生成且易于访问。

3. Drupal 提供可访问性插件和模块

为了提高网站的可访问性，Drupal 提供了多种可部署的可访问性模块和插件。几个受欢迎的辅助功能模块和插件如下：

Editoria11y Accessibility Checker：该模块检查网站的可访问性问题并提出解决方案建议。
CKEditor Accessibility Plugin：此插件改进了广泛使用的 Drupal 文本编辑器 CKEditor 的可访问性。
多合一辅助功能小部件：此模块包括一个辅助功能小部件，使用户能够更改网站的文本大小、对比度和其他与辅助功能相关的设置。
A11Y：表单助手：该模块有助于使所有 Drupal 网络表单符合可访问性标准
Block ARIA Landmark Roles：该模块将附加元素添加到块配置表单中，允许用户将 ARIA 地标角色和/或 ARIA 标签分配给块。

4. 社区对可访问性的强大支持

致力于可访问性的开发人员和设计人员构成了 Drupal 社区的很大一部分。 Drupal Accessibility Group 由社区领导，旨在让残障人士更容易使用 Drupal。该小组为开发符合 ADA 标准的 Drupal 网站提供指导、工具和最佳实践。

参考：

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

最后的想法

Drupal 是一种有效的开源内容管理系统，它提供各种功能、工具和插件来提高网站的可访问性。由于致力于可访问性及其以可访问性为中心的社区的力量，Drupal 是一个出色的平台，可用于构建可供残障人士使用和访问的网站。
我希望本文能为您提供有关使用 WCAG 2.1 进行可访问性测试所需的见解。想要从头开始构建可访问的 Drupal 网站，还是想让您当前的网站更易于访问？我们很乐意实现这一目标！让我们谈谈吧！