网页无障碍阅读指南(WCAG)的理解

什么是WCAG?

经常听到“无障碍”这个词应该是在政务新闻里,常常说某某城市针对无障碍环境的建设而推出各种举措,比如步行道要有盲道,医院要有方便残障人士的设施,公交车上有老年人专座,专属的升降电梯给轮椅人士提供乘坐地铁的机会,过马路有红路灯提示音……这是政务部门关爱行动障碍人士、对生命的尊重、平等善待的体现。

公共场所常见的无障碍 logo

实际上“无障碍”的受众不单单是 阅读能力障碍人士(听力视力障碍、语言障碍……),它的初衷是让生活中的一切都更趋于人性化。细分到互联网 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在未来会有更加重要的地位。

WCAG2.2 Map

截止本文发布前,WCAG 在 W3C 的率领下,已经发展到 2.x 版本,并且版本 3 已经有了草案,它将会把无障碍实现推广到 WEB 的更多领域,我们有理由对它的发展保持更多的关注。

Refs

Web内容无障碍指南(WCAG) 2.0 (w3.org)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,749评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,059评论 4 62
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,794评论 8 183
  • ---先谈谈和外语的一面之缘--- 初三时候看到一份HP打印机的八国语言的说明书,当时无聊之余,突发奇想,想尝试下...
    威威专栏阅读 2,736评论 3 10
  • 脑补一段: 小姑娘: 小和尚,我带你去看花灯啊,好漂亮的呢,快,快走……(拽着他就跑) 小和尚: 哎,等,等等……...
    _柠梦阅读 1,734评论 3 2