6个常见的可访问性问题及解决方案
“Web的力量来自于它的普适性。关键在于所有人，包括残障人士，都能使用Web。” ——W3C主任兼万维网发明者Tim Berners-Lee
在过去的两年中，WebAIM对前1,000,000个网站的主页进行了可访问性评估。他们的结果表明，即使在主流网站上，可访问性错误仍然非常常见。
- “在一百万个主页中，我们检测到了60,909,278个可访问性错误——平均每页60.9个错误。”
- “每14个残障用户会交互的主页元素中，就有1个能检测出错误。”
总计98.1％的主页检测出了WCAG 2故障——比去年的97.8％有所增加。
在分析报告中，WebAIM分享了六个最常见的WCAG故障。
在这篇文章中，我将具体介绍这六种故障，告诉大家为什么我们要重视它们，以及如何解决这些问题。读者可以通过演示应用查看每种故障的实时演示。
低对比度文字
“平均而言，每个网站主页上有36种低对比度文本实例。” ——WebAIM Million
网站的所有文本和文本后面的背景颜色之间都应有较高的颜色对比度。换句话说，文字的亮度不应太接近背景亮度。
低对比度的文本会让读者更难区分字符的形状和边缘，结果影响阅读速度和理解力。文本尺寸越小，这个问题也就会越严重，所以随着移动用户的数量不断增长，这个问题也愈加突出。
对于视力受损的用户来说，低对比度文字读起来也会更困难。有十二分之一的人类是色盲。许多老年人的对比度敏感度会因身体老化而下降。视力受损的用户在文字和背景没有足够对比度的情况下将无法阅读。
如何修复
之所以低对比度文字的问题如此常见，一个原因是这个问题很难被发现。在编写或查看某些代码时，你可能会看到文本的色彩十六进制值为#f2f2f2，而背景的值为#808dd1。它们之间的对比度够高吗？那就难说了。就算开发人员检查实际的显示效果，也很难确定对比度是否足以满足弱视或使用较小屏幕的用户的需要。
还好，有几种工具可以自动测量颜色对比度，并高亮显示那些不符合成功标准的内容。
Lighthouse 是谷歌创建的工具，如果你使用的是谷歌 Chrome 浏览器，它已经内置在浏览器中了（它也有针对其他浏览器的扩展）。用它运行审核程序将生成一份报告，标记出网站上的可访问性问题。它将列出检测到的所有文本背景和前景色没有足够高对比度的元素。
知道哪些元素不符合成功条件之后，你就可以调整背景和前景色，以增加对比度。
还有多种颜色对比度分析器可以帮助你找到具有足够对比度的两种颜色。如果你使用的是谷歌Chrome 浏览器，则可以使用Chrome DevTools 的颜色选择器，其会显示两条白线，分别是AA 和AAA 阈值。
WCAG 将文本对比度的成功标准定义为 4.5：1 的对比度。对于上面的“Hello World”示例，我们可以看到颜色对比度仅为 2.82，未达到阈值。增加对比度后，我们就可以提高元素的可读性和可访问性。
缺少图片的替代文本
“所有主页图像中有 31.3％（平均每页 12 张）缺少替代文本…… “这些数据表明，Web 上有近半图像缺少替代文本，或者替代文本有问题或重复。” ——WebAIM Million
所有图像都应有替代文本，以将其含义传达给屏幕阅读器用户。
屏幕阅读器是供盲人或视力障碍者使用的。它以另一种形式传递屏幕上的视觉信息，例如大声朗读文本。
屏幕阅读器无法将图像翻译成文字。因此，有必要给每张图像都提供简短的描述性替代文本，屏幕阅读器将使用它们来向用户传达图像的内容和目的。
如何修复
替代文字应简短且具有描述性。它应该描述图片的内容和目的，同时避免无关紧要的细节，以免稀释有用的细节。
将替代文本添加到图像有三大方法：
- 如果使用 img 标签显示图像，则可以使用 alt 属性。
- 如果显示的图像带有另一个标签，例如 div 的背景图像，则可以使用 aria-label 属性。
- 如果图像是由另一个元素的内容描述的，则可以使用 aria-labelledby 属性。
<!-- ? Missing alternative text -->
<img src="cow.jpg" />
<div class="cool-bg-image" />
<div class="another-cool-bg-image" aria-labelledby="non-existent" />
<!-- ? With alternative text -->
<img src="cow.jpg" alt="a sad seal" />
<div class="cool-bg-image" aria-label="an angry alligator" />
<div class="another-cool-bg-image" aria-labelledby="my-label" />
<div id="my-label">a happy hyena</div> 如果图片是纯装饰性的，则可以给图片加上替代文字""，以指示屏幕阅读器不要读出它。这样屏幕阅读器就不会读出无用的信息了。
<img src="decoration.jpg" alt="" /> 空链接和空按钮
链接和按钮文本应该能被屏幕阅读器识别。当图像用作链接或按钮时，图像的替代文本也应该能被识别。
在 Web 上，链接和按钮通常显示为符号或图像。当空间有限时（例如在较小的屏幕和移动设备上），这一特性特别有用。但是，屏幕阅读器就很难将这些元素的目的传达给用户。
例如，我们习惯用带有“+”号的按钮表示向列表中添加内容的目的，或者用带有徽标的按钮来表示链接。
<!-- ? Missing descriptive labels -->
<button>+</button>
<a href="...">
<img src="twitter.svg" />
</a> 通过屏幕阅读器阅读时：
- 该按钮将被读为“加号按钮”。
- 该链接将被读为图像文件名，或所链接页面的 URL。
如果你可以看到整个屏幕，并了解按钮 / 链接的上下文，那么这些描述理解起来是会很容易的；但是屏幕阅读器无法提供这么多细节。
如何修复
可以使用 aria-label 和 aria-labelledby 属性向按钮和链接添加说明。然后，屏幕阅读器将读取这些说明，从而使用户对元素的用途有更清晰的理解。
<!-- ? With descriptive labels -->
<button aria-label="Add a playlist">+</button>
<a href="..." aria-label="View our Twitter page">
<img src="twitter.svg" />
</a> 缺少表单输入标签
“420 万份表单输入中有 55％没有正确地 [标记]” ——WebAIM Million
表单中的每个元素都应具有以编程方式关联的标记（label）元素。
要理解每个表单元素的目的，就需要清晰的表单标记。用户通常可以根据标记与元素的接近程度或元素的占位符之类的信息来推断出这些目的。但是，屏幕阅读器无法做出这些假设，因此需要标记以编程方式与对应的元素相关联。
单击以编程方式关联的标记元素也会激活该控件。如果能提供较大的可点击区域，就可以让运动技能受损的用户或使用小屏幕的用户受益。
如何修复
将标记添加到表单元素的方法主要有以下三种：
- 将输入元素嵌套在标记元素内。
- 为标记提供一个 for 属性，该属性等于输入元素的 ID。
- 给输入元素一个 aria-labelledby 属性，该属性等于充当标记的元素 id。
复制代码
<!-- ? Missing input labels -->
<label>Name</label>
<input />
<div>Name</div>
<input />
<!-- ? With input labels -->
<label>Name: <input /></label>
<label for="name">Name</label>
<input id="name" />
<div id="name">Name</div>
<input aria-labelledby="name" /> 缺少文档语言
HTML 文档元素应包含有效的 lang 属性。
用户配置屏幕阅读器时会选择默认语言。如果开发人员未指定网站的语言，则屏幕阅读器将使用用户设置的默认语言。
如果用户会说多种语言，则他们可能会访问那些与屏幕阅读器默认语言不同的网站。如果开发人员使用了错误的语言库，那么阅读器的单词发音会很奇怪，让用户无法使用网站。
如何修复
将 lang 属性添加到 html 元素，该元素的值表示网站的主要语言。该属性的可能值可以在 IANA 语言子标签注册表中找到，也可以使用语言子标签查找工具找到。
复制代码
<!-- ? Missing lang attribute -->
<html>
<!--document head and body-->
</html>
<!-- ? With lang attribute -->
<html lang="en">
<!--document head and body-->
</html> 如果网站中的语言发生变化，则可以使用另一个 lang 属性来明确。如果语言是从右到左书写的，则还应使用 dir 属性来明确。
<p>Text in one language <span lang="es">texto en otro idioma</span></p>
<p lang="ar" dir="rtl">???? ?????? ???</p> 小结
“对于希望创建高质量网站和 Web 工具，并且不排斥人们使用其产品和服务的开发人员和组织来说，可访问性是至关重要的。” ——W3C，可访问性简介
在构建网站时，开发人员往往很难想起来在网站中包含辅助功能，尤其是当开发人员自己并不会从这些功能中受益时更是如此。所幸我们有很多工具和资源可以提供帮助。
如上所述，Lighthouse 是用于检查网站质量的优秀工具。它可以创建多个类别的审核，包括性能、SEO 和可访问性等。它还提供了很多浏览器扩展，如果你使用的是谷歌 Chrome 浏览器，则它已经内置在 Chrome DevTools 中了。
Deque 还提供了适用于 Chrome 和 Firefox 的 Axe 浏览器扩展。与 Lighthouse 一样，这个扩展程序也能列出当前页面的可访问性问题。选择一个问题后，它就会高亮显示问题的每个要素。它还提供了诸如问题所在和问题严重性之类的细节信息，并提供了一个链接供你了解更多信息。
在这些工具的帮助下，我们就可以轻松地改善网站的可访问性，并帮助实现 Web“为所有人服务，不管他们的硬件、软件、语言、位置或能力如何都不影响”这个目标。
原文链接： https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html
- 发表于:
- 本文为 InfoQ 中文站特供稿件
- 首发地址：https://www.infoq.cn/article/3s5EGQFRJemLqfQvNAoC
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
