腾讯分分彩组三杀号 > Web分析 >

前端不止:Web内容的无障碍性

2018-07-18 23:15

  截至 2017 年 6 月,中国网民规模达 7.51 亿,中国手机网民规模达 7.24 亿, 中国网民中农村网民占比 26.7%,规模为 2.01 亿。

  截至 2017 年 6 月,中国网民通过台式电脑和笔记本电脑接入互联网的比例分别为 55.0% 和 36.5%;手机上网使用率为 96.3%,平板电脑上网使用率为 28.7%;电视上网使用率为 26.7%。

  截至 2017 年 6 月,我国非网民规模为 6.32 亿。上网技能缺失以及文化水平限制仍是阻碍非网民上网的重要原因。调查显示,因不懂电脑 / 网络,不懂拼音等知识水平限制而不上网的比例分别为 52.6% 和 26.9%;由于不需要 / 不感兴趣而不上网的比例为 11.2%;受没有电脑,当地无法连接互联网等上网设施限制而无法上网的比例分别为 9.3% 和 6.2%。

  提升非网民上网技能,降低上网成本以及提升非网民对互联网需求是带动非网民上网的主要因素。

  信息无障碍,英文词语来自“Accessibility”,是指任何人(注意是任何人,无论是健全人还是残疾人,无论是年轻人还是老年人等等)在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息。

  首先,我们要对Accessibility(无障碍)的一些错误认识进行一些纠正:这样一个词,很多人自然地跟残障人士联系起来,因为经常可以看到无障碍坡道、无障碍洗手间这样的词语。

  信息无障碍更多强调的是对所有人都平等,方便的获取信息。比如:键盘上的F和J的凸起基准键。它的作用就是方便任何人可以精准的找到键盘字母的位置,从而可以在不看键盘的情况下,快速的打字,俗称“盲打”,大家都知道它的含义,没有人会把这个词理解为“盲人打字”吧。

  我国非网民规模为 6.32 亿,由于个人主观意愿,比如:不需要 / 不感兴趣而不上网的比例仅仅占11.2%。

  那么,剩下的88.8%,也就是大约5.612亿人,是有上网需求的,但因为其他各种原因而不能上网。信息的公平使用和访问,是所有人的基本权利,如果你不能像身边其它人一样公平的获取信息,那意味着你不能公平接受教育、就业、独立生活等等。

  我是谁?我为什么关心这些?这不是个哲学问题。每个人身上都有很多的标签,但在这里,我的标签是一个普通的Web开发工程师,一个新科技产物的使用者,一个信息的生产者和使用者,一个能“无障碍”获取信息的个体。而我的生活和我的工作让我开始关注“无障碍”这样一个词。

  在互联网的大环境下,所有人的生活都方便了不少,我们可以远程办公,远程接受教育,网上购物,现在甚至连买菜、买水果都不需要出门,就这段时间,我妈有时都会直接在网上买菜和水果。

  在我们享受这种生活便利的同时,我们也常常听到一些声音,比如:“这些都是年轻人的东西”,“我家小孩手机app玩的可溜了”。

  前几天,我去办理港澳通行证,其实已经比我五年前办护照时方便很多,然而,在市政府政务中心的自动办理出境机器旁边,我会听到有几位年长的人说“这个机器不会用,怎么办?”,另一个人说,“没事,有个警察在旁边帮你操作”。这就意味着,如果旁边没有那个警察帮着操作,那么就不方便使用了,至少不是对所有人都方便。

  因为在外企的缘故,我有幸参加过一些海外的项目,在需求的实现过程中,客户对应用的无障碍性都会有一定的要求,于是我从中学习到了不少的相关知识。当然我也去过一些其他国家,跟不同国家的同事讨论过这方面的问题,也听他们介绍了一些做的不错的项目。所以我来举个例子:

  比如,澳大利亚政府的“网络可访问性国内过渡战略”(NTS)规定,所有政府网站及其内容必须在 2012 年 12 月 31 日以前达到 WCAG 2.0 的 A 级合规要求,并在 2014 年 12 月 31 日之前达到 AA 级合规要求。

  WCAG是万维网联盟(W3C)发布的一套名为“Web Content Accessibility Guidelines (WCAG) ”的网络内容可访问性指引。该指引目前是网络可访问性的国际标准。合规等级分为三级(A、AA 和 AAA)。

  相关达到 WCAG 2.0 的 A 级合规要求的网站,例如:澳大利亚官方政府网站,澳大利亚政府留学网站等,体验一下他们在Web内容无障碍性的一些实践,比如:只通过tab和enter来导航到不同的网站区域。

  有时候,我在想这样一个问题,到底是我们的能力问题,还是问题被忽略了,当然大部分人的答案会是后者。

  但我有时候会认为是前者,因为我们忽视了这个问题,所以导致其实我们也缺乏这方面的能力,无论是开发还是设计。

  “目前我国99%的网站,由于没有实现无障碍,盲人难以正常浏览访问网站。”省盲协主席、中山大学工学院教授富明慧于2013年说的。富明慧本身就是一名盲人,他失明后发明了电脑盲文输入法。他说,加快网站无障碍改造,政府部门网站应该先行一步。

  如果你在一个互联网公司工作,你大可在周边一问,比如:你听说过Web Accessibility?或者你知道怎么做才是最佳的方式吗?我们的产品里面有做这个?会作为代码和质量审核的一部分吗?

  连续追问这几个问题,的确会让不少人哑口无言,包括我自己在内。首先,我要承认这个不是一件容易的事情,否则不会有今天这样的一个讨论和思考。

  我认为无障碍性的实现,应该是一个端到端的过程,不是设计师(UX/XD),不是开发(Dev),不是质量分析师(QA)某个人的责任,而是整个产品研发过程中所有人的责任,也许从产品构思的那天的就要开始考虑(比如:用户群体)。

  其实这是个如何去做的话题会比较大,但是我想在这里举几个简单例子,让大家产生一些共鸣,也许从明天开始,在写代码和设计的过程中,你就会注意这些小的细节。

  由于行动障碍而无法使用鼠标的人,会使用键盘进行页面的浏览。而页面上DOM的顺序会决定Tab切换时聚焦(focus)的顺序,我们知道CSS可以改变DOM在页面上的显示位置逻辑,但是DOM本身的顺序没有改变,这就容易导致Tab切换时给键盘使用者带来困惑。比如:

  当使用tab进行切换时,并不是最先聚焦到“左边”这个按钮,而是右边菜单,这就和页面上看到的逻辑产生了冲突。

  WCAG 2.0 的1.4.3条对页面上文字的对比度有一个最低的要求4.5 : 1,目的很明显是为了保证色盲/色弱人群可以无障碍的访问网站的内容。假如说你是产品经理,有一天设计师告诉你,这个设计可能导致10个用户里面有1个用户存在访问障碍,阅读困难,你能接受吗?我想谁都接受不了。

  对于普通使用者,可以使用Chrome的审计功能和Accessibility Developer Tools(Chrome插件),它能帮助你自动的检测网页的的可访问性问题,以及帮助你提供相关的修正信息。

  对于开发人员,可以做一些自动化的检测,比如:使用pa11y这样一个工具,它是基于HTML codeSinffer以及PhantomJS制作而成的网站内容A11y(Accessibility,无障碍性)自动化检查工具。pa11y出现在ThoughtWorks 2017年3月的技术雷达中,我的同事写过一篇详细的文章来介绍这个工具:无障碍性测试工具 Pa11y|技术雷达。

  当然,最重要和最有效的检验方式是用户测试,比如:假设你自己是一个纯键盘的网站浏览者,尝试一下用键盘浏览自己开发的网站,是否能够方便的导航到网页的各个部分,并进行无障碍的阅读和交互。

  有的,比如:基本HTML的语义化,alternative text的使用,ARIA标签属性的使用,都可以帮助屏幕阅读器有效的告诉使用者当前的元素类型和作用。

  不要小看这些细节或者说基础功能,它涵盖的人群非常大,根据国家统计局最新数据,在中国,单是65岁的老年人已经超过1.5亿人口。加上其它障碍人群,以及第二语言学习者,等环境障碍人群,粗粗一算,这么简单的特性就能方便好几亿的用户,为什么要省略呢?

  我在写这篇文章的时候,也去查了不少的资料,我觉得知乎上有一个人说很好:对无障碍性一个最大的误区是,将信息无障碍,当做产品的情怀功能,而非基础功能或Bug去对待。