被大多数开发人员忽略的Web Accessibility是什么?

最近项目需要,研究了一下Accessibility,在这之前,作为一个前端开发,我对这个几乎是不了解的,为此感到十分惭愧。所以Web Accessibility到底是什么呢?

首先我们先来了解一下 Accessibility,又简称为A11y(A-y中间一共11个字母),翻译为中文又叫“无障碍访问”,是指产品、设备、服务以及环境等也能够被残疾人使用。所以Web Accessibility 我们就不难理解了,在W3C上对这个词语有着更加准确的定义:

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:
- perceive, understand, navigate, and interact with the Web
- contribute to the Web

Web无障碍是指设计和开发网站、工具和技术,使残疾人能够使用它们。更具体地说,所有人可以:
- 感知、理解、导航和与Web交互
- 为Web做贡献

Disabilities 又指的是哪些人呢?同样在W3C上有着明确的定义:

Web accessibility encompasses all disabilities that affect access to the Web, including:
Web无障碍包括所有影响浏览网页的障碍,包括:
- auditory (听觉)
- cognitive (认知能力)
- neurological (神经损伤)
- physical (身体上的)
- speech (语言)
- visual (视觉)

Web无障碍对无残疾人士亦有好处,例如:
- 人们使用手机、智能手表、智能电视等具有小屏幕、不同输入模式的设备等
- 随着年龄的增长能力发生变化的老年人
- 有“暂时性残疾”的人,如手臂骨折或眼镜丢失
- 有“情境限制”的人,例如在明亮的阳光下或在无法听音频的环境中
- 使用慢速互联网连接,或带宽有限或昂贵的人

简而言之,这里所指的有障碍的一类人包括失明或低视力、耳聋或听力低下、行动受限、语言障碍、感光性以及这些障碍的组合,以及有学习障碍或认知限制的一类人。

据公开数据统计,全球大概有76亿人,而使用互联网的达到了44.3亿。联合国残联通过调查得出数据,全球大约有10%(约7亿6千万)的人是残疾人。所以这个渺小而又庞大的群里我们软件开发的目标用户吗?他们能够是我们的目标用户吗?虽然我不能感动深受,但是我想他们肯定希望自己能够随心所欲的访问互联网,能够像一个正常人一样去体验科技给人们带来的便捷与快乐。所以,如果我们能够让他们的期望变为现实,那又为什么不尽力去实现呢?

为了使我们的web应用能够被所有的人使用,比较重要的几点包括:
1. 对于所有的鼠标操作,应用程序应该有相应的键盘。
2. 选项卡必须按逻辑顺序排列,以确保导航顺畅。
3. 需要为菜单提供快捷键。
4. 应用程序中的所有标签应准确和易于理解。
5. 应用程序中的颜色需要对所有用户都是可区分的。
6. 图像和图标应该容易被所有终端用户理解。
7. 用户应该能够调整或禁用闪烁、旋转或移动元素。

为了支持无障碍访问,W3C(Wide Word Web Consortium)制定了一系列的标准,这就是WCAG(Web Content Accessibility Guidelines)。WCAG基于可感知、可操作、可理解和健壮性 四个基本原则定义了如何使残障人士更容易访问网站内容的准则。WCAG进行了3次主要修订,即:
- 版本1.0发布于1999年
- 版本2.0,发布于2008年
- 2018年出版的2.1版。

1.0 和 2.0版本主要是针对四项基本原则制定了一些标准,所以在这之前大多数组织使用的是2.0版本。但是大家都有目共睹,从2008年到现在,这十多年来网络技术的发展是突飞猛进的, 例如HTML5的发布使前端技术不再局限于简单网页的编写。所以针对最新的web技术,W3C 在2018年发布了2.1版本。2.1版本的更想主要是以下几点:
    1. 提供触摸设备手势的替代品。如缩放或滑动必须使用替代手势,可以使用单点、双点或长点来代替执行。
    2. 针对组件的标签和可感知的名称应该是相同的。如一个按钮在屏幕上显示为“搜寻”,则该按钮的标签亦应是“搜寻”。这样,如果用户说“搜索”。然后语音识别软件将识别并触发搜索行动。
    3. 网页在纵向和横向模式下应该具有同等的功能。缩放应该是比例的,平滑的,不应该导致功能的损失。
    4. 悬停或焦点内容,因为在没有鼠标的情况下,这些小部件是不容易访问的。指南建议用户应该能够停留在这个内容上(例如表单模式),并使用键盘导航,而不失去对背景页面的关注。用户应该能够使用ESC键关闭这样的内容。
    5. 应该清楚地通知用户超时。一个常见的用例是用户将从经过身份验证的站点被注销。应该有非常明确的通知,以便在此类事件发生时清楚地通知所有用户——包括残疾用户

其实早在1973年,国会通过了一项以帮助所有人,包括残疾人的名为《康复法案》的法案。在1998年和1999年,该法案进行了修订,以使电子信息技术更容易访问,该修正案叫做 Section 508。Section 508 主要是针对一个非营利组织,这个组织可能从政府那里得到钱来为其成员建立一个网站,那么这个网站必须符合Section 508标准。在2018年WCAG2.1发布时,国会修改Section 508的指导准则,加入了WCAG关于A和AA符合性的指导方针。

所以在我们的项目中,比较常见的例子和实践:
1. 使用语义化的HTML标签
2. 实现无障碍表单
    · 所有的 HTML 表单控制,例如  和