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

信息无障碍

信息无障碍，英文词语来自“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.net/html/webfront/SGML/web/2020_0315_8341.html