最近@Robin Rendle和@stefanjudis先后写了篇文章，从同一个角度抛出两个话题：“为什么创建无障碍网站这么难”？和“应该通过增强浏览器开发者工具实时提供开发者开发无障碍网站存在的问题”！那么我想问的是，开发无障碍网站为什么会令大家感觉难以及工具上的实时提示就能让开发变得更容易了吗？如果不是，怎么样来开发一个网站才能符合无障碍规范相关的要求，即具有高可访问性。更直接一点，怎么才能让开发者创建无障碍网站是件轻易而不再觉得是件困难的事情。在接下来的内容，将作为前端开发者的角度来和大家一起探讨这方面的话题。如果你感兴趣的话，请继续往下阅读。

先来看一些数据

2019年08月我国发布了第44次《中国互联网络发展状况统计报告》。我截取了报告中的一些数据：

• 截至2019年6月，我国网民规模达8.54亿，较2018年底增长2598万，互联网普及率达61.2%，较2018年底提升1.6个百分比
• 截至2019年6月，我国手机网民规模达8.47亿，较2018年底增长2984万，我国网民使用手机上网的比例达99.1%，较2018年底提升0.5个百分比
• 截至2019年6月，我国农村网民规模为2.25亿，占网民整体的26.3%，较2018年底增长305万；城镇网民规模为6.30亿，占网民整体的73.7%，较2018年底增长2293万
• 截至2019年6月，我国网民使用手机上网的比例达99.1%；使用电视上网的比例为33.1%；使用台式电脑上网、笔记本电脑上网、平板电脑上网的比例分别为46.2%、36.1%和28.3%

接下来再来看另一份数据。根据第六次全国人口普查我国总人口数，及第二次全国残疾人抽样调查我国残疾人占全国总人口的比例和各类残疾人占残疾人总人数的比例，推算2010年末我国残疾人总人数8502万人。

各类残疾人的人数分别为：视力残疾1263万人；听力残疾2054万人；言语残疾130万人；肢体残疾2472万人；智力残疾568万人；精神残疾629万人；多重残疾1386万人。

而据世界健康组织的统计，视障人士就达2.85亿，仅我国就有1263万人患视力障碍（2010年末的数据），美国这样的发达国家也有近810万网民患视力障碍。

上面是各种有关于有障碍人群的数据统计。在今年年初（2019年2月），WebAIM使用WAVE独立API（附加工具收集站点技术参数）对100万个网站主页进行了可访问性评估。虽然这项研究的重点是自动检测，但最终的结果是令人感到沮丧的，无障碍化方面做得都不够好。具体的数据可以点这里查看（2019年分析报告 和 2018年分析报告）。

你可能会说这些数据和我们前端开发者（或者产品、设计师）有什么关系呢？

早在1997年10月22日，W3C的主席@Tim Berners-Lee在美国华盛顿国际计划办公室（IPO）启动无障碍网页倡议（WAI）时说过一句话：

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect," said Tim Berners-Lee, W3C Director and inventor of the World Wide Web. "

大致的意思是Web的力量在于它的普遍性。每个人不论残疾与否都能访问是一个最基本的方面。

既然如此，我们就有必要让自己的产品除了为普通人提供更好的使用体验之外，还要能让残障人士（用户）正常地与产品交互。

在Web页面或应用中能够给访问页面有障碍的人士提供更好的体验，那就需要使用一些无障碍方面的技术。那么什么是Web无障碍呢？

什么是Web无障碍

任何一个Web页面或应用程序从根本上来说是为所有人设计的，无论他们的硬件、软件、语言、位置或能力如何。当Web达到这一目标时，具有不同听力、运动、视觉和认识能力的人就可以访问它。因此，残疾对Web影响发生了根本性的变化，因为Web消除了许多人在现实世界中面临的沟通和互动障碍。然而，当网站，应用程序、技术或工具设计得很糟糕时，它们可能会造成阻碍，使人们无法正常的使用Web。

对于想要创建高质量网站或应用程序的开发人员来说，无障碍是必不可少的，这就不会让一些人在使用他们的产品和服务的时候被排队在外。

作为一名开发人员，你可能时常看到 “Accessibility” 这个词。在Web发展的初期，人们习惯性将其翻译成“无障碍”，因为它的初衷主要是考虑如何让残障人士更容易地访问Web内容。比如有行动障碍的人士他更依赖于键盘与Web做交互；有视觉障碍人士更依赖于放大屏幕与Web交互；有听力障碍人士更依赖于阅读方式等。但随着互联网的发展，访问Web的场景、设置和人群都更复杂化，多样化。“Accessibility”已不再局限于满足残障人士的需求，它也涵盖了在特定场景下的网站可用必，比如移动终端，弱网环境、忘带鼠标，触模板坏了，老年人访问等等。

在面对这样的新场景、新群体之下，“Accessibility”更多时候被译为可访问性。常常也被缩写为a11y（其中11是指a和y之间有11个字母）。因此，在整个社区你会看到有很多以a11y为名的网站或应用，一般这些网站都是围绕着“Accessibility”相关的内容，比如A11y.meThe A11Y Project和A11yWeeky等。

要是根据W3C的说法来解释的话：

Web可访问性意味着 每个人都可以感知、理解、导航、与Web交互，并为Web做出贡献。在这方面，网站的可访问性包括所有影响网站访问的条件，包括 视觉、听觉、物理、语言、认知和神经功能障碍。

简单地说，某个网站具有可访问性时，指的就是是 网站的内容可用，并且毫不夸张地讲，其功能可由任何人操作。

大部分开发者都有类似这样的一个潜意识，轻易地认为所有用户都能看见和使用键盘、鼠标或触摸屏，并且与网页内容的交互方式与自己相同。这会造成一些人能够获得良好的体验，其他人则会遇到从简单烦恼到重大障碍的各种问题。

那么，可访问性（无障碍功能）就是指这样一类用户的体验，他们可能不在“典型”用户这一狭窄范围之内，并且与网站的访问或交互方式异于常规。具体地讲，它所涉及的用户具有某种身体缺陷或残障（切记这种体验可能具有非生理性或暂时性）。

传统上会认为这是关于残疾人的，甚至是仅狭隘的定义在盲人人士这单一群体，但实际上它也涵盖了其他群体，比如使用移动设备的人群，或者那些网络连接缓慢的人群等。

尽管我们在探讨无障碍功能时往往是围绕身体有缺陷的用户，但实际上都能将其与我们使用的界面由于其他原因而无法访问的经历联系起来。您是否曾在手机上使用桌面版本网站时遇到问题？是否看到过“您所在地区不提供该内容”消息？或者是否在平板电脑上找不到熟悉的菜单？这些都属于无障碍功能问题。

随着了解的深入，您会发现在这种更广泛、更普遍意义上解决无障碍功能问题几乎总能让所有人的用户体验得到改善。

为什么要做可访问性

正如万维网的发明者和W3C组织的主席@Tim Berners-Lee所说：

Web的力量在于它的普遍性。每个人不论残疾与否都能访问是一个最基本的方面。

从文章开头提供的数据来看，整个世界有残障的人士数量并不少，加部分无残障的人士在特定的场景访问Web也有可能存在一定的障碍。如果我们的Web页面或应用程序在可访问性方面做的不够好（甚至是没有做），结果将是：

• 可能会流失部分群体
• 可能会造成一定的经济损失

甚至还有可能面临一定的法律风险。比如达美乐披萨这个法律案件就是一个公司因为没有给自己的Web提供可访问性而被起诉。在很多国家有对Web网页或应用程序的可访问性有明确的法律条款。可访问性法规因国家不同，也有相应的差异，比如：

• 在美国，有1990年提出的《美国残疾人法》，简称ADA（Americans with Disabilities Act of 1990, Amended (ADA)）；1996年《电信法》的第255节（Section 255 of the Telecommunications Act of 1996）;1986年的《航空公司准入法》（Air Carrier Access Act of 1986）和2010年的《21世纪通信和视频可行性法》，简称CVAA（21st Century Communications and Video Accessibility Act of 2010 (CVAA)）
• 如果你创建的网站或Web应用程序是为美国政府机构服务的或者是接受政府的资金，那么你就需要注意Section 504 of the U.S. Rehabilitation Act of 1973和Section 508 of the same U.S. Rehabilitiation Act of 1973相关法律法规
• 如果你是在欧盟（EU）工作或从事重要业务，你需要了解欧洲无障碍法案以及Web和移动端无障碍指令。另外一些欧盟成员国还有额外的规定。例如，英国有《2010年平等法案》（The Equality Act of 2010）
• 如果你是在加拿大做生意，那一定得了解《加拿大人权法案》(Canadian Human Rights Act)以及有关通讯和联邦身份的政策（Policy on Communications and Federal Identity）

事实上许多国家有关于Web可访问性都有相应的政策和法律，说不定不久之后我国也会有相关的法律。

看到这些法律法规，可能很多人或组织会感到不知所措。任何个人或小公司都不可能跟上所有规定，但这也不是致命的问题，因为有一些标准机构、指导方针和专家可以帮助我们解决这个问题。

大多数的规则都是从WCAG 1.0、WCAG 2.0和WCAG 2.1标准中提取的，作为构建可访问网站的指导方针。这几个标准都是由Web内容可访问性指南工作组（Web Content Accessibility Guidelines Working Group）构建和维护的，该工作组由Web开发人员和来自各种公司和组织的专家组成。

WCAG工作组是W3C（万维网联盟）下的众多工作组之一。W3C是负责HTML（HTML5）、CSS和Web所依赖的许多其他技术的国际标准社区。

在一些国家除了有明文法律规定要求对Web做可访问性的硬性要求之外，其实给Web添加可访问性还有其他的作用或者说意义：

• 伦理意义：任何人生理带给生活带来的缺陷对于生活都是相对不便的。但是在互联网的世界中，我们应该把缺陷带来的不便降到最低，即将服务平等的提供给你的用户是最基本的尊重
• 用户体验：有着良好可访问性的产品往往也有良好的设计和工徎化。对于有工匠精神追求的工程师而言，给自己的产品（Web页面或应用程序）做好可访问性是自己职责内的一部分，而不仅仅是情怀所致
• 口碑和品牌形象：具有较好的可访问性将给自己的用户群体有一个较好的体验，这样比你的对手要好。无疑是一个颇有竞争力的优势。能大大提升品牌口碑，同时也能提高自己的品牌形象
• SEO：其实SEO和可访问性优化是有重叠的。比如具有语义化的HTML结构对SEO和可访问性都有帮助，因此在构建自己的产品时应该正确的使用正确合理的标签及标签属性

简单地说：

良好的 Web 可访问性，就是把你的网站建设成让尽可能多的人都觉得好用，可以让每一个人受益。

为什么总是无人在意Web的可访问性

既然Web可访问性有这么的优势，那么为什么实际中为什么总是无人在意Web的可访问性呢？在聊这个话题的时候，先告诉在大家一个故事。据说在Web社区中有一个传说：

在自己的Web页面或应用（或产品）中添加可访问性相关的功能需要附出额外的代价，而这个代价是高昂的、困难的，又是没必要的。

换句话说，从零开始设计符合可访问性的应用（或产品）不会添加额外的功能或内容，也就不会有额外的成本。不过这个传说也不假，如果你面对下面这样的场景：

• 在一个已存在的有众多可访问性的应用上试图解决，让其具有可访问性
• 在项目的最后一步才开始考虑可访问相关的问题以及处理方案

基于这两点，处理Web可访问性是较难的，成本也是极高的。

另外还有就是意识和认知问题上。在很多团队中，大家时不时会聊Web可访问性的重要性，但事实上仅停留在空谈上（没人愿意把时花在这上面）。那么为什么会这样呢？从我切身的角度来想，应该有以下这几点：

• 从业务角度而言，Web应用是否具有可访问性，对我没有实际的利益（我看不到具有可访问性的应用能带来多少价值），所以与其花时间处理不具效益的功能，还不如多花点时间做一些能带来实际效率的功能
• 从开发者角度而言，我也想做好Web应用的可访问性，但业务需求都这么紧张，哪有时间再处理这些额外的需求，不是主要的需求；对于有情怀的开发者而言，我有足够的时间，我想做的时候再来考虑Web可访问性相关的事项吧
• 不管是产品还是开发者，无法切身体会到残障人士的生理不便感同身受，也就是说要处理无法体会的情况，的确很难。换句话说，缺少的不是动力和技术，而是常识或者意识
• 给Web应用添加可访问性的工作是一个细活，费时不说，不一定见效。对于开发者而言，需要了解很多有关于Web可访问性相关的知识，特别是标准，然后在此基础上参照开发。而且开发完之后不一定是合适的，需要人测试，而这些测试的工作量也不少

简单地说：

很多时候是屁股决定脑袋。在商业项目中不太可能为了少数用户而延迟交付，关注大部分用户的需求才是核心，所以Web可访问性往往会被推到下一个，再下一个。有时间，有人再说。

另外，很多时候，开发者自身都会存有同样的困惑。可访问性和我自己有什么关系？甚至很多开发者不一定具备这方面的知识点，如果你要让其给Web应用添加可访问性，他有可能不知道从何处入手。也正是因为这个原因，很多人都会觉得创建可访问性网站是很困难的。

要改变这种现状，需要从一个产品的开发的源头就要有这样的意识。也就是说，不管是产品还是开发者或者是测试都不能再抱着“与我何干”的心态，更多的时候应该把自己纳入到这些特殊群体中来，哪怕是把自己纳入暂时性的特殊群体也是好的开始。

这么说的原因是，所谓的这些特殊群体在时间上是可以分为：暂时性、永久性和情景性。针对这几个场景，我们可以这样来理解。

暂时性

比如说，你突然有一天因为某些事情，无法正常的用手来操作鼠标（或者忘记带鼠标）或者无法双手操作某些设备终端。面对这样的场景，咱们就可以被纳入到暂时性的群体中来。如果我们要继续操作一个应用，就需要借助别的方式来完成，比如在PC端，需要依赖键盘来完成对Web应用的操作，可能会用到键盘的一些操作键盘，比如tab键（最常用键之一）、Enter键，方向键盘等：

在移动端上虽然没有键盘，但移动设备都会提供一些辅助功能的选项，比如iPhone就提供了“辅助触控”来实现无障碍：

永久性

在这些特殊群体中，可能很多人是永久性的，比如说盲人、视弱或者色盲。这样的情景之下就需要调整颜色。比如iPhone在辅助功能选项中就提供了显示调节、色彩滤镜和对比度增强等功能来帮助这些用户群体。

情景性

情景性是生活中经常可接触的场景。比如你使用手机的时候，很多时候无法使用语音（比如你在参加一个重要的会议，不方便开启语音）。在这种场景之下，有朋友给你发了一条语音，你可能会选择将语音转换成文字。

Web可访问性分类

Web可访问性（无障碍）的分类一般都是根据生理障碍来划分，即分为听觉、视觉、行动和认识四个类型。不同类型都会包含多种情况，它们或多或少都会影响用户使用Web应用。这样一来，网站开发者需要为这些用户群体做好可访问性方面的优化。这里简单地根据对应的类型做一个简单的介绍。

听觉障碍

听觉障碍指的是听力有障碍的用户群体。对于这些的用户群体，对于音频和视频来说是有一定的障碍（有可能听不太清楚，甚至一点都听不清楚）。如果你的Web应用正好是做音频或视频方面的（比如现在喜欢提供短视频描述产品详细、比如喜欢营销页面配乐等）那就需要为这样的用户群体做一些可访问性相关的处理。比如不仅依靠声音来传递信息，提供音频的同时还需要提供别的媒介。比如针对视频提供完整的字幕，比音频提供文本描述。除此之外，还需要注意音视频中的噪音影响，保证受众群体可以准确地接收到信息。

视觉障碍

视觉障碍指的是视力有障碍的用户群体，比如视弱，色弱，色盲，盲人甚至一些老年人（老年人视力有减弱的情况）。对于这些用户群体在访问Web页面时会有一定的障碍。

对于视弱的用户群体在访问Web应用可能会因UI视觉上的因素看不太清楚，针对这些用户群体应该提供一个可读的界面。比如UI元素要足够清楚，字号尽可能的大等。对于色弱和色盲的用户群体，对于颜色的区分较弱，针对这些用户群体应该提供一个颜色对比度更合理的界面。对于盲人群体，应该提供更合理的HTML结构，然后用自然语言向用户描述解析结构，便于读屏软件阅读。另外，一些盲人用户群体除了依赖读屏软件之外，可能会强度依赖于键盘的操作，因此应该给Web应用提供较好的焦点操作，便于用户通过键盘访问Web应用。

运动障碍

运动障碍是指肢体操作有障碍的群体。在某些应用中需要快速或者重复执行某个动作，比如长按一个按钮或者在规定时间内完成某项操作，这些对于有运动障碍的群体来说都是比较困难，如果要求他们强行做到这些动作，可能会造成生理不适。针对于这样的场景和用户群体，我们应该尽可能在Web应用上避免采用这些动作，不过这不是件容易的事情。比如在滑动滑块的时候，你可能需要按住一个按钮来保证它持续滑动。想到了运动障碍的用户，或许会改变方案，换成每轻触一次按键滑块滑动一点距离。虽然这样做有所改变，但也可能带来新的麻烦，变成重复动作，这样也会为有运动障碍的群体带来操作负担。所以在这方面，我们应该更多的是保证Web应用无论使用鼠标操作还是键盘都是一个较好的操作。

认知障碍

认知障碍一般指的是有晕动症（指与晕动症和感官超载相关，比如癫痫病患者）、有学习障碍和阅读困难等用户群体。面对这些群体，我们应该尽量让页面上不能有动效，因为动效会诱导类似患有癫痫病患者发病（这可能是件极其危险的事）。对于学习有障碍的群体，我们应该要尽量的简化Web应用的场景、界面，尽量用简单的方式来描述。对于阅读有困难的用户群体（阅读困难是一种生理缺陷，这类患者难以阅读，因为看到文字就会觉得文字在旋转扭曲或者全部挤在一起），我们应该操持良好的可读性，至少保证一部分生理不便的用户可以操作你的Web应用，比如使用可读的字幕和文本。

针对这些不同的用户群体，在可访问性设计或者开者过程中都有一些针对性的技巧和需要注意的细节，在稍后的我们会详细阐述这方面。

Web可访问性指南

Web可访问性指南又称Web内容无障碍功能指南（Web Content Accessibility Guidelines）常常简写成 WCAG，目前最新版本是V2.1。这是一套由无障碍功能专家编辑的指南和最佳做法，旨在有系统地阐述“无障碍功能”的含义。实际上，有若干国家在其网络无障碍功能法律要求中明令，必须使用这些指南。

Web内容无障功能指南中文版本

使用WCAG的个人和组织差异很大，包括网页设计师和开发人员、决策者、采购代理人、教师和学生。为了满足这些受众的不同需求，提供了多层指导，包括总体原则、一般准则、可测试的成功标准以及丰富的充分技术、咨询技术，和记录的常见故障包括示例，资源链接和代码。

• 原则：最重要的是为Web可访问性提供基础的四个原则：可感知、可操作、可理解和健壮性
• 准则：原则的下层是准则。13条准则提供了作者应该努力的基本目标，以便让不同有障碍用户更容易访问内容。准则不可测试，但提供框架和总体目标，以帮助作者理解成功标准并更好地实施技术
• 成功标准：对于每个准则，提供了可测试的成功标准，以允许在要求和一致性测试的地方使用WCAG 2.1，例如设计规范，采购，法规和合同协议。为了满足不同群体和不同情况的需要，定义了三个一致性级别：A（最低），AA和AAA（最高）
• 充分的咨询性的技术：对于WCAG 2.1文档本身的每个准则和成功标准，工作组还记录了各种各样的技术。这些技术具有信息性，分为两类：足以满足成功标准的技术和提供咨询意见的技术。咨询技术超出了个人成功标准的要求，并允许作者更好地解决准则。一些咨询技术解决了可测试成功标准未涵盖的可访问性障碍。在已知常见故障的地方，也会记录这些故障。

所有这些指导层（原则，准则，成功标准以及充分的咨询技术）协同工作，为如何使内容更易于访问提供指导。

简