什么是WCAG?
经常听到“无障碍”这个词应该是在政务新闻里,常常说某某城市针对无障碍环境的建设而推出各种举措,比如步行道要有盲道,医院要有方便残障人士的设施,公交车上有老年人专座,专属的升降电梯给轮椅人士提供乘坐地铁的机会,过马路有红路灯提示音……这是政务部门关爱行动障碍人士、对生命的尊重、平等善待的体现。
实际上“无障碍”的受众不单单是 阅读能力障碍人士(听力视力障碍、语言障碍……),它的初衷是让生活中的一切都更趋于人性化。细分到互联网 WEB 领域就有了“网页无障碍阅读”,万维网联盟(W3C)针对这一领域的技术需求制定了网页内容无障碍阅读指南,英文 Web Content Accessibility Guidelines,取头字母就是 WCAG。作为一项指导性的技术标准而存在,在技术上规范网页设计,小到网页的布局、字体的设计、按钮的大小,大到对辅助设备、读屏软件等工具的支持。
总之,一切增强网站的可访问性、可操作性、提升人性化的需求都是 WCAG 涵盖的内容。
W3C 官方文档开篇对其 2.0 版本给出了明确的定义:
Web无障碍指南(WCAG)2.0定义了如何使残障人士更方便地使用Web内容的方法。无障碍涉及广泛的残疾类别,包括视觉、听觉、身体、语言、认知、语言、学习以及神经残疾。尽管这些指南内容广泛,但它无法满足所有类型、程度和多重残疾人群的需要。这些指南也适合老年人上网,还可让普通用户更好的使用。
现状
在数年前刚接触前端工作不久便知道有这项标准,当时很多国外大型门户和政务网站都已支持,为的是让网页应用服务到更多的人群,让行动有障碍的人(比如盲人)能够享受到网站提供的基础功能。然而在国内也许是受制于政府推广力度,这样以人为本的技术标准的普及总是滞后,国内从业者也多是被动去接受这些指导性的规范,比如一些涉外业务的网站(是由于国外对该标准严格的审核),多数企业更乐于拥抱实用性的能够立即产生回报的技术,即便如此早期连文字可读性都做不到。所幸大部分的政务、公益部门对无障碍是持开放态度的,但是多数缺少对 WCAG 标准的认知,且实现方案五花八门,因为缺少统一的规范,开发维护成本极高。
早期对无障碍支持的实现五花八门多数仍沿用着过时的、需要特定工具支持的、效果差强人意的技术……一旦某个环节除了问题,整个无障碍系统都会停摆,而五花八门的使用方式,反给无障碍用户制造障碍,让无障碍成为空话,于是 WCAG 应运而生。那么,作为有社会责任心的前端从业者们,当支持 WCAG 成为业务需求时,我们该如何展开工作呢?
与时俱进
我们要知道 WCAG 不只给残障人士提供了额外的支持,但毕竟在落实到开发时,应该理解技术标准的具体实践,撇除设计上的要求,代码层面推荐大家阅读 MSDN 上的文章:使用 HTML5 设计辅助功能。
在通过阅读后,我们可以看到网页组件上可以书写各种便于无障碍工具阅读的属性,这些属性有各自的用途和关联,如果有现成的组件已经帮我们完成多数编码的话,实际的开发难度就大大降低了,其实很多流行的 UI 库早已植入了相关特性,比如 Bootstrap。
除开设计上的抽象无法工具化测试外,拿一款像样的、依照 WCAG 标准开发的辅助工具用来做测试也是必须的,比如在测试交互语言阅读时,苹果的 VoiceOver、谷歌的 Talkback 都能胜任,但是我推荐开源免费的 NVDA(注意不是Nvidia😏),它完全依照WCAG规范来设计。
WCAG 在不断的发展,就拿 NVDA 来说,这款工具也不是什么“银弹”,由于它是依照 WCAG 标准开发并且免费开源,迭代更新相对较快,很多新特性得到很好的支持,这是我推荐它的理由却也是麻烦的根源,新特性在 VoiceOver 之类的工具上得到的支持并不比 NVDA 好。这就引出了一个问题——兼容性。比如元素间交互的部分属性在NVDA中工作得很好,却在VoiceOver上毫无反应。兼容性同样存在于不同的浏览器中,Bootstrap用sr-only(一个隐藏标签)来解决大多数问题,可以借鉴。
展望
关于无障碍阅读能说的还有很多,理论上,改善应用的可操作性,优化视觉呈现等一切标准化用户体验的途径都可以是无障碍阅读关注的范畴。依照该指南来开发应用势必会增加工作量,然而养成良好的习惯或者借助工具和成熟的开源库(Bootstrap之类)是可以让工作变得轻松愉快的。我们说科技以人为本,机器为人类服务。随着各种智能设备的普及,人性化软件的升级更新,想必WCAG在未来会有更加重要的地位。
截止本文发布前,WCAG 在 W3C 的率领下,已经发展到 2.x 版本,并且版本 3 已经有了草案,它将会把无障碍实现推广到 WEB 的更多领域,我们有理由对它的发展保持更多的关注。