6个常见的可访问性问题及解决方案

2020 年 8 月 25 日

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


所有图像都应有替代文本,以将其含义传达给屏幕阅读器用户。


屏幕阅读器是供盲人或视力障碍者使用的。它以另一种形式传递屏幕上的视觉信息,例如大声朗读文本。


屏幕阅读器无法将图像翻译成文字。因此,有必要给每张图像都提供简短的描述性替代文本,屏幕阅读器将使用它们来向用户传达图像的内容和目的。


如何修复


替代文字应简短且具有描述性。它应该描述图片的内容和目的,同时避免无关紧要的细节,以免稀释有用的细节。


将替代文本添加到图像有三大方法:


  1. 如果使用img标签显示图像,则可以使用alt属性。

  2. 如果显示的图像带有另一个标签,例如div的背景图像,则可以使用aria-label属性。

  3. 如果图像是由另一个元素的内容描述的,则可以使用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)元素。


要理解每个表单元素的目的,就需要清晰的表单标记。用户通常可以根据标记与元素的接近程度或元素的占位符之类的信息来推断出这些目的。但是,屏幕阅读器无法做出这些假设,因此需要标记以编程方式与对应的元素相关联。


单击以编程方式关联的标记元素也会激活该控件。如果能提供较大的可点击区域,就可以让运动技能受损的用户或使用小屏幕的用户受益。


如何修复


将标记添加到表单元素的方法主要有以下三种:


  1. 将输入元素嵌套在标记元素内。

  2. 为标记提供一个for属性,该属性等于输入元素的ID。

  3. 给输入元素一个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 还提供了适用于ChromeFirefox的 Axe 浏览器扩展。与 Lighthouse 一样,这个扩展程序也能列出当前页面的可访问性问题。选择一个问题后,它就会高亮显示问题的每个要素。它还提供了诸如问题所在和问题严重性之类的细节信息,并提供了一个链接供你了解更多信息。


在这些工具的帮助下,我们就可以轻松地改善网站的可访问性,并帮助实现 Web“为所有人服务,不管他们的硬件、软件、语言、位置或能力如何都不影响”这个目标。


原文链接: https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html


2020 年 8 月 25 日 08:00728

评论

发布
暂无评论
发现更多内容

架构词典:语言

lidaobing

架构 语言

Spock单元测试框架实战指南四 - 异常测试

Java老k

Java 单元测试 spock

警察营救安徽望江县17岁女生跳河自尽过程中,现场看热闹的旁观者们在做什么?

wbliu85

读写分离这个坑,你应该踩过吧?

楼下小黑哥

MySQL 主从同步 读写分离

5种分布式事务方案与阿里的 Seata 中间件

Bruce Duan

分布式事务 seata

当我们谈前端性能的时候,我们谈的是什么

vivo互联网技术

性能优化 前端 前端性能优化 页面

2020 阿里云原生实战峰会即将开幕 云原生落地的正确姿势

阿里巴巴云原生

阿里巴巴 阿里云 开发者 云原生 实战

一个依赖搞定 Spring Boot 反爬虫,防止接口盗刷!

Bruce Duan

反爬虫组件 kk-anti-reptile

Bitmap为什么那么快?

Man

redis 中间件

Redis 持久化方式-RDB

码农架构

redis redis持久化

架构师训练营第一期 - 第十一周课后作业

卖猪肉的大叔

极客大学架构师训练营

S型曲线不止关乎身材?|技术人应知的创新思维模型(2)

Alan

创新 思维模型

面试被问线程安全怎么保障,我的回答让面试官眼前一亮

996小迁

Java 架构 面试 多线程

「生产事故」MongoDB复合索引引发的灾难

Kerwin

数据库 mongodb

《前端算法系列》数组去重

徐小夕

Java 面试 算法 前端

智慧警务系统开发解决方案,大数据可视化平台建设

WX13823153201

智慧警务系统开发

通过docker获取系统运行情况的实用命令

晓川

悟空活动中台-打造 Nodejs 版本的MyBatis

vivo互联网技术

Java 前端 mybatis nodejs

报销发票抵扣工资的CTO,该不该? | 法庭上的CTO(5)

赵新龙

CTO 法庭上的CTO

话题讨论 | 作为地地道道的程序员半年内都没摸过代码是什么样的体验?

xcbeyond

话题讨论

第六周-作业1

Mr_No爱学习

算法训练营总结

陈皓07

生产环境压测建设历程之三 淘宝网2009年的痛

数列科技杨德华

排查指南 | 当 mPaaS 小程序提示“应用更新错误(1001)”时

蚂蚁集团移动开发平台 mPaaS

小程序 问题排查 mPaaS

为什么建议使用你 LocalDateTime ,而不是 Date?

Bruce Duan

LocalDateTime Date

数据结构与算法系列之散列表(一)(GO)

书旅

go 数据结构 算法

(G20200388020528)第一周练习

走走,停停……

拆解增长黑客之实战(二):留存与变现

丁一

读书 增长 产品运营

Redis 子进程开销监控和优化方式

码农架构

Redis开发与运维

第六周-学习总结

Mr_No爱学习

第十一周作业

solike

6个常见的可访问性问题及解决方案-InfoQ