Drupal 网站可访问性审查：主要功能和有用的模块

已发表: 2022-03-16

万维网创建于 37 年前——但直到最近几年，一些基本的东西才成为标准。 其中之一是网站可访问性。

考虑如何使网站易于访问，您需要知道一些 CMS 从一开始就以可访问性为重点——Drupal。我们邀请您参观其内置的辅助功能和附加的辅助模块。

Drupal 可访问性：介绍性说明

可访问性（简称 a11y）在 Drupal 哲学的“源代码”中。后者非常注重包容性，并努力让所有用户都可以访问网站，无论他们是否有残疾（听觉障碍、视觉障碍、难以握住鼠标等）。

由万维网联盟制定的关键可访问性标准——WCAG 和 ATAG——具有从 A 到 AAA 的合规级别。据 Drupal 8 核心可访问性维护者 Mike Gifford 说，社区开始在 Drupal 7 中实现 WCAG 2.0 AA 合规性。在 Drupal 8 中，他们还开始合并 ATAG 2.0 AA 的元素并寻找符合新 WCAG 2.1 AA 的方法。

Drupal 8 中的可访问性工作取得了巨大进展，并解决了许多非常重要的问题。这使得第 8 版具有固有的可访问性，它被列为 Drupal 8 的最大优势之一，它激励许多企业升级到 Drupal 8 或聘请 Web 开发团队从头开始构建站点。

关键的内置 Drupal 辅助功能

那么 Drupal 究竟是如何消除任何用户与网站交互的障碍的呢？是什么让屏幕阅读器和其他辅助软件变得友好？我们现在正在审查这个。

新的可访问前端主题 Olivero

除了 Drupal 8 中的可访问主题之外，为 Drupal 9 创建的新的默认前端主题 Olivero 是所有内容（颜色、对比度、按钮等）的可访问性示例。该主题符合 WCAG，与最优秀的可访问性专家合作创建，并在考虑可访问性反馈的情况下进行了全面测试。它的名字归功于程序员Rachel Olivero ，他是网站可访问性的著名倡导者。我们将在 Drupal 9.1 核心中看到这个主题，因此为即将推出的 Drupal 9 做好准备是有意义的，它承诺将轻松升级。

使用 HTML5 和 WAI-ARIA 提供更好的语义

在 D8 中，屏幕阅读器可以更轻松地使所有网页部分和组件的目的和行为变得清晰。这提供了更加用户友好的导航。

开发人员可以使用 Drupal 8 配备的语义 HTML5 元素。最新版本的标记语言具有特别干净的代码和屏幕阅读器友好度。
当原生 HTML5 标记不够用时，可以向其中添加 WAI-ARIA 属性（角色、状态和属性）。他们将为屏幕阅读器提供更多信息。 WAI-ARIA 对于交互式 UI 尤其有用。

图像所需的 ALT 文本

让视障观众可以访问图像至关重要。这里的一个重要角色属于 ALT 文本（又名替代文本）。它描述了图像上的内容，因此屏幕阅读器可以理解。

在 D8 中默认需要 ALT，因此不可能在没有描述的情况下添加图像 - 它会拒绝保存图像并显示提醒。这是 Drupal 8 a11y 的一个很好的例子。这可以在图像字段或 CKEditor 中被覆盖，但为什么有人想要呢？

默认值符合可访问性标准。还应该注意的是，就像其他可访问性做法一样，ALT 标签在 SEO 方面非常有用。

可访问的内联表单错误

当用户提交表单时，他们可能会提交一些错误的信息。表单错误通常列在表单顶部，错误填写的字段以红色突出显示。

但是，视障用户可能看不到突出显示，屏幕阅读器无法帮助他们将特定错误消息与特定表单字段相关联。

为了解决这个问题并提高表单的可访问性，D8 核心具有内联表单错误模块。多亏了它，错误会显示在特定字段旁边，因此很容易理解需要修复的内容。该模块默认不启用，但您可以选择启用它。

听觉警报

当页面上发生一些用户应该知道的更改时，屏幕阅读器可能不会注意到它。听觉警报功能正是您所需要的。它允许您通过需要读出的消息通知屏幕阅读器这些更改。 Drupal 8 核心中的这个特性使用了一个 JavaScript 方法Drupal.announce() 。它遵循 WAI-ARIA 实践。

受控标签

许多人更喜欢使用键盘上的 Tab 键而不是鼠标在页面上移动（对于某些人来说，这是他们唯一的选择）。 Drupal 8 有一个称为TabbingManager的 JavaScript 功能，它允许您引导这些用户按逻辑顺序浏览重要的页面元素。在它的帮助下，您可以控制用户可以进入的确切位置。这是另一个重要的辅助功能。

更好的对比

标题和常规文本中的足够对比度对于视力低下或其他视觉障碍的人来说至关重要。在 Drupal 8 中，核心主题改进了对比度。另一个好消息是，Olivero 主题还遵循高对比度、饱和色彩和负空间的最佳设计原则，将注意力吸引到最重要的事情上。

CSS 显示选项

Drupal 8 引入了一组 CSS 类，允许您控制在需要时如何隐藏内容的细微差别。例如，它可以对用户隐藏，但对屏幕阅读器保持可见。这些 CSS 类包括： (1) 隐藏、(2) 视觉隐藏、(3) 视觉隐藏、可聚焦和 (4) 不可见。

媒体库中的键盘可访问性

Drupal 8 非常关注无法握住鼠标或无法正常查看屏幕的用户的键盘可访问性。一个绝妙的例子是 D8.8 中在完整的媒体库与 CKEditor 集成后引入的媒体库中的键盘可访问性。用户可以在创建或编辑内容、选择媒体并将其嵌入其中时跳转到媒体库——所有这些都只需使用键盘即可。

贡献的 Drupal 可访问性模块

有很多有用的附加模块能够进一步扩展 Drupal 的辅助功能。

自动替代文本

除非您添加 ALT 标签，否则屏幕阅读器无法理解图像上的内容。人工智能软件可以帮助您进行图像识别和自动 ALT 生成。 D8 中的自动替代文本模块使用 Microsoft Azure 认知服务 API 执行此任务。它以人类可读的语言生成图像描述。这在具有大量图像的站点上特别有用。

CKEditor 缩写

使内容易于理解是最佳 Web 可访问性实践的一部分。 CKEditor Abbreviation 模块向 CKEditor 添加了一个按钮，可让您通过 D7 或 D8 站点上方便的上下文菜单插入和编辑缩写。

现场改进

Siteimprove 模块将您的 Drupal 7 或 Drupal 8 站点连接到 Siteimprove 智能平台。它分析您的内容质量，包括可访问性问题，并为您提供有价值的改进提示。该工具允许您检查您的内容页面，然后在发现的问题得到解决后重新检查它们以查看不需要进一步的操作。

风格切换器

D7 和 D8 中的样式切换器模块允许用户提供可直接添加到管理仪表板中的备用样式表。然后，用户可以选择他们想要查看页面的样式。该模块将此选项作为块中的链接列表提供。它还使用 cookie 为返回的用户提供他们曾经选择的样式表。

高对比度

Drupal 7 和 Drupal 8 高对比度模块允许您的用户切换到主题的高对比度版本。他们只需按一次或两次 Tab 键，就会出现“切换高对比度”链接。当他们单击它或按 Enter 键时，他们将进入高对比度模式。

文本调整大小

使视力不佳或其他视觉问题的用户能够轻松地将文本大小调整为适合他们的大小。这是一个关键的可访问性需求。 D7 和 D8 的文本调整大小模块可以帮助您。它创建一个带有两个按钮的块来增加和减少字体大小。该块是使用 jQuery 和 jQuery Cookie 插件构建的，并且是可主题化的。

阻止 ARIA 地标角色

Drupal 7 和 Drupal 8 网站都可以通过 Block ARIA Landmark Roles 增强他们对最佳 WAI-ARIA 实践的使用以实现可访问性。它将元素添加到您的块配置表单中，使用户能够为每个块分配 ARIA 地标角色或标签。

合法的

干净的 HTML 总是对屏幕阅读器更友好。 htmLawed Drupal 模块使用 htmLawed PHP 库使您的 Drupal 7 或 Drupal 8 站点上的 HTML 更清晰。该模块运行速度快，可高度配置，并涵盖所有 HTML 元素。

HTML 净化器

另一个为 Web 可访问性处理干净 HTML 的模块是 HTML Purifier。它存在于 Drupal 7 和 8 中。该模块使用符合标准的 HTML 过滤器库 — HTML Purifier。它会删除恶意代码并帮助您使您的 HTML 符合 W3C 的规范。

让我们帮助您充分利用 Drupal 可访问性

是时候让所有用户都可以访问您的网站了。如果您愿意，我们的网络代理专家随时准备为您提供帮助：

安装和配置 Drupal 可访问性模块
将您的站点迁移到更易于访问的 Drupal 8（并为 Drupal 9 做好准备）
由于其可访问性功能，将您的站点从另一个 CMS 移动到 Drupal
全面测试您的网站可访问性
创建您的网站所需的任何辅助功能

与我们联系并可以访问！