如何执行 WCAG 合规性的可访问性审核

WCAG（Web 内容可访问性指南）由万维网联盟 (W3C) 创建，是全球公认的可访问性标准。

在本文中，我们概述了执行审核以验证是否符合 WCAG 2.1 标准所需的任务。

可访问性是为了确保更广泛的受众可以访问您的网站内容和功能。

例如：

• 临时无障碍障碍——有人丢了眼镜！
• 设备问题 - 它们位于限制性设备上，例如手机
• 情境——明亮的阳光、黑暗的房间等
• 永久性残疾——没有视力、听力、认知问题等。
• 带宽问题 - 连接速度非常慢

如您所见，您需要考虑多种形式的残疾。

WCAG 指南分为以下几部分：

在浏览每个部分之前，这里列出了您需要执行测试的内容：

1. 可感知

• 仅包含文本的浏览器选择（例如 Lynx）
• 用于检查 alt 标签、标题等的工具（例如 ScreamingFrog）
• 屏幕阅读器，例如 NVDA
• 网站可访问性测试工具
• Chrome 开发工具
• 访问一系列设备

这是为了确保内容可以以各种形式访问。 例如，某人可以看到内容、收听内容、使用触摸来理解内容等。这还包括菜单和按钮等用户界面项目。

WAVE 可访问性工具是可用于查找该领域问题的众多工具之一：

在上面的例子中，页面做得很好。 它只有 1 个错误和 5 个与颜色对比度问题有关的错误。

一个错误是此页面未指示语言。

但是页面上有很多好东西。 例如，在右侧的图像中，您可以看到 2 个以绿色突出显示的元素，它们都使用“ARIA”标签来帮助屏幕阅读器理解此内容。 稍后我们将对此进行更多解释。

让我们来看看指南和成功标准。

准则 1.1 - 提供非文本内容的替代文本

是否有非文本内容的替代文本？

当屏幕上有非文本内容时，您需要验证每个元素都有描述。

在我们给出示例之前，我想讨论一下 ARIA，它是一种为元素提供附加描述的方式，并且只应在标准 HTML 不可用时使用。

当您使用 HTML 时，您会自动获得键盘控制、焦点等，这是首选，但 ARIA 可以用作备份。

什么是咏叹调？

ARIA（可访问的富互联网应用程序）是一种描述无法使用标准 HTML 充分描述的内容的方式。 它的主要目的是用于屏幕阅读器。 如果您可以使用标准 HTML，那么这是最好的方法，因为它会自动为元素和键盘控件提供焦点。 当这不可能时，ARIA 是替代方案。

描述性图像

描述性图像是描述某种意义的东西。 例如，丰田普锐斯汽车的图片。

如果您看不到图片，那么需要有一种方法来描述这张图片所代表的内容，这就是 Alt 标签的来源。

在 WordPress 等平台中，您可以在上传图片时添加 alt 标签：

我们经常更新此 alt 标签以确保包含相关关键字以用于 SEO 目的，但我们需要超越这一点。

Screaming frog 将对您网站上的所有图像进行分析，并显示哪些图像没有 alt 标签、重复的 alt 标签、太长的 alt 标签或太短的 alt 标签！

您还可以在图像详细信息旁边查看图像：

装饰形象

装饰图像是用于增强设计的图像，但图像中没有任何值得描述的东西！

装饰图像应使用 CSS 背景属性，除非有充分的理由使用“img”标签。 如果屏幕阅读器看到 CSS 背景属性，它就知道忽略图像。

这是在澳大利亚的 My Emergency Doctor 网站中描述为背景图像的图像示例：

这是这背后的代码：

因为这个图像没有被列为 <img> 它使用 role=img 让屏幕阅读器知道这是一个图像。 它使用“Aria-label”对图像进行良好准确的描述。 它还将图像定义为“背景图像”。

注意：如果你使用'img'标签作为背景图片，你需要定义一个空的alt标签，例如alt=””

什么时候应该使用 <img> 而不是背景色？

当图像是内容的重要部分时，请使用 <img>。 例如，如果您有一个产品图片，那么这是 <img> 。 您还可以拥有仅用于装饰目的的背景图像的图像，将这些图像描述为图像（将由 Google 索引）是没有意义的。

在上面的示例中，您可能会质疑显示的图像是否应该定义为 img 但它是一张股票照片，他们决定将其定义为背景图像而不是可以。

注意：<img> 是一个 HTML 标记，但 background-image 是您使用的 CSS 样式。

用户界面控件

有各种 UI 控件需要一些文本来描述它是什么。

例如，按钮或表单控件。

按钮用于帮助完成一项功能。 它可能是一个只有一个图标的按钮和一个在按钮中包含文本的按钮。 两者都可以区别对待。

使用 ARIA，您可以定义 'role=button'，但使用标准 HTML，您可以使用 <button> 标签。 你应该使用哪一个？

这是一个按钮示例，其中只有一个 X，它要求我们创建一个“aria-label”来描述按钮的作用。

<button aria-label=”Close” onclick=”myDialog.close()”>X</button>

以下是您需要测试的典型 UI 控件列表：

如果您使用表单，则需要确保每个字段都正确标记。 这是一个良好标签的示例：

<label for=”fname”>名字：</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>姓：</label><br>

<输入类型=”文本” id=”lname” name=”lname”>

</form>

注意：对于表格，您还应确保：

• 清楚地标记必填字段。 如果一个字段是强制性的，那么它也需要在 html 中正确标记。
• 有用户说明（通常在表格顶部）
• 用户在填写表单字段时出错（例如，日期格式不正确，这是您需要输入的内容）时会得到帮助。

验证码

这可能是非常有问题的，具体取决于它是如何实现的。 例如，当显示图片并要求您识别哪张图片包含交通信号灯时！

我们将对实施情况进行审查并提出相关建议。

多媒体内容

视频/音频至少需要一个描述来识别视频/音频是关于什么的。

链接

您要确保链接在页面上清晰突出（例如不同的颜色），并且它们使用相关的锚文本和链接描述。

指南 1.2 – 基于时间的媒体

该区域旨在满足需要更易于访问的视频和音频内容。

是否有仅可用于预先录制的音频或仅用于视频的转录？

视频转录是将视频的音频翻译成文本。 转录不包括描述视频中显示的视觉效果等内容的音频信息。 这是分开处理的。

转录提示！

Rev.com 是一项出色的服务，可为您的音频/视频创建字幕/转录。 他们甚至为 Zoom 视频提供实时字幕服务。

是否有可用于预录音频的字幕？

字幕是出现在视频中的文本，用于告知用户该人在说什么。

是否有音频描述或替代媒体（预先录制） ？

当您观看视频时，字幕可能不足以描述视频中显示的内容。 这也是需要音频描述的地方。

例如，音频描述可以描述某人说话时背景中发生的事情，从而为用户提供一些上下文。

这是一个包含音频描述的转录示例。

这对您的网站访问者来说非常有用，但对 SEO 也有好处！

选择可访问播放器的提示：

您要确保您使用的视频播放器支持可访问性所需的内容：

1. 支持隐藏式字幕
2. 音频描述可以打开/关闭
3. 可以在媒体播放器上使用关键字控制
4. 媒体播放器适用于不同的设备和浏览器
5. 所有控件均可访问。

有现场音频的字幕吗？

您的网站上通常不会有任何实时视频或音频内容，但如果您这样做了，那么您需要同时创建字幕，以便用户看到该人说话时显示的字幕。

有一些工具可以自动为您的实时视频和音频添加字幕。

预先录制的同步媒体是否有音频描述？

这适用于包含视频和音频的媒体。 我们想要伴随媒体的音频信息。

准则 1.3 – 适应性 – 以软件可以理解的格式呈现信息。

您需要确保以编程方式描述您可以通过查看某些内容以视觉方式解释的内容，以便屏幕阅读器等软件可以正确解释它。

内容是否有逻辑结构，是否易于理解该结构中每条内容的关系？

当您查看网页时，您通常会看到标题、段落、粗体内容、表格等。当您查看表格的详细信息时，您会看到标题，并且您可以清楚地看到哪一行与哪个标题相关。

以下是您需要查看的内容：

• 内容是否分为子标题？
• 是否在适当时使用列表、表格等？
• 整个内容中的其他结构元素是否使用了正确的 HTML？
• 是否根据需要使用了标签和替代文本（例如在表单上？）

小费

一个好的起点是使用检查有效 html 的验证器工具（例如 W3.org html 验证器）来测试您的网站。

这是一个以红色显示必填字段的表单示例。 这对于视觉用户来说是可以的，但是对于使用盲文显示器的人呢？

为了克服这个问题，“必填”这个词也被添加到姓氏的标签中，这是一个必填字段。

 <label for="lastname" class="required">姓（必填）：</label>
<input type="text" size="25" value=""/>
<style type="text/css">
  。必需的 {
    红色;
  }
</style>

是否存在有意义的内容顺序？

• 当您查看网页时，您会看到一个导航栏，然后是一些内容、标题、子标题、文本段落。 您要确保以有意义的顺序呈现。
• 使用标题样式来指示部分的重要性。 您通常只有一个 <h1> 样式来标识内容页面，然后您可能有多个 H2、H3 等。
• 将导航与内容分开（例如，使用 <nav> 定义导航）
• 使用有效的 html

这是一个典型的有意义的标题结构：

当用户无法感知形状、大小或使用有关空间形状或大小的信息时，他们能否理解内容？

解释这一点的最简单方法是举个例子：

假设您有一个软件产品功能比较表，当产品具有功能时，此列中会显示菱形图像。 这还不够，您需要添加文本以指示此菱形所代表的内容。

该网站在纵向和横向模式下是否运行良好？

网站需要能够适应纵向或横向模式而不会失去意义。

如果网站正确实施了响应式设计，那么当您更改方向时，它会适应不同的视口（即根据屏幕尺寸选择更合适的显示）。

表格的输入是否正确描述？

这样做的目的是确保以编程方式有足够的关于需要在表单中完成的任何字段的信息。

如果可能的话，可以启用自动填充，这样用户就不必完成所有事情！

页面上元素的用途可以通过编程来计算吗？

这方面的一个例子是使用 ARIA 'role' 元素用于网站的各个部分。

例如，包含徽标/公司名称等的横幅可以描述为“角色=横幅”。

或在电子邮件、姓名、地址等表单上使用输入标签。

这就是您在 HTML 中看到的方式：

<输入类型=”电子邮件>

是否有任何图表的文本版本？

如果有任何图表类型的内容，您将需要一个表格来总结此内容的内容。

准则 1.4 – 看和听内容

这是为了让人们更容易看到和听到内容。

当使用颜色来传达信息时，是否有替代文本？

假设您有一个表单，并且必填字段显示为红色。

这对屏幕阅读器来说意义不大！

但是您可以将“必需”一词添加到表格中，如下例所示：

<label for=”lastname” class=”required”>姓氏（必需）：</label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= “文本/css”> .required { 颜色：红色； } </style>

如果播放超过 3 秒，是否有暂停或停止音频的机制？

如果您使用屏幕阅读器并且同时自动播放视频，您将听到两个声音！

理想情况下，不会有解决此问题的视频自动播放。

如果有自动播放，请确保它小于 3 秒，如果没有，请确保有一种方法可以控制视频播放的音频。

背景中的文本和图像/颜色之间是否有良好的对比？

我们都知道颜色在设计和品牌推广中的重要性，但对于您网站的视障访问者来说，颜色不会对他们的体验产生太大影响。

例如，色盲的人看不出红色、橙色、黄色和绿色之间的区别，你也需要迎合他们。

这里的关键是要注意对比度，这是网站上最常见的可访问性问题之一。

文本颜色与其背景之间是否有足够的对比度？ 像颜色对比检查器这样的工具可以帮助您找出答案！

背景颜色在左边，然后文本颜色在右边。 分数在中间。

建议在文本较大时对比度至少为 4.5:1 或 3.1（例如 18 点或 14 点粗体）。

此外，请确保使用颜色以外的工具来传达您网站上的重要内容和信息。

例如，您的主要 CTA 通常会由于使用户注意到它的颜色而在页面上弹出。 为了使 CTA 更易于访问，您可以使用大小、位置、粗体、对比度，让色盲的人注意到它们。

文本可以变大而您的网站仍然正常运行吗？

一个明显的例子就是放大屏幕上的文字来帮助有视力障碍的人。

但是，如果用户增加了文本大小，您希望网站能够正常运行。

例如，当用户将文本放大到 400% 时，您需要确保没有信息丢失。

这是来自 W3.org 的图片。 我确定您不希望您的网站在放大文本时看起来像右边的那个。

WCAG 2.1 的要求是您应该能够毫无问题地放大 200%。

除非必要，否则是否避免使用文本图像？

您可能有一个包含文本（例如您的公司名称）的徽标，这是可以的。

但是文本图像呢？

如果您有文本图像，则至少必须提供一个描述它的标签。

但是你最好避免使用这种类型的图像，除非：

• 这是必不可少的
• 它是可定制的

网站是否响应？

向下滚动以查看完整的网页是正常的，但不能向右或向左滚动。

当您从桌面移动到较小的设备时，屏幕应该会自动调整，这样您仍然不必向右或向左滚动。

非文本内容是否有足够的对比度？

相邻颜色需要具有至少 3:1 的对比度

此要求适用于视力相对较低的人。

可以在不损失性能的情况下调整间距/行高吗？

• 行高（行距）至少应为字体大小的 1.5 倍；
• 段落后的间距应至少为字体大小的 2 倍；
• 字母间距（跟踪）至少应为字体大小的 0.12 倍；
• 字间距至少应为字体大小的 0.16 倍。

内容是否在悬停或聚焦时正确显示？

当您专注于一个元素（例如它的标签）或将鼠标悬停在它上面时，您会看到其他内容。

例如，您将鼠标悬停在一个按钮上并出现一个弹出窗口。

…或显示子菜单。

此内容需要：

Dismissable – 例如，如果您单击 Escape，则不再显示内容。

Hoverable – 当您将鼠标悬停在内容上时，只要鼠标悬停在触发器上，就会显示内容。

持久 - 这是两者的结合。 内容保持可见，直到用户关闭它、用户将鼠标移开或内容不再包含重要信息。

注意：这不适用于当您将鼠标悬停在某物（例如图像）上时显示 HTML 元素（例如标题）时。

字体是否可读？

某些字体/字体比其他字体/字体更具可读性。 有衬线或无衬线的偏好，但这不是强制性的。 他们的关键部分是它是可读的。

2.可操作

这意味着用户需要能够通过与之交互来使用导航和用户界面。 例如，他们可以使用键盘“操作”用户界面。

准则 2.1 – 可使用键盘

许多用户使用键盘而不是鼠标或触控板，包括行动不便的用户或使用屏幕阅读器的用户。

这就是为什么必须通过键盘访问您网站上的所有功能——链接、按钮、表单和其他控件。

一切都可以通过键盘访问吗？

现在是停止使用鼠标而只使用键盘的时候了。

您正在检查：

一切是否都遵循向前或向后的逻辑顺序（使用制表符前进，使用制表符返回）。

当您在特定按钮、部分等上时，您是否看到该元素被突出显示？ 在下面的例子中，很明显我们已经选择了“文章”。

是否可以使用 Tab 键访问所有内容，并且当您获得焦点时按 Enter 键是否会激活操作？

注意：如果出现弹出窗口，您还需要能够导航。

你能跳过标题吗？

当您使用屏幕阅读器时，您不希望它在每一页上读出相同的标题。 那会让你发疯。 因此，您应该能够跳到“跳到内容链接”，按回车键，然后您的下一个选项卡将跳过该部分。

当您第一次访问下面的网站时单击选项卡时，您将位于“跳至内容”链接上。 如果按回车键，则直接进入内容。

如果您按下第二个选项卡，您将移至“跳至导航”链接。 如果您按 Enter 键，您将进入导航。

如果您再次按 Tab，您将移动到“跳至导航”。 如果您选择此项，您将直接跳转到导航。

如果有一个字符、标点、数字或符号用作快捷方式，则必须有一种方法可以禁用此快捷方式或将其更改为一个或多个不可打印字符。 唯一的另一个例外是只有当元素具有焦点时快捷方式才可用。

2.1.2 有没有遇到键盘死机的情况（键盘陷阱） ？

您按自己的方式前往网站上的某个位置，您不能向前或向后按标签。

这被称为键盘陷阱。 随着歌曲的发展……陷入陷阱，无法回头……。

是否有替代使用字母实现的键盘快捷键的方法？

与依赖键盘导航的人一起使用字符键快捷键并不好，因为他们最终可能会误按它。

所以我们需要提供一个替代方案。

a) 能够将此角色重新映射到另一个快捷方式

乙）。 把它关掉

C）。 只有当您专注于此时，它才会处于活动状态。 所以这意味着如果你使用快捷方式，除非你真的在上面，否则什么都不会发生！

准则 2.2 – 足够的时间

想象一下，如果您设置完成表单的时间限制，但只考虑没有可访问性需求的用户。 这个时间限制可能太短了。

时间可调吗？

关闭时间是理想的，但能够延长它（即当接近时间限制时）或将其调整到新时间是可以的。

网站用户可以暂停、停止或隐藏移动、闪烁或自动更新内容吗？

如果它正在移动/闪烁或滑动并且它：

一个）。 自动启动

乙）。 持续超过 5 秒

C）。 与其他内容同时呈现

然后是暂停、停止或删除的机制。

自动更新内容也有同样的问题。

准则 2.3 – 癫痫发作和身体反应

该指南是为了确保没有设计任何可能导致癫痫发作或身体反应的东西。

屏幕上的“闪烁”是否符合准则？

第一条规则是避免任何闪烁的物体，但如果不可能，请确保它在任何一秒内闪烁不超过 3 次，或闪烁低于一般或红色闪烁阈值。

指南 2.4 – 可导航

这是为了方便浏览网站。

你能跳过重复的块吗？

想象一下使用屏幕阅读器，每次进入新页面时都会读出导航。 现在那可不好玩了。 所以你需要能够跳过这些。 我之前举了一个例子。

所有页面的标题是否正确？

您需要在所有页面上都有良好的描述性标题。 这有利于可访问性，但也有利于 SEO。

您可以使用 Screaming Frog 在一处查看页面标题：

焦点顺序是否保留了意义？

如果您正在浏览内容，但您的标签顺序没有意义，您需要解决此问题。

你能从链接文本中确定链接的目的吗？

“单击此处”不是很有帮助的锚文本。 您需要有描述链接将要指向的内容的词语。

什么是锚文本？

当您链接到您网站上的另一个页面或外部网站时，锚文本是您看到的与您要发送人的页面相关的可见文本。 与其只显示链接，不如显示实际文本。

定位网页的方法不止一种吗？

这里有些例子：

• 站点地图 - 拥有站点地图上所有页面的列表
• 快速链接——有快速链接可以访问重要页面
• 搜索 - 搜索以查找相关页面

键盘焦点是否可见？

这个问题说明了一切！ 这也包含在较早的指南之一中。 当您切换到某个地方时，您需要能够直观地看到焦点在该区域。

页眉、正文和页脚是否明确定义？

辅助技术需要能够清楚地识别页眉、页脚和正文。 有定义这些区域的 html 标签。

准则 2.5 输入方式

本指南适用于您可能无法使用键盘或鼠标进行导航的较新界面。 例如，在智能手机上，您可以滑动、捏合和缩放、点击等。

使用多点或基于路径的手势的功能是否可以由单个指针操作而不使用手势（除非必要）？

基于路径的手势是您需要在特定路径中移动的位置。 例如，您向上滑动以访问某些功能或向下滑动以访问其他功能。 多点手势是您使用两个或多个接触点来访问功能，例如使用两根手指捏合和缩放。

有没有一种简单的方法可以摆脱由单个指针发起的操作？

什么是单指针？

在这里，您可以通过与屏幕交互的一点来访问功能，例如点击、单击、长按等。

以下至少一项必须为真：

• 没有按下事件——当你按下按钮时触发
• Abort or Undo – 您使用一个向上事件（即，当指针释放时启用该功能）并且有一种中止方法。 例如，您正在用手指按压某物，而不是直接抬起手指，而是将其滑动到屏幕的另一部分，并且功能被中止。
• 向上反转 – 向上事件反转向下事件
• 必不可少——完成向下事件的功能是必不可少的。

组件的可见标签是否与该组件的编程名称匹配？

如果视力正常的用户使用文本来语音，则程序名称将被读出，如果这与可见标签匹配，则会获得更好的体验。

通过运动或手势操作的功能是否也可以由其他 UI 控件操作？

如果您摇晃或倾斜某物来控制它，您是否可以使用另一个 UI 控件来访问此功能？

可以理解

这是为了确保页面上使用的语言是可以理解的。

3.1 可读

我们涵盖以下内容：

页面或页面部分的语言是否可以通过编程方式确定？

您应该在任何页面的开头看到类似的内容。 “Lang”表示页面的语言。

<html class=”ie ie7″ lang=”en-US”>

如果页面上的语言发生变化，您也需要能够识别它。

3.2 可预测

您希望您的 UI 以可预测的方式执行，这并不奇怪！

页面上的导航顺序是否相同？

除非用户对导航进行更改，否则一页上的导航位置在所有其他页面上应相同。

组件、图像等是否跨页面一致命名？

如果您在一个页面上有一个图像，而在另一页上有相同的图像，那么您希望图像命名相同。

如果您有几页帖子，并且您将页面命名为第 1 页、第 2 页、第 3 页，这是一致的。 如果没有意义，标签不必相同，但必须保持一致。

3.3 输入辅助

这是为了帮助用户避免或从错误中恢复：

输入错误——如果您输入的内容不正确，您可能会在视觉上看到它是错误的，但还需要有文本来识别问题。

标签——当用户必须输入文本时，会有一个相关的标签来描述该字段。

输入错误——如果用户犯了错误，那么会有关于如何修复它的建议。

错误预防——您应该能够逆转，获得有关错误的一些反馈，或者能够在提交之前进行确认。

4. 稳健

除了可访问之外，您的内容还需要支持各种浏览器、技术等。

指南 4.1 兼容

这涉及使用各种用户代理和辅助技术进行测试。 一个很好的初始测试是使用 W3C 标记验证工具来查看是否有任何错误（即它验证 html、xhml 等的结构/语法是否正确）。

这是一个输出示例：

此外，您需要针对多个浏览器进行测试，以确保正确加载内容。

在纯文本浏览器（例如 Lynx）中加载页面也是值得的。

所有的数据都能正确解析吗？

内容部分中是否有适当的开始和结束标记，以便轻松识别部分的开始和结束位置？

元素是否正确嵌套？

是否有重复的属性或 id 使得难以区分元素？

辅助技术能否理解所有用户界面控件？

以下是一些控件示例以及您需要弄清楚的内容：

• 复选框 - 是否选中？
• 焦点——什么元素有焦点，这是否可以通过程序来理解（不仅仅是视觉上）？

用户是否以不一定会中断工作的方式了解未给予关注的状态消息？

想象一下，如果您正在浏览一个页面，并且在该页面上，一个横幅出现在网站顶部，宣布销售。

表单设计是否正确？

要使表单可访问，您需要确保启用以下功能：

• 能够使用选项卡在表单中导航
• 能够使用选项卡在表单中导航

<表格>

<label for=”fname”>名字：</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>姓：</label><br>

<输入类型=”文本” id=”lname” name=”lname”>

</form>

• 明确标记的必填字段。 如果一个字段是强制性的，那么它也需要在 html 中正确标记。
• 有用户说明（通常在表格顶部）
• 用户在填写表单字段时出错（例如，日期格式不正确，这是您需要输入的内容）时会得到帮助。

概括

正如您所看到的，在运行全面的可访问性审核时，需要涵盖很多内容。 然而，这一切都得到了回报，它给您的业务带来的好处很多——从建立积极的品牌形象到接触更广泛的受众和改善您的搜索引擎优化。