写点什么

vivo 场景下的 H5 无障碍适配实践

  • 2023-08-10
    广东
  • 本文字数:7164 字

    阅读完需:约 24 分钟

作者:vivo 互联网前端团队- Zhang Li、Dai Wenkuan


随着信息无障碍的建设越来越受重视,开发人员在无障碍适配中也遇到了越来越多的挑战。本文是笔者在 vivo 开发 H5 项目做无障碍适配的实践总结。本文主要介绍了在前端项目中常用的无障碍手势和无障碍属性,并且结合具体的开发案例为开发者真实展示了适配要点,提供组件适配思路。希望本文能为前端开发者带来更多的参考和帮助。

一、背景

1.1 无障碍适配认知

无障碍(Accessibility)是指为各种能力水平的人们提供公平和平等的机会和体验,以便他们可以更容易地访问、使用和参与社会中的各种产品、服务和环境。这些人包括身体残疾、听力、视觉、认知和学习障碍等各种能力水平的人。

1.2 无障碍适配原因

常见的障碍类型包括:视觉障碍、听觉障碍、认知障碍、行动障碍。这些“有障碍”的群体,在使用软件时无法像普通人一样操作,他们或许看不清,需要更大的字体,或许看不到,需要语音播报,又或许听不清听不到,需要依赖视觉反馈,或许肢体操作不方便,无法自由操纵手机。


所以,国家和企业需要站在“有障碍”的群体思考,为各种能力水平的人们提供公平和平等的机会和体验。

  • 【政策】:2011 年《中国残疾人事业“十二五”规划纲要》指出了, 建设无障碍环境的主要任务之 一就是加强信息无障碍建设,并明确了相关的政策措施。

  • 【包容性】:无障碍适配是一个重要的设计和开发目标,可以帮助您的网站或应用程序更加包容和可访问。

  • 【经济性】:无障碍适配不仅是一种道德义务,也是一种经济利益,因为它可以为您的网站带来更广泛的受众和更好的用户体验,带动业务增长。

1.3 无障碍适配引导

除了系统默认支持的大字体、内容播报、语音识别、字幕、语音控制等基础无障碍适配,更多的页面交互还是需要前端工程师们完成适配,所以开发者们需要开发出可识别的 web 页面,让障碍群体可以正常访问和使用。本文主要针对视障人群进行无障碍适配。

二、无障碍操作

在无障碍开发前,前端工程师们需要了解下无障碍的操作手势,站在障碍人群的角度体验操作,这样才能开发出更好的交互体验。也能避免因操作错误导致开发错误和重复开发。

2.1 读屏幕软件

首先我们需要了解下针对视力障碍人员使用的读屏设备或软件,常见的读屏软件,如下列表:

由于我们是在 vivo 手机内做移动端安卓手机无障碍适配,以下的方案、案例等介绍均是基于 Android-TalkBack。

2.2 常用操作手势

借助 TalkBack 手势,可以在 Android 设备上进行导航和执行常用操作,以下操作为安卓 9.1 版及更高版本,仅在 vivo 手机的操作。官方链接:Talkback 手势

三、常用属性介绍

3.1 aria 属性

ARIA 全称“Accessible Rich Internet Applications(可访问的富互联网应用)”,是 W3C 的 Web 无障碍推进组织在 2014 年 3 月 20 日发布的可访问富互联网应用实现指南。是一个为残疾人士等提供无障碍访问动态、可交互 Web 内容的技术规范。ARIA 用于提高使用 HTML、CSS、JavaScript、AJAX 和相关技术开发的动态内容和高级 UI 控件的辅助功能。ARIA 现在正式成为 HTML5 规范的一部分,还可以嵌入在常用的 JavaScript 库中。

3.2 aria 状态

3.3 role 属性

role 将元素标记为不同的属性,常用属性“button(按钮),region(图形)”,根据定义的不同属性,播报不同的内容。

3.4 tabindex 属性

tabindex 属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道,使用 Tab 键可以按文档顺序 tab 到所有可以获取焦点的元素。tabindex 可以设置为 -1, 0 或者是任何自然数。

当用户使用 Tab 键浏览页面时,元素获取焦点的顺序是按照 HTML 代码里面元素出现的顺序排列的,有时跟实际看到的页面顺序并不一致。

四、无障碍适配案例

4.1 项目适配案例

1.语言设置

在全局<html>元素中的 lang 属性设置页面的语言:

英文:

<html lang="en"> 
复制代码

中文:

<html lang="zh-CN"></html>
复制代码

国内的中文项目一般需要设置为中文,如果设置成了英文,有些数字会播报成英文。


2.层级属性

如果项目还没开始适配,则开启无障碍播报,会发现标签 div 和 span 默认作为焦点并播报,这样的话焦点和播报内容就非常分散。


如下图 2,就会有 3 个焦点,这样过于分散,一般适配会将 ui 的模块作为一个大焦点整体播报,此时在外层 div 添加 tabindex=1 聚焦。

 图 1:原图

图 2:分散焦点

图 3:一个大焦点

备注:绿色框为焦点标记


(1)聚焦播报

因为 div 标签会自动播报,所以就算焦点聚焦到外层,但是内层还是会自动播报。

<div class="content"  tabindex="1">  <div class="amount">    <div class="num">100</div>    <div class="unit">元</div>  </div>  <div class="desc">话费充值</div></div>
复制代码

播报内容:100 元话费充值。


(2)自定义播报

但是会存在 div 里写的内容和需要播报的内容不一致,则可在外层 tabindex="1"聚焦后,通过 aria-label 写上自定义内容

<div class="content" tabindex="1" aria-label="获得100元的话费充值券">  <div class="amount">    <div class="num">100</div>    <div class="unit">元</div>  </div>  <div class="desc">话费充值</div></div>
复制代码

播报内容:获得 100 元话费充值券


3.聚焦样式


聚焦可通过 tabindex 实现,但是聚焦后样式会有黄色的边框,可通过 outline: none 去除,但是页面中的焦点太多,可通过全局去除。

在公共 css 文件里设置:

*[tabindex] {    outline: none;}
复制代码


4.图片播报

(1)图片的 alt 属性设置

图片通过 img 标签实现,如果图片不可聚焦,则设置 alt=""即可。如果可聚焦并需要播报内容,建议通过 aria-label 设置。如果使用 alt,一旦图片加载不出来,就会把 alt 的内容显示出来,而且 alt 内容没有样式,在 H5 页面上会显得很突兀。

<img src="close.png" aria-label="关闭" alt=""/><img src="dog.png" alt=""/>
复制代码


(2)去除图片默认属性(图形)播报

可在 img 标签里,将 role 属性改为 row

<img  src="title.png"  tabindex="1"  aria-label="超级会员送您1个红包"  role="row"/>
复制代码


5.按钮播报

通常 ui 上的按钮在选中后,需要播报按钮内容+按钮+引导操作(如:点按两次即可激活)


首先需要聚焦(tabindex="1")到节点,然后需要在按钮上的节点上写上 role="button",加上这个属性后,后面会自动播报“按钮,点按两次即可激活”


案例:div 中的按钮


<div tabindex="1" role="button" class="btn">立即使用</div>
复制代码

播报内容:立即使用,按钮,点按两次即可激活


案例:img 中的按钮


<img  class="btn"  tabindex="1"  role="button"  aria-label="开"  src="open.png"/>
复制代码

播报内容:开,按钮,点按两次即可激活


6.数字播报

如:手机号:181****8805 中的星号不能正确播报,而是播报成乘,数字播报成整数。


错误播报:一百八十一乘乘乘乘八八零五

需正确播报:幺八幺星号星号星号星号八八零五


可写一个公共方法映射数字、*号和 X 号播报文案,在需要的转换方法里调用该方法形成手机号播报文案。

公共方法如下:

function $broadcastNumber(number) {  if (number === 0) return '零'  if (!number) return ''  const numberMap = ['零', '幺', '二', '三', '四', '五', '六', '七', '八', '九']  const specialMap = { '*': '星号', 'X': '叉号', 'x': '叉号' }  return number.toString().split('').map(item => numberMap[item] || specialMap[item] || item).join('')}
复制代码


7.自定义事件播报

目前带有点击事件的节点,聚焦后会默认播报点按两次即可激活(系统规范),但是这个引导不够明确,需要就具体交互场景制定播报内容,如:点按两次即可选中,点按两次即可打开红包等。


方案:在 click 事件节点里层包裹 div,并将焦点 tabindex 写在这一层的 div 上,再自定义播报的内容即可。

<div class="content" tabindex="1" @click="select">  <div class="amount">    <div class="num">100</div>    <div class="unit">元</div>  </div>  <div class="desc">话费充值</div></div>
复制代码

播报:100 元话费充值,点按两次即可激活


<div class="content" @click="select">  <div class="container" tabindex="1" aria-label="获得100元的话费充值券,点按两次即可选中">    <div class="amount">      <div class="num">100</div>      <div class="unit">元</div>   </div>  <div class="desc">话费充值</div> </div></div>
复制代码

播报:获得 100 元话费充值券,点按两次即可选中


8.额外内容播报

如:第几项,共几项,点按两次即可选中

方案:可用空 div 加 aria-label 实现

<div class="content" @click="select">  <div class="container" :class="{ 'z-active' : code === item.code }" tabindex="1">    <div v-if="code === item.code" aria-label="已选中"></div>    <div class="amount">      <div class="num">{{ item.num }}</div>      <div class="unit">元</div>    </div>    <div class="desc">{{ item.desc }}</div>    <div :aria-label="`第${index+1}项,共${list.length}项,${code === item.code? '' : '点按两次即可选中'}`"></div>  </div></div>
复制代码


9.整体播报

通常整体播报的内容较多,且播报顺序非代码书写顺序,这个时候就需要在外层焦点里,控制播报的内容,主要可通过两种方法实现,aria-label 拼接参数和 aria-labelledby 设置 id。

需要播报的内容:话费充值券,50 元满减券,满 199 元可使用,立即使用。


(1)aria-label 拼接参数

可通过在外层节点设置 tabindex=1 后,再添加 aria-label 属性按照需要的顺序添加参数

案例:

<div class="content" tabindex="1" :aria-label="`${title}${num}元${type}${rule}${btn}`">  <div class="left">    <div class="amount">      <span class="num">{{ num }}</span>      <span class="unit">元</span>    </div>    <div class="type">{{ type }}</div>  </div>  <div class="right">    <div class="desc">      <div class="title">{{ title }}</div>      <div class="rule">{{ rule }}</div>    </div>    <div role="button" class="btn">{{ btn }}</div>  </div></div>
复制代码


(2)aria-labelledby 设置 id

在外层节点设置 tabindex=1 后,在需要播报的内容节点里添加 id 值,并将 id 值按照需要的顺序写在外层节点 aria-labelledby 属性里

案例:

<div class="content" tabindex="1" aria-labelledby="title amount type rule btn">  <div class="left">    <div id="amount" class="amount">      <span class="num">{{ num }}</span>      <span class="unit">元</span>    </div>    <div id="type" class="type">{{ type }}</div>  </div>  <div class="right">    <div class="desc">      <div id="title" class="title">{{ title }}</div>      <div id="rule" class="rule">{{ rule }}</div>    </div>    <div id="btn" role="button" class="btn">{{ btn }}</div>  </div></div>
复制代码


10.局部特殊播报

如优惠券模块,可整体选中播报全部优惠券内容,但内部立即使用按钮又可聚焦播报跳转。


方案:外层聚焦-设置 tabindex=1,播报整块内容设置 aria-label 拼接参数或 aria-labelledby 设置 id,内层部分内容聚焦,聚焦内容设置 tabindex=1,不聚焦的部分设置 aria-hidden="true"(不然在选中外层焦点时候,内层非聚焦部分会重复播报)。


<div class="content" tabindex="1" aria-labelledby="title amount type rule btn"> <div class="left" aria-hidden="true"> <div id="amount" class="amount"> <span class="num">{{ num }}</span> <span class="unit">元</span> </div> <div id="type" class="type">{{ type }}</div> </div> <div class="right"> <div class="desc" aria-hidden="true"> <div id="title" class="title">{{ title }}</div> <div id="rule" class="rule">{{ rule }}</div> </div> <div id="btn" tabindex="1" role="button" class="btn">{{ btn }}</div> </div></div>
复制代码


11. 解决组件设置 aria-labelledby="[id]”后只重复播报第一条数据的内容

因组件被 Vue 中的模板 for 循环调用,每个内容不一样,用同一个 id 会导致播报同一个内容,且没有 key 值的区分,需要解决设置 aria-labelledby="[id]”后只重复播报第一条数据的内容


此时需要根据唯一标识区分 id:可在 id 后拼接唯一标识号,如:"`amount-${item.id}`"

案例:

<div class="content" tabindex="1" :aria-labelledby="`amount-${item.id} desc-${item.id}`">  <div id="amount" class="amount">{{ item.amount }}</div>  <div id="desc" class="desc">{{ item.desc }}</div></div>
复制代码


4.2 组件适配案例

除了具体业务的适配,还有一些共性的组件问题需要组件库统一适配,这样能减少各业务单独适配的工作量。


任何一个无障碍组件的适配,都包含播报内容管理、焦点管理两部分。对于播报内容管理,几乎所有的组件适配都会涉及到。无障碍 aria role、states 一般系统都有自己默认的播报行为,尽量保持系统默认的播报。当然,也可以通过 aria-label 定制播报内容。焦点管理主要针对元素会发生变化的组件,如弹窗、轮播图、各类选择器等。


焦点管理的基本方法有 3 种:

  1. tabindex 属性;

  2. aria-hidden 属性;

  3. el.focus()方法。


tabindex="undefined"即意味着元素不可聚焦,为其他值意味着元素可聚焦。aria-hidden 为 true,意味着不可聚焦且不播报。对于可聚焦的元素,可以通过 el.focus()方法直接聚焦在该元素上。


下面通过典型案例来说明各个组件是如何处理焦点和播报内容的。另外,由于一个 html 中可能多次使用同一个组件,所以下面的案例都是在不使用 id 属性的基础上完成适配的。如果一定要在某个组件使用 id 属性,记得通过随机函数对 id 属性做随机命名。


1. switch、checkbox、radio 组件

这几个组件相对简单,使用系统默认的 role 即可。完成播报内容的适配即可,不需要做焦点管理。

以 switch 为例:首先是 role=switch,然后通过 aria-check 播报开关状态,最后通过 aria-disabled 来播报是否禁用。

<div  class="nx-switch"  tabindex="-1"  :aria-checked="!!value"  :aria-disabled="disabled"  @click="onClick"  role="switch">  <div :style="barStyle"></div>  <div :style="ringStyle"></div></div>
复制代码


2.弹窗、对话框组件

弹窗组件是一个相对复杂的组件,既涉及到焦点管理,也涉及到播报内容管理。通过弹窗组件主要介绍焦点管理的小技巧。


该组件正在业务中的使用情况:

我们的弹窗组件相对比较通用,主要包括标题、内容、按钮三个部分。其中,标题、内容既可以通过属性传入,也可以通过 slot 传入。对于 slot 传入的部分,组件不太好控制。在业务使用过程中,还普遍存在只有内容的弹窗。


适配目标:弹窗弹出时需要自动聚焦在标题上并播报。


弹窗焦点顺序:弹窗弹出时需要自动聚焦在标题上并朗读标题,然后手动移动下个焦点聚焦到说明文本,最后聚焦到操作按钮。


(1)焦点管理

首先,需要解决弹窗弹出时的焦点聚焦问题。由于弹窗组件非常灵活,所以使用场景也非常多样。对于属性传入的标题,组件内部可以获取到该元素,并完成聚焦播报;对于 slot 插入的就显得无能为力。


对于 slot 这种情况,组件和业务约定了一个属性,如果业务想聚焦在这个 dom 元素上,就给该元素添加这个属性。组件会通过 el.querySelector 查询弹窗的后代元素,在弹窗弹出时自动添加 tabindex 并完成聚焦播报。

<nx-popup v-model="isPopupShow.center">  <div    nx-popup-aria-auto-focus="true"    aria-label="无障碍播报测试"    class="nx-popup-center"  >    Popup Center  </div></nx-popup>
复制代码

另外,考虑到有业务要求弹出时不自动聚焦在弹窗上,所以还提供了属性,用于关闭焦点管理功能。


然后,需要解决弹窗关闭时的焦点还原问题。在弹窗弹出前保存当前聚焦的元素 document.activeElement,关闭弹窗以后,通过 el.focus()手动聚焦在该元素上。


还剩一个焦点穿透问题。很多安卓系统 aria-modal 属性不起作用,所以焦点还能够穿透弹窗,选中页面上的元素。


目前组件没有特别好的办法处理这点。开发过程中,可以对需要屏蔽的元素添加 aria-hidden=true 属性


(2)播报内容管理

这部分就显得比较简单。对于 slot 的情况,播报内容可以交给业务开发控制;对于属性传入的情况,可以添加组件属性,为业务提供定制化播报的能力。


3.地址选择器组件

地址选择器是一个滚动式交互的组件。在这个组件的开发过程中使用到了一种小技巧,即不聚焦在某元素上,也能自动播报该元素变化的内容。


该组件在业务中的使用情况:业务开发没有对该组件定制化,所以只用考虑组件内部的适配即可。


适配目标:在弹窗弹出时自动聚焦到标题上并播报。下图是焦点的排布。

以该图为例,焦点聚焦在第一列的时候,播报“河北省,滑动滚轮控件,可上下滚动切换”;另外,在每一列滚动结束时,播报当前选中的地址,如“河北省,石家庄市,桥西区”


(1)焦点管理

同弹窗组件。


(2)播报内容管理

这里的难点就在于每一列滚动结束的时候,需要播报变化后的地址,但是此时焦点还在选中的这列上。


这里添加了一个隐藏的元素(不在页面上显示),并添加属性 aria-live="polite",滚动结束的时候修改 ariaPickerContent 的值。如果不想播报则将 ariaPickerContent 置为空字符串,弹窗关闭的时候记得置为空。

<div class="nx-picker-scroll-aria" aria-live="polite">  {{ ariaPickerContent }}</div>
复制代码


五、总结


本文是在 vivo 体系下的无障碍适配实践,主要提炼总结了一些适配方法,对内外部的无障碍适配工作都有一定的参考和借鉴价值。下一步计划丰富和完善组件库的适配,沉淀一套高效的适配方案,尽量减少开发人员的适配成本,提高开发效率。


开发者应秉持着技术有温、代码有爱的态度,坚守“勿以善小而不为”的准则,以用户为导向,让我们的产品和服务照亮每一位用户,让“障碍群体”在这个有爱的互联网时代,紧跟时代潮流。

发布于: 刚刚阅读数: 5
用户头像

官方公众号:vivo互联网技术,ID:vivoVMIC 2020-07-10 加入

分享 vivo 互联网技术干货与沙龙活动,推荐最新行业动态与热门会议。

评论

发布
暂无评论
vivo 场景下的 H5无障碍适配实践_前端_vivo互联网技术_InfoQ写作社区