在这段视频中，来自 WebFX Interactive 团队的 Jaci 解释了如何开始使用无障碍网页设计。

成绩单：

如果您真的很高兴查看一个网站，但是当您访问该网站时，您无法访问其任何内容，您会有什么感觉？ 我个人会感到沮丧，我想你也会。

如果您不使用可访问的网页设计，这就是您为美国四分之一的残疾成年人创建的场景。大约有 6100 万人无法平等地访问您的网站。

如果您以前从未这样做过，遵循网页设计可访问性指南并不容易，但我将概述一些您可以开始做的事情。

如果您想跳到此视频的不同部分，请使用视频说明中的时间戳。 现在，我将深入了解网站可访问性的概述。

什么是网站可访问性？

网站可访问性意味着您的网站的设计目的是让残疾人可以使用它。 无障碍设计的目标是消除技术障碍，以便任何人都可以与您的内容进行交互。

根据万维网联盟（也称为 W3C）的说法，一个可访问的网站适用于有听觉、认知、神经、身体、语言和视觉障碍的人。

如果您不确定从哪里开始，请不要担心。 W3C 的文档告诉您您的网站应包含哪些内容才能满足其标准。

本文档包括：

• 创作工具可访问性指南 (ATAG)
• Web 内容可访问性指南 (WCAG)
• 用户代理可访问性指南 (UAAG)

ATAG 专注于人们用来创建 Internet 内容的工具，UAAG 着眼于呈现 Web 内容的工具的可访问性。

在本视频中，我将重点关注WCAG ，它是使每个人都可以访问网站内容的指南。

使用 WCAG，您可以获得三个不同级别的合规性：A、AA 和 AAA。 当您从 A 到 AA 再到 AAA 时，您会遵循WCAG 制定的更多标准，并使更多人可以访问您的网站。

那么，你怎么知道你是否有一个可访问的网站？ 做审计！

如何审核您的网站可访问性

您不必自己进行审核。 如果您希望将审计外包，请与可以分析您的网站并为您进行任何必要调整的顾问团队联系。

现在，如果您更愿意在内部处理事情，那么您有很多选择。 您可以手动梳理您的网站页面以查找问题，但这可能会占用您很多时间。

您可能想使用一些工具来帮助您。 将您的 URL 插入WAVE 等可访问性检查器，以查看您需要在一个页面上更新的内容。 您还可以使用批量可访问性检查器一次分析多个页面。

W3C 网站上有大量可访问性工具，因此您不必自己做所有事情。

我们还为您的可访问性和一些可访问的设计示例列出了五个重要元素 - 我将在接下来讨论这些 - 所以请坚持我。

5 个网页设计可访问性指南

请记住，这些是 WCAG 指南的简短摘要。 我鼓励您使用 W3C 的快速参考指南来学习更深入的可访问设计技术。

1. 确保文本可读

任何传达重要信息的常规大小的文本都需要易于阅读。

对比度在其中起着重要作用。 就目前而言，大文本（如主要标题）需要 3:1 的文本与背景对比度。 常规（或更小）文本（例如构成内容主体的文本）需要 4.5:1 的对比度。

对比度太低的一个例子看起来像浅绿色文本在稍深的绿色背景上。 将文本更改为黑色或白色，您的网站上就会有更多的对比。

用户还应该能够以不影响您网站功能或导致他们错过内容的方式放大文本。

2.优化图片可看可读

向图像添加替代文本不仅仅是一种常见的 SEO 做法。 它可以帮助看不到图像的人了解其中的内容。

替代文字是一段文字，可以清楚地解释图像中发生的事情。 替代文字正好适合您的图像的嵌入代码。 正如您在 Mashable 的这个示例中看到的那样，页面有图像，当您翻到事物的代码方面时，您会看到 alt 文本。

3. 为您的观众提供更多理解视频的方式

如果您以前从未在视频中添加过字幕，那么现在是时候开始了。 不要只依赖 YouTube 或其他托管服务提供商自动生成的内容。

如果您有时间和耐心，请查看自动生成的字幕并进行编辑。 来自人工智能的它们不会是完美的。

您还可以使用 Rev 之类的工具订购字幕，然后将它们添加到您的视频中。

在您的视频中包含成绩单使它们更易于访问。 如果您已经编写了脚本，那么您已经准备好了成绩单！

音频描述增加了另一层可访问性。 这些是单独的音轨，描述了对话间隙之间视频中正在发生的事情。

因此，如果您有两个人谈论他们最近的购物之旅，然后视频切换到一个人试穿衣服的一些镜头，音频描述将解释视频中发生的事情。 可能是这样的：一个女人站在镜子前，将两条围巾披在肩上。

像 Wistia 这样的托管平台允许您上传音频描述（甚至在您上传视频时有一个视频可访问性清单）。

4.将您的网站设计为鼠标和键盘友好

不是每个人都使用鼠标来浏览 Internet。 您的网站应该反映这一点。

这不仅意味着您必须确保有人可以通过键盘与您的网站进行交互，而且还要求您有明显的方式来突出您网站的哪些部分是焦点。

查看另一个可访问的设计示例，您会看到当我单击 Keds 网站上的搜索栏时，会出现经典的闪烁线，让我知道我可以输入。 单击时，搜索栏也会变得更加突出。

为满足 WCAG 指南，此功能应在使用键盘时发生。

5. 让您的网站导航易于理解

这个提示超越了可访问性。 使您的网站导航简单明了通常是一件好事。

编写具有明确目的的页面标题和标题。 使用链接锚文本，可以轻松理解您链接到的内容中的内容。

同样，使用焦点指示器，以便人们知道他们在页面上的位置。 提供不止一种方式来访问网页，例如通过站点地图、主导航或目录。

我怎么能跳过这个？ 有一致的导航。 这意味着如果你有一个主导航标题，当用户从一个页面跳到另一个页面时，它真的不应该改变。

在这个以 At Home 网站为特色的示例中，虽然我从一个页面单击到下一个页面，但页面顶部的导航并没有改变。

正如我之前所说，这绝对不是遵循网页设计可访问性指南需要做什么的完整列表。 这些指南也可能会发生变化，因此请在您准备好评估您的可访问性时进行研究。

要继续了解不同的网页设计和数字营销主题，请订阅我们的YouTube 频道和我们的电子邮件通讯，收入周刊。 你不会失望的。

谢谢你加入我！

加入从 WebFX 视频中获取营销知识的 5,000 名营销人员。

现在订阅