5个常见的可访问性问题及解决方案
极客时间编辑部
讲述：丁婵大小：8.14M时长：05:56
你好，欢迎收听极客视点。
在过去的两年中，WebAIM 对前 1,000,000 个网站的主页进行了可访问性评估。结果表明，即使在主流网站上，可访问性错误仍然非常常见。
1. 低对比度文字
低对比度的文本会让读者更难区分字符的形状和边缘，影响阅读速度和理解力。文本尺寸越小，这个问题就会越严重，所以随着移动用户数量的不断增长，这个问题也愈加突出。
对于视力受损的用户来说，低对比度文字读起来也会更困难。许多老年人的对比度敏感度会因身体老化而下降，视力受损的用户在文字和背景没有足够对比度的情况下将无法阅读。
如何修复
之所以低对比度文字的问题如此常见，一个原因是这个问题很难被发现。还好，有几种工具可以自动测量颜色对比度，并高亮显示那些不符合成功标准的内容。
Lighthouse 是谷歌创建的工具，如果你使用的是谷歌 Chrome 浏览器，它已经内置在浏览器中了（它也有针对其他浏览器的扩展）。用它运行审核程序将生成一份报告，标记出网站上的可访问性问题。它将列出检测到的所有文本背景和前景色没有足够高对比度的元素。
知道哪些元素不符合成功条件之后，你就可以调整背景和前景色，以增加对比度。当然，还有多种颜色对比度分析器可以帮助你找到具有足够对比度的两种颜色。
2. 缺少图片的替代文本
Web 上有近半图像缺少替代文本，或者替代文本有问题或重复。
所有图像都应有替代文本，以将其含义传达给屏幕阅读器用户。
屏幕阅读器是供盲人或视力障碍者使用的。它以另一种形式传递屏幕上的视觉信息，例如大声朗读文本。
屏幕阅读器无法将图像翻译成文字。因此，有必要给每张图像都提供简短的描述性替代文本，屏幕阅读器将使用它们来向用户传达图像的内容和目的。
如何修复
替代文字应简短且具有描述性。它应该描述图片的内容和目的，同时避免无关紧要的细节，以免稀释有用的细节。
将替代文本添加到图像有三大方法：
如果使用 img 标签显示图像，则可以使用 alt 属性。
如果显示的图像带有另一个标签，例如 div 的背景图像，则可以使用 aria-label 属性。
如果图像是由另一个元素的内容描述的，则可以使用 aria-labelledby 属性。
3. 空链接和空按钮
链接和按钮文本应该能被屏幕阅读器识别。当图像用作链接或按钮时，图像的替代文本也应该能被识别。
在 Web 上，链接和按钮通常显示为符号或图像。当空间有限时（例如在较小的屏幕和移动设备上），这一特性特别有用。但是，屏幕阅读器就很难将这些元素的目的传达给用户。
如何修复
可以使用 aria-label 和 aria-labelledby 属性向按钮和链接添加说明。然后，屏幕阅读器将读取这些说明，从而使用户对元素的用途有更清晰的理解。
4. 缺少表单输入标签
表单中的每个元素都应具有以编程方式关联的标记（label）元素。
要理解每个表单元素的目的，就需要清晰的表单标记。用户通常可以根据标记与元素的接近程度或元素的占位符之类的信息来推断出这些目的。但是，屏幕阅读器无法做出这些假设，因此需要标记以编程方式与对应的元素相关联。
单击以编程方式关联的标记元素也会激活该控件。如果能提供较大的可点击区域，就可以让运动技能受损的用户或使用小屏幕的用户受益。
如何修复
将标记添加到表单元素的方法主要有以下三种：
将输入元素嵌套在标记元素内。
为标记提供一个 for 属性，该属性等于输入元素的 ID。
给输入元素一个 aria-labelledby 属性，该属性等于充当标记的元素 id。
5. 缺少文档语言
HTML 文档元素应包含有效的 lang 属性。
用户配置屏幕阅读器时会选择默认语言。如果开发人员未指定网站的语言，则屏幕阅读器将使用用户设置的默认语言。
如果用户会说多种语言，则他们可能会访问那些与屏幕阅读器默认语言不同的网站。如果开发人员使用了错误的语言库，那么阅读器的单词发音会很奇怪，让用户无法使用网站。
如何修复
将 lang 属性添加到 html 元素，该元素的值表示网站的主要语言。该属性的可能值可以在 IANA 语言子标签注册表中找到，也可以使用语言子标签查找工具找到。
如果网站中的语言发生变化，则可以使用另一个 lang 属性来明确。如果语言是从右到左书写的，则还应使用 dir 属性来明确。
以上就是今天的内容，希望对你有所帮助。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论