让视障人群“看得见”! 设计稿生成代码支持无障碍啦！

文/阿里淘系 F(x) Team - 苏川

旧文重发 👉那些年，我们丢失的信息无碍化意识，当时还是手动让页面支持无障碍，现在用 Imgcook 生成代码的同时也能自动生成无障碍代码啦~

设计稿生成代码神器 imgcook

imgcook 能通过设计稿生成视图代码、数据绑定、部分逻辑代码。 imgcook 对外是开放使用的，访问 imgcook.com 即可。

为什么要支持无障碍?

如今互联网高速发展，智能手机人手一部，七八十岁的老爷爷老奶奶都在用腾讯视频、在今日头条上看新闻、用微信聊天刷朋友圈，最有意思的是不用教自己学会了在网上购物，这些互联网产品带给我们的便利视障人群能享受得到吗？在很多人的意识中，他们认为盲人看不见，怎么能上网？

其实，盲人可以在互联网上学习、购物、娱乐、沟通、甚至工作。来看一个 8 分钟的视频→视频链接

视频中的盲人姑娘使用手机大致是这个步骤：

触摸屏幕获取焦点
读屏，向用户返回焦点信息
用户操作，焦点反馈

现在我们经常使用的智能硬件，都能支持这种需求。

苹果系列产品都已内置了 VoiceOver，使用者只需要打开 VoiceOver，就可以通过触摸获取语音提示。
安卓手机内置了 Talkback，功能与 VoiceOver 类似。
windows系统可以下载读屏软件，例如永德、争渡、阳光、NVDA 等. (有什么读屏软件可以推荐？)

有了这些读屏功能的支持，我们站在视障人士的角度来使用手机，看看他们是否真的能很方便的使用→视频链接

在开启 VoiceOver 后，通过触摸反馈来接受信息。但从视频上使用过程来看，满屏都是问题。例如：

焦点合并问题 - 商品、内容、盘点：图片+文字内容是一个整体，但只能分开读取到图像和标题。
内容提示问题 - 热门盘点：聚焦到换一换，但用户不知道这是一个可以点击切换的按钮。
焦点错乱问题 -在点击盘点换一换后，再读取切换后的盘点标题，却还是切换之前的盘点标题。切换这个交互操作导致焦点错乱。

我们可以做什么?

现在我们可以回到主题，作为网站开发者，我们可以做什么？我们要做的，就是在有了这些读屏功能的支持后，能以更好的方式让读屏软件正确的告诉用户这是什么，可以做什么。

更确切的说，就是要解决以上这些问题： • 合理划分焦点 • 元素语义化 • 优化提示内容

对应到代码中也就是几个属性的设置：

<div
    accessible={true}   //合并焦点，合理划分焦点
    aria-label={'这是一个商品'}  // 优化提示内容
    role="link"   // 元素语义化，提示可点击
    onClick={() => {
        window.open('xx');
    }}>
    ...
</div>

<image 
    aria-hidden={true}>  // 让元素失去焦点，不可访问
  ...
</image>

上面视频中美妆学院页面，在添加无障碍属性后，效果是这样的→视频链接

这样的反馈对于盲人来说，是不是好使多了？

最佳实践

这里给出一些我们以往大促活动中的最佳实践。

优化策略

补充缺失的朗读文案 aria-label（活动图片，banner图）
减少不必要的朗读焦点。有两种方式
- 在最外层的 div view cell 上加 accessible={true} 属性，同时增加 aria-label 把内层节点的重要元素都读出来。比如商品标题 + 价格 + '元'
- 把不需要朗读的元素加上 aria-hidden={true} ，屏蔽掉获取朗读焦点。

实践案例

版头

版头上的“大按钮”“双列按钮”的外层节点，增加属性： aria-label="活动链接"

泡泡

去掉无效的“图片”朗读，将焦点聚合，如下：上图中的内容聚合到一个大焦点，并朗读“运动酷玩”。

内层节点的 aria-hidden={true} ，只在最外层 cell 上响应读屏
在最外层的 cell 节点上增加 aria-label="会场标题"

底部栏

安卓端底部导航栏机脚垫过细，应如下图绿框所示整个圈选，并朗读“主会场”。

内层节点的 aria-hidden={true} ，只在最外层cell上响应读屏
在最外层的cell节点上增加 aria-label="主会场"

榜单标签

合并节点，aria-label值直接设置为榜单标题、标签标题

有价券

无券可领的占位图的节点上增加aria-label="活动链接"

Imgcook 自动生成无障碍代码

无障碍属性的自动生成在 DSL 转换时将一些通用实践加入代码生成即可实现。

服务于大促的 Imgcook 内部版本已经支持自动生成无障碍属性，并且应用在双11大促会场模块中。在「可视化」模式开发完成后，进入「源码模式」，先「保存」，再「同步可视化至源码」，即可看到生成的无障碍属性。

使用的自定义 DSL 会根据以下规则自动生成无障碍属性：

1、如果有 onClick 事件，会添加 accessible、role 与 aria-label 属性如下，aria-label 的值由节点内部所有文本拼接。

<View
  onClick={xxx}
	accessible={true} 
  role="link" 
  aria-label={`关注`}>
  ...
</View>

2、如果有 href 属性，会添加 accessible 与 aria-label 如下，aria-label 的值由节点内部所有文本拼接。

<TrackerLink
  style={styles.primary}
  href={state.url}
  accessible={true}
  aria-label={`¥${state.price}券后价${state.originPrice}`}
>
  ...
</TrackerLink>

3、如果是图片，并且图片节点上没有 onClick 事件，会添加 aria-hidden={true}

<Picture
   style={styles.item}
   autoScaling={false}
   autoPixelRatio={true}
   forceUpdate={true}
   source={{ uri: item.itemImg }}
   aria-hidden={true}   // 让图片失去焦点
/>

所以，你只需要在自定义DSL中加入无障碍属性生成逻辑，即可让你的网页都支持信息无障碍了！

自定义 DSL 文档

测试方式

开发完成后在手机上可通过如下方式测试无障碍能力。

iOS

VoiceOver 的开关：「设置」 -> 「通用」 -> 「辅助功能」 -> 「旁白」或者「视觉 - VoiceOver」。
长按 Home 键(需设置)调出 Siri，说「VoiceOver」，Siri 会显示入口。
「设置」 -> 「通用」 -> 「辅助功能」 -> 「辅助功能快捷键」，选择「VoiceOver」。后续连按三次 Home 键则可以快速开启/关闭 VoiceOver。

Android

安卓手机 Talkback 入口各有不同，在「设置」中找到「辅助功能」或者「高级功能」，在子目录中找到「Talkback」或者「无障碍」打开即可。
或者「设置」，搜索 talkback 或无障碍，开启功能即可。

功能开启后，单击功能是选中并朗读元素，左滑右滑 = 切换上下个朗读焦点；快速双击 = 单击，滑动需要双指操作。

无障碍编程指南

扩展阅读

中国互联网视障用户基本情况报告2016年3月pdf
互联网高速发展的今天，盲人的生活有什么样的改变？

淘系前端-F-x-Team 开通微博啦！（微博登录后可见）

除文章外还有更多的团队内容等你解锁🔓