您需要了解的有关网站可访问性的所有信息

已发表: 2022-02-15

每个访问您网站的用户都应该有权获得可理解的用户体验,无论他们的能力如何。 这不仅是我们的意见,而且在某些国家,这是法律。 但这并不是确保您的网站符合可访问性标准的唯一原因。 根据一份关于残疾的报告,有 10 亿人患有残疾,相当于世界人口的 15% 。 有身体、视觉、认知、神经、运动和听力障碍的人将使用您的网站。 虽然使用这些数字作为一个理由感觉令人反感,但这是大量潜在访问者。 让您的网站可供所有人使用是值得的。

可访问网站与那些通常无法访问的网站之间的差距通常发生在预算中。 使您的网站具有包容性只是在开发过程中需要更多的努力,而更多的努力意味着更多的钱。 但是,当战略性地完成并使用像 Drupal 这样的 CMS 时,它不一定是一个重大的努力。 Drupal 核心支持设计和开发符合 WCAG 2.0 和 ATAG 2.0 标准的网站。 事实上,有一个完整的社区(Drupal Accessibility 社区)致力于改进和跟上可访问性标准。 你甚至可以说可访问性是 Drupal 的核心优势。

如果您要重建您的网站,这一切都很好,但如果您正在使用现有的网站呢? 让我们深入研究 Web 可访问性以及如何知道您的网站是否可访问。

网站可访问性

什么是无障碍网页?

Web 可访问性是 Web 开发中非常重要的一个方面。 用外行的话来说,网络可访问性是确保每个人都可以访问您的网站,无论他们的残疾如何。 尽管人们经常假设,可访问性不仅仅与残疾人有关。 作为一个身体健全的人,您可能会发现自己处于某些情况下——情境性或临时性的——这可能会影响您访问网站的方式。

为什么 Web 可访问性很重要

另一个误解是,网络可访问性主要用于创建积极的品牌形象。 但是,拥有一个可访问的网站比许多人想象的要多得多。

  • 扩大您的受众范围
  • 避免法律问题(请记住 2019 年针对碧昂丝的诉讼,当时她的网站不符合 ADA(美国残疾人法案))
  • 改善可访问性的用户体验也意味着您正在提高整体 UX 分数
  • 提高您的网站在搜索引擎上的排名

也就是说,最近以目标为导向的品牌的增长和普及确实表明,包容性可能是一个关键的品牌差异化因素。

一致性和级别

万维网联盟 (W3C) 开发并发布了一套指南 - WCAG(Web 内容可访问性指南),用于管理 Web 可访问性标准。 这些标准(WCAG 2.0、WCAG 2.1 和 WCAG 2.2)的成功标准具有三个一致性级别:

  • A级
  • AA 级
  • AAA级

A 级- 这是可访问性的最低级别,涵盖了可访问性功能的最基本要求。

AA级 - 此级别需要 A 级中的所有内容以及一些附加要求。 当一个网站符合这个级别时,这是一件大事,因为许多最大的可访问性障碍都被清除了。

AAA 级- AAA 级需要 A 级和 AA 级的所有内容以及一些额外的要求。 大多数网站都很难达到这个级别,它是WCAG标准下的最高级别的可访问性。

你怎么知道你的网站是否可以访问?

WCAG 制定了 4 项原则和 13 项 Web 可访问性指南。 不遵守这四项原则中的任何一项都会使残障用户无法访问您的网站。 这些原则被称为 POUR 原则

  1. 可感知的
  2. 可操作
  3. 可以理解
  4. 强大的

感知的 - 可感知的所有指南都围绕确保人们能够找到您的内容。

可操作- 您需要确保您的网站是可操作的。 人们必须能够使用您的网站。

可理解 - 人们必须能够理解您的网站。

健壮- 您的网站应与所有浏览器、操作系统和设备兼容。

无障碍指南

现在,每个原则都有自己的一套指导方针,我们将在这里讨论:

可感知的准则

1.1) 替代文本- 第一个可感知指南,可感知 1.1要求所有非文本内容都具有替代文本。 这意味着图像需要有有意义的替代文本。 替代文本应描述图像中发生的情况。

1.2) 基于时间的媒体-可感知的 1.2要求有基于时间的媒体的替代选项。 为有听力障碍的人在视频中添加隐藏式字幕。 关闭字幕可以帮助给他们提供背景信息。

1.3) 适应性——可感知 1.3要求内容可以以不同的方式呈现,而不会丢失上下文。

1.4) Distinguishable - perceivable 的最后一条准则是Perceivable 1.4 ,它要求内容可以在视觉上与其背景分开。 这意味着文本和背景颜色之间应该有足够的对比度。 文本需要具有 4.5 的最小对比度。

可操作指南

2.1) 可访问键盘- 第一个可操作指南 2.1要求网站的所有部分都可以仅使用键盘访问。

2.2) 足够的时间 - 可操作 2.2要求人们有足够的时间来使用您网站上的内容。 您必须给用户时间来完成任务而不会感到匆忙。 你还需要考虑到不同的人有不同的能力,有些人做事的速度可能会慢一些。

2.3) 癫痫发作和身体反应 - 可操作 2.3要求内容的设计方式不会导致癫痫发作。 动画和视频每秒闪烁次数不应超过 3 次。

2.4) 可导航 - 可操作 2.4要求人们可以浏览网站并了解他们在网站中的位置。 页面上的所有链接、输入和按钮都应具有焦点状态,以指示用户在使用选项卡导航时用户在屏幕上的位置。

2.5) 输入模式- Operable 的最后一个准则是Operable 2.5 ,它要求网站的所有部分都可以使用键盘以外的其他输入设备访问。 基本上,您需要确保您的网站可以使用鼠标、触摸屏设备和语音转文本。

可理解的准则

3.1) 可读性——可理解性 3.1要求内容可读且易于理解。 使用简单的语言并尽量避免使用行话。

3.2) 可预测 - 可理解 3.2要求网页的外观和操作方式是可预测的。 每个页面的内容会有所不同,但页面的主要结构应该保持不变。 导航、链接顺序和搜索应始终位于页面上的同一位置。

3.3) 输入辅助——可理解的 3.3要求人们易于纠正和避免错误。

强大的指导方针

4.1) Compatible - 在 robust 下只有一个准则,那就是4.1 。 这要求网站应与所有浏览器、操作系统和设备兼容。 这可以通过编写有效的语义 HTML 来实现。 如果出于某种原因该网站仍需要一些辅助功能帮助,请添加一些 ARIA 属性。

如何测试可访问性?

最后,您希望将可访问性测试纳入您的网站管理流程。 例如,您可以通过页面来测试键盘可访问性。 幸运的是,互联网上有许多工具可用于自动化测试:

  • 海浪
  • 灯塔

参考网站

有关标准和指南,请参阅以下 W3C 站点。

  • https://www.w3.org/
  • https://www.w3.org/WAI/
  • https://www.w3.org/WAI/standards-guidelines/wcag/
  • https://www.w3.org/WAI/WCAG21/quickref/