作者 | 苏川
之前写过一篇旧文👉那些年，我们丢失的信息无碍化意识，当时还是手动让页面支持无障碍，现在用 Imgcook 生成代码的同时也能自动生成无障碍代码啦~
为什么要支持无障碍？
如今互联网高速发展，智能手机人手一部，七八十岁的老爷爷老奶奶都在用腾讯视频、在今日头条上看新闻、用微信聊天刷朋友圈，最有意思的是不用教自己学会了在网上购物，这些互联网产品带给我们的便利视障人群能享受得到吗？在很多人的意识中，他们认为盲人看不见，怎么能上网？
其实，盲人可以在互联网上学习、购物、娱乐、沟通、甚至工作。来看一个 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}，屏蔽掉获取朗读焦点。
- 在最外层的
实践案例
1、 版头：版头上的“大按钮”“双列按钮”的外层节点，增加属性：aria-label="活动链接"
2、泡泡：去掉无效的“图片”朗读，将焦点聚合，如下：上图中的内容聚合到一个大焦点，并朗读“运动酷玩”。
- 内层节点的 aria-hidden={true} ，只在最外层 cell 上响应读屏
- 在最外层的 cell 节点上增加 aria-label="会场标题"
3、底部栏：安卓端底部导航栏机脚垫过细，应如下图绿框所示整个圈选，并朗读“主会场”。
- 内层节点的 aria-hidden={true} ，只在最外层cell上响应读屏
- 在最外层的cell节点上增加 aria-label="主会场"
4、榜单标签：合并节点，aria-label值直接设置为榜单标题、标签标题
5、有价券：无券可领的占位图的节点上增加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 文档
- 自定义 DSL：https://www.imgcook.com/docs?slug=dsl-dev
- 官方 DSL：https://www.imgcook.com/docs/official-dsl-plugin
- DSL 使用指南：https://www.imgcook.com/docs/dsl-use
测试方式
开发完成后在手机上可通过如下方式测试无障碍能力。
iOS
- VoiceOver 的开关：「设置」 -> 「通用」 -> 「辅助功能」 -> 「旁白」或者「视觉 - VoiceOver」 。
- 长按 Home 键(需设置)调出 Siri，说 「VoiceOver」，Siri 会显示入口。
- 「设置」 -> 「通用」 -> 「辅助功能」 -> 「辅助功能快捷键」，选择「VoiceOver」。后续连按三次 Home 键则可以快速开启/关闭 VoiceOver。
Android
- 安卓手机 Talkback 入口各有不同，在「设置」中找到 「辅助功能」或者 「高级功能」，在子目录中找到「Talkback」或者 「无障碍」打开即可。
- 或者「设置」，搜索 talkback 或 无障碍，开启功能即可。
功能开启后，单击功能是选中并朗读元素，左滑右滑 = 切换上下个朗读焦点；快速双击 = 单击，滑动需要双指操作。
无障碍编程指南
iOS：iOS无障碍编程指南
Android：《Android无障碍开发指南》
Web：Web内容无障碍指南 (WCAG)、WAI-ARIA 无障碍Web规范
- ReactNative: ReactNative无障碍功能
扩展阅读
中国互联网视障用户基本情况报告2016年3月pdf
互联网高速发展的今天，盲人的生活有什么样的改变？
