我为什么要关心网络无障碍访问？

网站上线前需要准备的事项清单每天都在增加。无障碍设计似乎令人望而生畏，因为如果你接触过它，就会知道它肯定会被添加到清单中，而且清单还会扩展成上百项其他的小检查和修复工作，你必须在网站上线前完成这些工作。

在网页开发中，可访问性指的是确保网站能够被视力、听力或其他有障碍的人士使用。网络在设计之初就考虑到了这种可用性，而且很多功能都是免费提供的。最大的问题在于，这种可用性很容易被破坏，许多常见的网页开发实践都可能而且确实会破坏它。

当然，网站的无障碍设计并非易事。它仍然需要你清楚地知道哪些事情不应该做，哪些事情必须做。你可能不得不改变你的工作方式，或者改变你在网站上实现某些美观或功能的方式。

这甚至可能促使你重新评估某些功能或视觉效果在你的应用中的重要性。所有这些都是为了让你的应用更易用。在大多数情况下，你会让应用对有特殊需求的用户和没有特殊需求的用户都更易用。

如果这还不够让你重视网站无障碍访问，你可能会被告上法庭！没错！即使你不在乎网站是否方便所有人使用，你肯定也不想损失惨重。你的利他主义精神或许有些退步，但你仍然有充分的理由关注网站的无障碍访问。

我不是在用学术术语说话（也就是说，你的网站可能会像任何你能想到的事情一样被起诉）。这些诉讼确实在发生，原告胜诉，公司也被勒令整改网站，使其符合《美国残疾人法案》的要求。

如果你在开发网站时没有考虑无障碍设计，虽然不太可能直接招致诉讼，但对声誉的损害可能会非常严重。很少有公司会因为知道上一家公司因网站建设而被起诉而再次聘用开发人员。即使是公司员工，也可能因为诉讼带来的预算限制而被解雇。如果你开发的网站引发了诉讼，你很可能成为第一个被裁员的人。

个性化

这一切原本只是纸上谈兵，直到我生活中发生了一件事，让我与无障碍环境的理念产生了切身的联系。我的女儿在12岁时被诊断出患有斯塔加特病，这导致她逐渐丧失中心视力。即使戴上眼镜，她的视力也只有20/100。

如果您熟悉那张以“E”开头的视力表（称为斯内伦视力表），她能够读出第二行（“E”下面的那一行）。

这意味着，从今往后，她参与这个世界的丰富程度将掌握在其他人手中。这些人或许视力比20/100要好。这些人仍然拥有健全的视力。像你我这样的人。

像所有父母一样，我希望她能够过上充实而丰富的生活，而拥有易于访问的网站对于确保她能够做到这一点大有裨益。

希望我刚才已经成功地将启发与担忧巧妙融合，让你意识到无障碍的重要性。如果是这样，那么让我们来看看你可以从今天开始采取哪些快速有效的措施，帮助你更好地关注无障碍问题。

快速可访问性获胜

替代文本

如果您的网站上有非文本元素，则需要提供某种文本替代形式，以确保其可访问性。这是因为低视力用户可能会使用屏幕阅读器软件，该软件会朗读网页上的文本。当遇到非文本元素时，需要提供文本替代形式，以便用户了解其内容。

最常见的形式是图像元素的 alt 属性。在该属性中填充一些描述图像的文本。这意味着无需再为了获得诸如 contain 和 cover 之类的背景尺寸属性而将图像设置为背景图像。（实际上，你仍然可以这样做，但为了屏幕阅读器，你还需要一个 img 元素。）

表单控件是另一个需要添加额外文本的元素示例。请确保您的表单控件具有关联的标签。您可以通过确保标签具有 `for` 属性，并且其值与关联控件的 ID 完全匹配来关联标签。以下是一个示例：

<label for="email">Email:</label>
<input type="email" name="email" id="email">

只有当元素纯粹是装饰性元素时，才允许省略替代文本。但这并不意味着所有图片都只是装饰性的，无需提供替代文本。如果图片所传达的信息在文本中已有说明，则可以将其视为装饰性元素，并将 alt 属性留空，如下所示：

<img src="decorative-cat-icon.svg" alt="">

要判断你的网站是否提供了足够的替代文本，最好的方法是亲自使用屏幕阅读器，而不是浏览网站。如果你使用的是 Mac，可以轻松地在“辅助功能”偏好设置面板中启用 VoiceOver。在 Windows 系统上，你可以免费下载 NVDA ，但如果你想认真进行测试，建议购买JAWS的许可证。

对比

对比度是指两种颜色之间的亮度差异。在网页上谈到对比度时，我们通常指的是在背景上辨识文字的难易程度。

在上面的例子中，高对比度的例子显然更容易看清，但我两个例子都能看清。那我为什么要关心呢？

视力障碍人士需要更高的对比度才能辨认形状和阅读文字。我们可以通过将文字缩小来模拟视力障碍用户可能遇到的额外困难。在下面的例子中，即使视力很好，也很难看清对比度降低的文字，尽管它的颜色与之前相同。

这固然很好，但如果推至极致，最终可能导致所有网站都变成白底黑字。虽然这样能增强对比度，但未必有利于品牌形象，也未必能激发用户想要的情感共鸣。

幸运的是，W3C 制定了一套关于“足够”对比度的标准。如果您使用 Chrome 的开发者工具，就可以轻松查看是否符合这些标准。这里有一个视频演示其工作原理，以及如何轻松解决对比度问题。

注意：在最新版本的 Chrome 浏览器中，此功能不太稳定。据我观察，它仅在您检查的元素同时设置了前景色和背景色样式时才有效。请查看下一节关于 Axe 的内容，了解我找到的最佳替代方案。希望 Chrome 的内置工具能够尽快恢复到之前的状态。

斧头

Axe是一款辅助功能测试工具。最简单的使用方法是安装其 Chrome 插件。安装完成后，打开要测试的网站，打开开发者工具，然后点击“axe”选项卡。在“axe”选项卡中，点击“分析”按钮。

Axe 会显示一个辅助功能问题列表。点击任何问题，即可查看问题详情。它会告诉您问题所在，并允许您检查有问题的元素。此外，它还会提供有关如何解决该问题的更多信息。

如果您之前没有关注过无障碍设计，这份清单可能会让您感到不知所措。请先解决最严重的问题。点击某个问题后，您可以在详细信息部分查看其“影响”。

理想情况下，您希望 Axe 扫描结果为干净，但问题越少越好。不要觉得如果无法全部修复就应该一个都不修复。即使只修复 Axe 发现的几个最棘手的问题，也能显著提升您的网站或应用程序的可用性。

迈出第一步

立即打开你当前的项目，确保所有图片都添加了替代文本。这是个非常简单的入门方法！然后，安装 Axe 并运行一次扫描，再决定是否完成你的应用。使用 Chrome 的对比度测试工具调整颜色，确保所有用户都能清晰地看到它们。

这些步骤很简单，实施起来也很快。一旦你习惯了这些步骤，你自然而然就会变得积极主动，上线前的检查也会发现更少的问题。你会让更多人更容易使用你的网站。如果这还不足以激励你，那么想想看，你还能降低自己和客户面临高昂法律诉讼的风险！

如果你读到这里，我知道你是一位开发者，并且明白学习的价值不仅仅在于代码。如果你想靠这份工作赚钱，你需要的不仅仅是代码。我致力于帮助人们弥合代码和金钱之间的鸿沟。在Rad Devon注册一次免费的指导课程，我们来聊聊我如何也能帮助你！