H5无障碍适配在京东收银台中的实践

背景

之前无障碍工作取得了很好的成绩，并得到北京电视台、北京晚报等媒体的报道。为了给视觉障碍用户带来更好地体验，在新的一年里计划建立更完善的无障碍优化机制，争取把京东的无障碍体验做成业界标杆。

京东APP模拟无障碍模式

现状分析

在开启无障碍（iOS）/旁白（Android）模式下进入我们的app浏览购物时，会存在按钮无法获取焦点从而无障碍用户无法点击导致无法继续购物或参与抽奖之类的活动，或者当聚焦到价格时屏幕阅读器分开读出价格相关信息导致无障碍用户无法明确获取准确的价格信息，也存在一些装饰性的图片获得焦点从而读出内容给无障碍用户带来较差的购物体验。接下来的内容将针对H5无障碍开发进行。

ARIA

01

ARIA是什么？

ARIA是W3C的Web无障碍推进组织发布的可访问富互联网应用实现指南，主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！实际上ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力，并让你页面中元素的关系和含义更明确，HTML5已经开始使用ARIA，并且W3C发布的很多其他标准也开始使用ARIA，ARIA 是一组特殊的易用性属性，可以添加到任意标签上。

02

为什么需要ARIA？

我们先考虑几个问题：

• 如何让盲人用户知道当前浏览区域就是网站导航？

• 如何让盲人用户知道此处是可以点击的？

• 如何让盲人用户知道点击某个按钮后有弹窗弹出？

• 如何让盲人用户知道你模拟的select控件是单选还是可以多选？

• 如何让盲人用户知道当你惦记了某个区域后页面内容发生了变化？

在现有的知识范围内我们如何解决这些问题呢？可能会想到HTML5，虽然HTML5增强了网页的可访问性和无障碍阅读，但不是万能的，对于解决无障碍用户的一些问题上稍显逊色，因此才需要ARIA。

03

ARIA浏览器支持

ARIA规范一直在更新维护，浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。流行的Bootstrap、JavaScript库jQuery, 以及衍生的jQuery Mobile早早支持了ARIA。

04

ARIA组成

应用于HTML的ARIA由两部分组成：**role** （角色）和带 **aria-** 前缀的属性，其作用：

• role (角色)标识了一个元素的作用, 其实就是描述一个非标准的tag的实际作用，比如用div做button，那么设置div 的 role="button"，辅助工具就可以认出这实际上是个button。

• aria- 属性描述了与之有关的事物（特征）及其是什么样的（状态）HTML中的ARIA，其实就是描述这个tag在可视化的情境中的具体信息

盲人是如何使用手机的？

01

Android ? TalkBack

• 单指触摸：聚焦到触摸的项目并朗读

• 单指左右滑动（轻扫）：聚焦到当前焦点项目的前一个或后一个元素，并朗读

• 单指向右滑动/左滑动：从上到下朗读/从下到上朗读

• 单指双击（屏幕任意位置）：激活当前聚焦的项目

• 双指上下/左右滑动：上下/左右翻页（以页为单位），需先聚焦到可翻页的项目位置

02

iOS - VoiceOver

• 单指触摸：聚焦到触摸的项目并朗读

• 单指左右滑动（轻扫）：聚焦到当前焦点项目的前一个或后一个元素，并朗读

• 单指双击（屏幕任意位置）：激活当前聚焦的项目

• 三指上下/左右滑动：上下/左右翻页（以页为单位），需先聚焦到可翻页的项目位置

怎样做好信息无障碍？

01

提供等效替代（文字或者语音来替代）

图像的等效替代

移动端或Web端开发，都是用相应的文本信息等效替代图像。（为图像添加描述性信息，并不是文本越长越好）

• 避免添加额外的、无意义、无价值信息的图像

• 避免使用图像来表现文本（也就是文字图片）

• 为图像提供替代文本

• 装饰性图像应该可以被辅助技术忽略（非文字图片）

验证码的等效替代

验证码不仅有图形和声音，也有手机验证码、数学计算验证码等其他类型。部署验证码时，需要至少考虑两种验证码，以帮助感官功能缺失的障碍群体可以替代使用。

音视频的等效替代

颜色的等效替代

功能可被辅助技术操作

作为设计者来说，需要考虑如下两点：

• 所有的功能可以被辅助技术访问，比如读屏软件。

• 辅助技术操控时，不会陷入某个控件。

这样做对于普通用户也会有帮助，例如平板电脑，虽然只有虚拟键盘，但可以通过语音识别技术访问某个应用。

充足的时间读取和使用内容

一些人需要更多的时间输入文字、理解内容、操作控件或者是完成某个任务。

• 除非是拍卖、考试等特定时间必须完成的内容，应该让用户可以停止、延长或者调整时间限制。

• 可以暂停、停止或隐藏移动、闪烁或滚动的内容，对于学习障碍、读写障碍人士来说，这些内容会分散注意力，打扰他们读取内容。

• 用户可以主动推迟或完全禁止、中断，除非是紧急中断，用户发现某个错误，可以及时中断，以避免造成不必要的法律、财产纠纷。

快速导航

内容的结构化越来越复杂，信息的体量也越来越大，对于大多数人来说，快速导航、查找内容以及快速定位自己在结构化内容中的位置，是非常好的用户体验。

• 清晰的标题，可以帮助用户快速了解信息窗口中的大致内容。

• 可以快速地在一系列相似内容中找到所需内容。

例如通过浅层次的菜单目录查找或者通过搜索引擎，快速找到自己所需要的信息内容，对于残障用户来说，减少了操作频率，对于普通用户，也是一种非常好的用户体验。

• 通过某种机制可以快速跳过重复的内容，帮助辅助工具快速找到主要内容。

由于辅助技术是线性地读取内容，重复的内容和模块，将消耗读屏软件用户大量的时间。对于这类用户，这些模块是冗余的信息，使用起来非常不便。

常见信息无障碍缺陷分类统计

最常见的无障碍缺陷是替代文本（标签）问题和焦点问题，其中焦点问题又大量集中在焦点冗余与焦点缺失上。只要解决好标签问题和焦点冗余、缺失，互联网产品的无障碍化就成功了一大半。

读屏软件读什么？

要想学开车我们需要先了解车的启动方式，所以要想真正的做好信息无障碍，我们需要知道读屏软件的工作方式，要做到“知己知彼”。

例如使用了 a 标签制作了按钮，如果不进行额外的优化，读屏软件在朗读时会 读作"文字内容 链接" ，但实际上该 a 标签是用作按钮使用，因此可以在标签上添加 role="button" 属性。此时，读屏软件会 读作"文字内容 按钮" 。可以看到， 读屏软件在朗读时会在结尾朗读出元素的属性， 这也是无障碍优化中重要的一环。无障碍优化就是要解决如何使得元素的属性被正确识别，如何使得元素的内容被清晰准确地朗读，如何排除干扰元素等问题。

0 1

Android和iOS表现

在实践中发现，同一内容在Android和ios上读法存在不同的表现，属性在不同的机型和系统上存在一定的差异。

02

Dom的顺序很重要

读屏软件在 读屏时默认按照 DOM 的顺序朗读 ，因此如果 DOM 的顺序与内容的语义顺序不一致，例如使用了 flex-direction: row-reverse; 使得内容的顺序倒序显示，会使得内容难以理解。因此尽量避免使用会影响到 DOM 视觉顺序的样式，如果无法避免，需要手动设置 tabIndex 属性，告知读屏软件正确的内容顺序。

03

为非文本元素提供文本说明

• 关于Image

图片或者动画均需提供 alt 信息，对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。如图用于装饰页头的图片，实际并没有传递有价值的信息。对于图表文件，alt 属性的设置则需要简明扼要的表达出图表的信息，并不用把里面的细节都详细得描述出来

<img> 标签需要加上 alt 属性，读屏软件会自动读出 alt 的内容，例如 alt 内容为"一个桌子"，那么会被读作"一个桌子 图像"。如果没有添加 alt 属性，那么仅会读作"图像"，视障用户会完全无法理解其实际含义。但是，当 <img> 标签出现在 <a> 标签内部，作为一个图像链接时，对于放在链接里面的图片，如果已经有文字的说明，alt 也设置为空，这样避免读屏软件重复同样的内容。如下面的 HTML：

<a href=”http://apple.com/iphone/”>

<img src=iphone.jpg” alt=””>

Apple iPhone

</a>

a的内容已经指明了这是个苹果手机，img 的 alt属性就没必要再设置一次了。否则读屏软件会连续读两次重复的内容，引起混乱。

• 关于视频

与上面的 <img> 标签相似，<video> 标签需要加上 title 属性，例如 title 内容为"一棵树"，那么会被读作“一棵树 视频”。

04

使用语义化标签

语义化的 HTML 标签，例如 ：

<header> <footer> <nav> <section> <main> <aside> <button>

1、使用语义化的标签，主要影响两个方面：

• 选中元素时是否会整块选中

• 朗读时结尾会加上怎样的修饰词

2、标签修饰符读法

• <header> 读作"xxx 横幅 标志性内容"。

• <footer> 读作"xxx 页脚 标志性内容"。

• <nav> 读作"xxx 导航 标志性内容"。

• <section> 仅读作"xxx"，没有结尾修饰词。

• <main> 读作"xxx 主要 标志性内容"。

• <aside> 读作"xxx 补充 标志性内容"。

• <button> 读作"xxx 按钮"。

• <a> 读作"xxx 链接"。

实际上，在浏览器内部，使用语义化标签会隐式加上特定的 role 属性，最后朗读时的结尾修饰词也正是这些 role 属性的值以及分类，其他 role 的值朗读时也可以以此类推，而以上标签与 role 属性具体对应的关系如下：

05

使用aria标签向不存在原生语义的元素添加语义

aria-label="screen reader only label"， 用于添加朗读时的描述，读屏时会读出其中的内容，而忽略标签的原有的文字， 例如为 a 标签同时添加 role="button" 和 aria-label="另外的按钮描述"，最终会朗读成 "另外的按钮描述 按钮"。

aria-controls="main"，用于给操作按钮关联控制区域，VoiceOver 上这个属性没有任何作用，但 PC 读屏软件中，添加了该属性后，可以把焦点从按钮快速移动到被控制区域。

aria-live="true"，添加了该属性的元素，在其内容发生变化时， 读屏软件会自动读出变化后的新内容。可以用于会动态刷新的元素， 例如发现商品信息上的“XXX人已收藏”，用于监听实时变化的数据。

06

空格的使用

在实际开发中我们可能会遇到一种情况例如：招商银行卡（9326），读屏软件读屏的时候会读为“招商银行卡九千三百二十六”但是这个并不是盲人用户期待听到的，或者读为“招商银行卡九三四六”会更合适，所以我们要如何处理呢？有两种想法

• 第一种：将9346这几个“数字”分别替换成“中文”，但是需要注意的就是因为银行卡号哪个数字都有可能，所以我们需要做一个数字和中文的映射。

• 第二种：在9326这几个数字中间分别加一个空格，这样因为每个数字都不挨着，中间有一个看不见的空格，所以读屏软件在读屏的时候就不会读成“九千三百二十六”而是“九三四六”。

07

中文的使用

在某些情况下如果有些读法不对可以替换为中文

08

隐藏当前屏幕不可见元素

在实际开发中存在一种情况，就是开启无障碍，使用快捷手势操作的时候将弹窗中的内容读出来了。解决办法就是首先我们要确认的就是弹窗内容已通过 display: none 或 visibility: hidden 隐藏（包括浮动出现的 alert 和 banner 等），如没有隐藏，读屏软件仍会读出元素内容，但屏幕外的元素通常不希望被读出，如果不方便使用样式进行隐藏，可以为元素添加 aria-hidden="true" 属性，元素则会被读屏软件忽略。

总结

无障碍体现了语义化的重要性，这正是语义化的意义之一，方便屏幕阅读器阅读，要想做好无障碍我们必须要了解屏幕阅读器的工作原理，在这个前提下通过使用aria的语法规则相信我们会为无障碍用户带来更好的购物体验。