• home > webfront > SGML > web >

    Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要

    Author:zhoulujun Date:

    Web无障碍设计是要让所创建的网站对所有用户都可用 可访问,不管用户的生理 身体能力如何。Web Content Accessibility Guidelines (WCAG) 是网络内容可访问性指引。不同的人访问和使用互联网的不同途径和方式,比如视障 听障 肢体残疾

    信息无障碍

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

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

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

    科技的便利性看来还不是对所有人都便利,其实它还是需要一定的学习成本。这是需要套用:Don't let me think||Don't make me think的产品思维,增加产品可用性与易用性。

    Web无障碍设计

    Web无障碍设计(Accessibility in Web design,也叫网站可及性 )是要让所创建的网站对所有用户都可用/可访问,不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

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

    一些海外的项目,在需求的实现过程中,客户对应用的无障碍性都会有一定的要求。比如,澳大利亚政府的“网络可访问性国内过渡战略”(NTS)规定,所有政府网站及其内容必须在 2012 年 12 月 31 日以前达到 WCAG 2.0 的 A 级合规要求,并在 2014 年 12 月 31 日之前达到 AA 级合规要求。

    WCAG 2.0文档旨在满足需要稳定的,可参考的技术标准的人群。被称为支持文档的其他文档以WCAG 2.0文档为基础,可用于其他重要的用途,包括可进行更新的能力,以说明如何将WCAG用于新技术的应用。支持文档包括:

    1. 如何符合WCAG 2.0- WCAG 2.0的可定制的快速参考,包括所有的指南、成功标准以及作者正在开发和评估网页内容时可用到的技巧。

    2. 理解WCAG 2.0- 理解和实施WCAG 2.0的指南。对于WCAG 2.0的每一个准则和成功标准,这些主要议题都有一个简短的“理解”文档。

    3. WCAG 2.0技巧- -技术和常见失败集,对于每个技巧和常见失败,另附一份文档,其中包括描述,例子,代码和测试。

    4. WCAG 2.0文档- 对于如何关联和链接技术文档,给出 图示和说明。

    为什么无障碍如此重要(帮助残障人士)

    为什么不是所有网站都能无障碍访问?你可能也会问自己为什么存在“无障碍”的问题,为什么不是所有网站都能让所有用户无障碍访问?要进行无障碍设计有许多不同原因,其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。

    视障用户

    视障用户包括色盲用户、完全失明用户(盲人)。如果图片不带有相关文字描述,则视障用户在理解图片方面会存在问题。如果图片没有文字描述,看不见图片的盲人用户就无法知道图片表达的是什么。色盲用户在识别设计元素(包括文字)方面也会存在问题,因为色盲用户所能识别的色彩不足以辨别所有的设计元素(包括背景色和页面颜色)。

    所开发的网站,如果没有考虑到适应于屏幕发音阅读器(读屏软件,如JAWS )或“非可视”浏览器(或叫声音浏览器、读屏浏览器,如MozBraille)。读屏浏览器是一个可以发音阅读出网站的浏览器,帮助有视觉障碍的用户访问网站。一个在可视浏览器(如IE)上看起来良好的网站,在读屏浏览器下可能听起来非常糟糕。

    听障用户

    听障用户在听觉上存在问题。用声音传达的信息无法被听障用户所理解,简单解决方法是提供另外途径的信息传达方式,而不仅仅是声音,例如用文字描述、用图片。

    残障用户(肢体伤残的用户)

    如果你不是残障用户,你无法想象他们(残疾人)的网络体验。例如,你曾经试过不使用鼠标去访问网站吗?除非你很幸运的遇到一个无障碍访问良好的网站,否则你肯定觉得非常困难。残障用户经常无法使用鼠标,除非创建网站的导航和输入方式的需求中就考虑残障人士的需求,否则残障人士可能完全无法使用你的网站。

    认知和神经障碍用户

    网站往往比较复杂,要想找到我们所想要的信息经常不太容易。如果网站设计的过于复杂、导航不一致、存在让人分心(抓狂)的重复性动画,情况会更加糟糕。这些设计元素会导致认知和神经有障碍的用户的使用问题,甚至会让这些用户完全无法使用网站。

    残障人士之外(所有用户都能受益)

    前面我们知道如果我们存在某方面残障,使用互联网是件困难的事情。然后,web无障碍访问不仅仅帮助到残障人士,良好理解和遵循Web无障碍设计,可以让所有用户都受益、更好的服务用户。

    实现web无障碍的好处

    Web无障碍设计还可以让通过以下方式使用你的网站的用户受益:

    • 使用移动手机、Web-TV和信息岗亭的用户

    • 低带宽的用户

    • 在吵杂环境下使用网站的用户

    • 容易被“屏幕眩光”伤到眼睛的用户

    • 开车时的用户

    • 低文化水平的用户

    • 第二语言访问的用户(国外用户)

    • 不同学习方式和习惯的用户

    • 处理好Web无障碍访问问题也可以改善:

    页面传输和网站维护

    • 内容索引

    • 内容搜索

    • 市场机会

    让你的网站具有可及性还有其它原因。根据目前数据,在许多国家残疾人用户占到人口的10%~20%,如果能吸收前面提到的残障人士成为你的网站的用户,可以提高你网站的市场占有率。

    许多国家的老龄化人口都在增加,年龄的增大会带来更多的无障碍访问问题,包括视觉障碍、听觉障碍、记忆力下降等。如果你的网站能吸收老年人用户,也会大大提升你网站的市场占有率。

    所以,无障碍访问是可以直接带来经济效益的

    为什么没有实现实现无障碍?是能力问题还是被忽略了?

    目前我国99%的网站,由于没有实现无障碍,盲人难以正常浏览访问网站。

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

    公司的产品,大多出于开发成考虑,自动忽略了。你即使想实现,工头会给你开发工期吗?但是,自己的博客,对于职业操守,有时间还是去实现好。

    从哪里开始实现实现无障碍

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

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

    开发层面

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

    设计层面

    设计页面时,请满足文字上的前后景颜色的对比度。

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

    有什么工具可以帮助检测网站的无障碍性吗?

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

    对于开发人员,可以做一些自动化的检测,比如:使用pa11y这样一个工具,它是基于HTML codeSinffer以及PhantomJS制作而成的网站内容A11y(Accessibility,无障碍性)自动化检查工具。


    前端不止:Web内容的无障碍性 https://blog.csdn.net/toafu/article/details/80420266

    如何开发无障碍的 Web 网页应用详细手册教程指南 https://www.csdn.net/article/2014-09-30/2821939/1



    转载本站文章《Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/web/2016_0311_8341.html