乐趣区

关于javascript:京喜小程序首页无障碍优化实践

jiezi

前言

本文参考 WCAG 2.1、WAI-ARIA 和 Web 可拜访性与无障碍最佳实际，在京喜小程序首页无障碍优化开发中，总结了一些“无障碍优化”在小程序端的实际，心愿以此推动无障碍在小程序更多地落地。

无障碍

无障碍是什么？

在理解无障碍之前，咱们先来理解一些数据：

  • 据中国盲协的最新数据显示，中国目前视障者有 1700 多万，随着老龄化的重大，视障群体有进一步扩充的趋势。
  • 在中国，有着宏大的信息阻碍群体，包含：8500 多万残障人士，两亿多老年人，大量认知障碍人士。
  • …

无障碍

无障碍 (Accessibility)，是指在倒退过程中没有妨碍，流动可能顺利进行。从无障碍引申的相干词汇有，无障碍设施、信息无障碍、无障碍交换等等。

信息无障碍

对于信息无障碍，中国互联网协会给出了一个定义：任何人（无论是健全人还是残疾人，无论是年轻人还是老年人）在任何状况下都能平等地、不便地、无障碍地获取信息、利用信息。

以上释义，源自百度百科

无障碍设施

如果看不见、听不见，咱们该怎么生存呢？

在生活中，咱们经常会看到一些设施：缘石坡道、盲道、无障碍垂直电梯、无障碍扶手、人行横道的警示信号等等。这些给阻碍群体应用的平安设施，就是无障碍设施 (Accessibility Facilities)。无障碍设施次要是为了让阻碍群体可能自主、平安、不便地通行和流动，它是阻碍群体生存顺畅的重要保障。除物质环境的无障碍设施，无障碍设施还能够扩大到信息和交换的无障碍，比方互联网中的网站设计、网上办事、购物交互等。

信息无障碍的现状

随着互联网一直倒退，互联网利用曾经融入到咱们生存的各个方面，行动不便的阻碍群体则更心愿也更须要通过不便的互联网利用获取信息、学习和生存。因而，互联网利用进行无障碍优化，对阻碍群体显得尤为重要。

早在 1997 年 2 月，万维网联盟 (W3C) 为了晋升网络的无障碍性，成立了网络无障碍推动 (WAI)小组，并制订了一系列的对于网络无障碍的规范、标准、检测表、无障碍的技术，并与世界各地的组织携手单干，在寰球范畴推动无障碍网络静止。

但至今为止，互联网产品的无障碍优化停顿依然迟缓，很多网站建设和挪动端 APP 的开发都还未思考无障碍优化，即便是通过读屏软件，也很难获取想要的信息。

阻碍群体调研

咱们以电商平台购物 APP 为调研对象，同信息无障碍研究会单干做了一个调研。依据收集到的舆情反馈，咱们理解到：

在生产降级的当下，低价商品火遍互联网的每个角落，阻碍群体是其中需要度最大的人群之一。京喜，作为京东旗下的拼购电商平台，与拼多多和淘宝特价版一样，在阻碍人士汇集的论坛和 QQ 中，有十分多的探讨。用户们对京喜没做无障碍表示遗憾，也期待京喜能够尽快发展无障碍优化，享受高价拼购的乐趣。

依据研究会信息无障碍工程师初步检测，目前影响阻碍用户们应用缺点集中在以下几类中：

  1. 按钮未加标签，用户难以理解对应按钮点按别离会触发哪些性能。
  2. 精简状态不提醒或提醒不合乎阻碍用户了解习惯，导致用户无奈理解正确的信息，诸如是否已退出购物车等。
  3. 焦点逻辑凌乱或没有遵循正确的读屏浏览模式，以致用户不能便捷、清晰地理解界面信息，重大影响操作效率。
  4. 流动信息或弹窗等页面，因为应用大量字绘架构且没有集成无障碍个性，用户无奈便捷地参加平台营销流动。

以上几类属于阻碍用户可能无障碍应用的根本撑持，局部或齐全适配后将能促使 APP 实现较好的无障碍体验。

无障碍优化开发

在理解小程序的无障碍优化之前，首先须要理解 Web 无障碍开发的基础知识，及读屏软件的工作形式。

读屏软件

无障碍拜访的关键点 —— 应用屏幕阅读器。

挪动端 APP 拜访无障碍个性，开启读屏模式的设置门路：

  • iOS：设置 -> 通用 -> 辅助性能 -> 旁白（VoiceOver）。
  • 安卓：设置 -> 辅助性能 -> 无障碍 -> TalkBack（不同机型门路可能不一样）

以下是一些次要的 VoiceOver 手势：

  • 轻点：抉择并朗诵我的项目。
  • 轻点两下：激活所选我的项目。
  • 左右轻扫：抉择下一项或上一项。
  • 三个手指向上或向下轻扫：滑动屏幕上的列表或区。
  • 双指搓擦：疾速来回挪动两个手指三次（造成“z”字形）以解除揭示，或者返回上一个屏幕。
  • 更多手势能够查看：VoiceOver – iPhone 使用手册。

安卓的 TalkBack 手势与 VoiceOver 有一些差别，前面还会提到……

WAI-ARIA

WAI-ARIA 通过浏览器把信息裸露给 accessibility APIs (无障碍 API)，作为读屏软件的信息源。

WAI-ARIA (Accessible Rich Internet Applications (WAI-ARIA) 1.1) 是一项技术，它能够通过浏览器和一些辅助技术来帮忙咱们进一步地辨认以及实现语义化，这样一来能帮忙咱们解决问题，也让用户能够理解产生了什么。WAI-ARIA 是 W3C 编写的标准，定义了一组可用于其余元素的 HTML 个性，用于提供额定的语义化以及改善不足的可拜访性。

以下是标准中三个次要的个性：

  • 角色 —— 定义元素是干什么的。如 role='button' 示意元素是按钮，读屏软件会读作“按钮”、role='searchbox' 示意元素用于搜寻，读屏软件会读作 ” 搜寻 ”。
  • 属性 —— 让元素具备更多的意义。如 aria-required='true' 示意元素在表单上是必填的、aria-label='形容文字' 用来给以后元素标签加上形容，用不可视的形式给元素加 label，承受字符串作为参数，读屏软件会将形容文字朗诵进去。
  • 状态 —— 用于表白元素以后条件的非凡属性。如 aria-disabled='true'
    示意表单禁止输出、aria-hidden='true' 示意元素会被读屏软件疏忽。

更多属性能够参考 Using Aria 中的 States and properties，局部属性可能在小程序设置不失效。

更多 role 能够参考 Using Aria 中的 Widget Roles，局部 role 可能在小程序设置不失效。

因而，无障碍优化便能够借助读屏软件，联合 WAI-ARIA 的个性进行开发。互联网利用引入无障碍个性，使得阻碍用户能够清晰精确的获取到页面信息，取得更好的产品体验，不便地实现网上办事、购物等。

京喜小程序首页无障碍优化

背景

此前，京喜小程序未进行无障碍优化，阻碍群体在读屏软件的辅助下，根本不能应用。这使得平台失去了阻碍群体的市场，同时阻碍群体也失去了体验京喜小程序平台服务的机会。因而，心愿对平台进行无障碍优化，晋升平台的可用性、易用性，让阻碍群体享受更好的购物体验。

优化计划

产品提供焦点划分规定、朗诵规定、浏览程序，为京喜小程序首页量身定制无障碍优化计划。外部计划，这里就不走漏了。（想理解的话，来投一波简历啊~）

开发实现

目前小程序官网曾经反对无障碍拜访个性，用户在读屏模式下能够体验无障碍拜访。

开发细则

DOM 程序很重要

读屏软件在读屏时默认依照 DOM 的程序朗诵。
如果 DOM 的程序与内容的语义程序不统一，会使得内容难以了解。例如首页中的商品瀑布流，按左右两列布局：

在开发过程中应尽量避免应用会影响到 DOM 视觉程序的款式，如果无奈防止，须要手动设置 tabIndex 属性，告知读屏软件正确的内容程序。

非文本元素减少形容和角色属性

通过给非文本元素减少形容和角色属性，元素的内容就能够被读屏软件清晰精确地朗诵。

  • 图像可应用 alt 属性形容图像内容，读屏软件会依据 alt 中的内容朗诵出 “形容图像内容 图像”。
  • view 自身是无语义的，能够给元素减少 aria-role 和 aria-label 属性。读屏软件会朗诵出 “label 形容内容 + role 类型”。

整块元素读取

一个元素可能由很多子元素组成。在无障碍模式下，读屏软件只能别离聚焦子元素，独自将每个子元素信息读出来。阻碍用户在读屏软件的辅助下，获取到的都是元素零零碎碎的信息，这样的体验很不敌对。

因而，在无障碍优化过程中，能够将元素当作按钮整块朗诵，将子元素的信息整合作为形容，并尽量精简形容内容，缩短朗诵文案的工夫。

暗藏元素读取

如果不心愿局部内容被读出来，能够应用 aria-hidden=’true’ 来申明，这样读屏时就会疏忽这些元素。

 <Text aria-hidden='true'> 读屏时会疏忽这行文本 </Text>

在无障碍模式下，这个属性可用来暗藏辅助作用不大或是具备烦扰性的内容。

场景实现

非文本元素读取

首页头部中京喜 Logo 和文字是一整张图片。聚焦后，读屏软件默认会读成图像，无奈将图片中的文字朗诵进去。这样的无障碍体验是十分差的。

在这个场景下，可通过给 Logo 图片 减少形容 来进行无障碍优化。

 <View className='index__main'>
    <View className='index__logo' aria-role='text' aria-label='京喜' />
    <View className='index__title'> 京东旗下社交电商平台 </View>
 </View>

相似的还有敞开按钮、返回顶部按钮、菜单栏按钮……

<View
   className='back-top'
   aria-role='button'
   aria-label='返回顶部'
/>

搜寻框读取

首页搜寻框聚焦后，读屏软件默认会将搜寻框中的暗纹读出来。然而阻碍用户并不能显著的感知到搜寻框元素。

在这个场景下，能够通过给搜寻框 减少角色属性 来进行无障碍优化。

<View aria-role='searchbox'>
    <SearchBar />
</View>

轮播图读取

轮播图由多个子元素组成，但点击为整块点击，且每个子元素都是图片，读屏软件无奈让用户清晰感知元素的含意。

在这样的场景下，能够给 每一个子元素标签减少形容，读屏软件就能够辨认到子元素了。

<View className='banner'>
    <Swiper>
        <SwiperItem aria-role='text' aria-label='流动举荐 1'> 流动 1 </SwiperItem>
        <SwiperItem aria-role='text' aria-label='流动举荐 2'> 流动 2 </SwiperItem>
        <SwiperItem aria-role='text' aria-label='流动举荐 3'> 流动 3 </SwiperItem>
        <SwiperItem aria-role='text' aria-label='流动举荐 4'> 流动 4 </SwiperItem>
    </Swiper>
</View>

但这样的无障碍优化在安卓手机上体验并不敌对。

当阻碍用户聚焦到轮播图后，读屏软件将子元素的形容朗诵读来。轮播图持续轮播，焦点索引却不会随轮播状态自动更新，而是追随以后子元素滑动隐没在屏幕中。若要获取更新后的轮播信息，须要从新聚焦。

在这样的场景下，倡议在轮播图的 最外层减少形容，将整块内容当作按钮解决，让阻碍用户分明这是整体点击的按钮。

<View className='banner' aria-role='button' aria-label='流动举荐，共 4 个'>
    <Swiper>
        <SwiperItem> 流动 1 </SwiperItem>
        <SwiperItem> 流动 2 </SwiperItem>
        <SwiperItem> 流动 3 </SwiperItem>
        <SwiperItem> 流动 4 </SwiperItem>
    </Swiper>
</View>

商品卡片读取

商品卡片由多个子元素组成，读屏软件会将聚焦的子元素（商品图、名字、价格、利益点等）一个个的读出来。

但独自读出每个子元素，不便于阻碍用户了解商品卡片的残缺含意。

相似这样的场景，能够将商品卡片当作一个按钮整块解决。在商品卡片最外层标签加上 aria-role='button'，还能够通过 aria-label 标签，将商品信息进行整合，精简形容，缩短商品名字的朗诵工夫，让阻碍用户取得更好的体验。

暗藏元素读取

上文提到商品卡片的无障碍优化可通过 aria-role='button' 和 aria-label 来实现。现实状况下，当阻碍用户聚焦到商品卡片，读屏软件将整合的商品信息朗诵进去，并提醒是按钮类型。

但理论状况并非如此。当阻碍用户在安卓手机上聚焦后，读屏软件不仅会将整合的商品信息和 role 朗诵进去，还会将商品卡片子元素的文本内容朗诵进去。（后文会提到 iOS 的体现）

为了防止商品信息反复朗诵，能够在元素文本标签上加上 aria-hidden='true'，暗藏子元素文本形容，让阻碍用户可能获取到清晰简洁的商品信息。

<View aria-role='button' aria-label='商品整合信息'>
    <View aria-hidden='true'>
        <Image className='goods__img' src='/img/bVbPbr5' lazyLoad />
        <View className='goods__info'> 商品信息…</View>
    </View>
</View>

iOS 和安卓端的差别

滑屏手势差别

安卓：双指滑动，依据手势自适应滑动；

iOS：三指滑动，一屏一屏分页滑动。

轮播图焦点差别

安卓：焦点地位会追随子元素滑动隐没；

iOS：焦点地位固定不变，不会随子元素滑动而隐没。

价格读取差别

因为整数局部和小数局部字体大小不同，价格文本是用多个标签实现的。

<View>
    &yen;
    <Text>259</Text>
    <Text>.2</Text>
</View>

安卓：残缺朗诵“259.2 元”；

iOS：独自朗诵单位、整数、小数，并且会将“￥”读作“美元符号”。

aria-role=’button’ 读取差别

安卓：读作“形容 + 按钮 + 子元素文本形容”，需借助 aria-hidden='true' 暗藏子元素文本形容，防止信息反复朗诵。

iOS：有两种状况。

  • 如果标签同时设置了 aria-label，则读作“形容 按钮”，不反复朗诵子元素文本。
  • 如果标签仅设置了 aria-role='button'，会持续辨认子元素文本，读作“形容 + 按钮 + 子元素文本形容”。为防止反复朗诵，也须要给子元素加上 aria-hidden='true'。

小程序无障碍瞻望

小程序根底库自 2.7.1 起，反对局部 ARIA 标签，然而仍有局部属性和 role 在小程序中不失效，心愿将来能够反对所有的 ARIA 标签，给阻碍用户带来更好的体验。

另外，小程序目前还没有相干 API 反对辨认用户手机是否开启无障碍（读屏）模式（原生 APP 能够通过相干 API 辨认）。如果能预知用户手机开启了无障碍模式，就能够通过动态控制前端模块展现，从而更好的暗藏无用信息、排除烦扰信息（浮层弹窗、动画等）。在启无障碍模式下，设置数据埋点上报，还能够为阻碍用户提供更好的体验。

心愿微信小程序能尽快增强对无障碍优化开发的反对力度，让阻碍群体可能享受信息化所带来的成绩，享受便捷美妙的生存。

无障碍体验

手机开启读屏模式，扫码二维码体验：

结语

京喜小程序首页无障碍优化上线后，咱们对调研的阻碍群体进行了回访，并且失去了不错的体验反馈。

这是咱们在小程序无障碍优化上迈出的第一步，要取得更好的小程序无障碍拜访体验还有很长一段路要走……

心愿此次小程序无障碍优化实际，能让阻碍群体享受互联网利用所带来的便当，更好的享受生存。

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。

退出移动版