Imgcook 支持无障碍代码生成让视障人群“看得见”
之前写过一篇旧文👉那些年，我们丢失的信息无碍化意识（https://juejin.cn/post/6844904127282036749），当时还是手动让页面支持无障碍，现在用 Imgcook 生成代码的同时也能自动生成无障碍代码啦~
如今互联网高速发展，智能手机人手一部，七八十岁的老爷爷老奶奶都在用腾讯视频、在今日头条上看新闻、用微信聊天刷朋友圈，最有意思的是不用教自己学会了在网上购物，这些互联网产品带给我们的便利视障人群能享受得到吗？在很多人的意识中，他们认为盲人看不见，怎么能上网？
其实，盲人可以在互联网上学习、购物、娱乐、沟通、甚至工作。来看一个 8 分钟的视频。
视频中的盲人姑娘使用手机大致是这个步骤：
• 触摸屏幕获取焦点
• 读屏，向用户返回焦点信息
• 用户操作，焦点反馈
现在我们经常使用的智能硬件，都能支持这种需求。
• 苹果系列产品都已内置了 VoiceOver，使用者只需要打开 VoiceOver，就可以通过触摸获取语音提示。
• 安卓手机内置了 Talkback，功能与 VoiceOver 类似。
• windows系统可以下载读屏软件，例如永德、争渡、阳光、NVDA 等. (有什么读屏软件可以推荐？)
有了这些读屏功能的支持，我们站在视障人士的角度来使用手机，看看他们是否真的能很方便的使用。
在开启 VoiceOver 后，通过触摸反馈来接受信息。但从视频上使用过程来看，满屏都是问题。例如：
焦点合并问题：商品、内容、盘点：图片+文字内容 是一个整体，但只能分开读取到图像和标题。
内容提示问题：热门盘点，聚焦到 换一换，但用户不知道这是一个可以点击切换的按钮。
焦点错乱问题：在点击盘点换一换后，再读取切换后的盘点标题，却还是切换之前的盘点标题。切换这个交互操作导致焦点错乱。
现在我们可以回到主题，作为网站开发者，我们可以做什么？我们要做的，就是在有了这些读屏功能的支持后，能以更好的方式让读屏软件正确的告诉用户这是什么，可以做什么。
更确切的说，就是要解决以上这些问题：
• 合理划分焦点
• 元素语义化
• 优化提示内容
对应到代码中也就是几个属性的设置：
<divaccessible={true} //合并焦点，合理划分焦点aria-label={'这是一个商品'} // 优化提示内容role="link" // 元素语义化，提示可点击onClick={() => {window.open('xx');}}>...</div><imagearia-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="活动链接"
无障碍属性的自动生成在 DSL 转换时将一些通用实践加入代码生成即可实现。
服务于大促的 Imgcook 内部版本已经支持自动生成无障碍属性，并且应用在双11大促会场模块中。在「可视化」模式开发完成后，进入「源码模式」，先「保存」，再「同步可视化至源码」，即可看到生成的无障碍属性。
这里使用的自定义 DSL 会根据以下规则自动生成无障碍属性：
1、如果有 onClick 事件，会添加 accessible、role 与 aria-label 属性如下，aria-label 的值由节点内部所有文本拼接。
<ViewonClick={xxx}accessible={true}role="link"aria-label={`关注`}>...</View>
2、如果有 href 属性，会添加 accessible 与 aria-label 如下，aria-label 的值由节点内部所有文本拼接。
<TrackerLinkstyle={styles.primary}href={state.url}accessible={true}aria-label={`¥${state.price}券后价${state.originPrice}`}>...</TrackerLink>
3、如果是图片，并且图片节点上没有 onClick 事件，会添加 aria-hidden={true}
<Picturestyle={styles.item}autoScaling={false}autoPixelRatio={true}forceUpdate={true}source={{ uri: item.itemImg }}aria-hidden={true} // 让图片失去焦点/>
所以，你只需要在自定义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无障碍编程指南
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html
Android：《Android无障碍开发指南》
https://developer.android.com/guide/topics/ui/accessibility?hl=zh-cn
Web：Web内容无障碍指南 (WCAG)、WAI-ARIA 无障碍Web规范
https://www.w3.org/Translations/WCAG20-zh/
https://www.w3cplus.com/wai-aria/wai-aria.html
ReactNative: ReactNative无障碍功能
https://reactnative.cn/docs/0.51/accessibility
中国互联网视障用户基本情况报告2016年3月pdf
http://www.siaa.org.cn/static/image/img_media/%E4%B8%AD%E5%9B%BD%E4%BA%92%E8%81%94%E7%BD%91%E8%A7%86%E9%9A%9C%E7%94%A8%E6%88%B7%E5%9F%BA%E6%9C%AC%E6%83%85%E5%86%B5%E6%8A%A5%E5%91%8A.pdf
互联网高速发展的今天，盲人的生活有什么样的改变？
https://www.zhihu.com/question/32288332
关注「Alibaba F2E」微信公众号（左）微信视频号（右）
把握阿里巴巴前端新动向