Imgcook 支持无障碍代码生成让视障人群“看得见”_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)
作者 | 苏川

之前写过一篇旧文??那些年，我们丢失的信息无碍化意识（https://juejin.cn/post/6844904127282036749），当时还是手动让页面支持无障碍，现在用 Imgcook 生成代码的同时也能自动生成无障碍代码啦~

为什么要支持无障碍？

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

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

点击查看视频

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

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

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

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

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

点击查看视频

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

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

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

更确切的说，就是要解决以上这些问题：

合理划分焦点元素语义化优化提示内容

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

 div
 accessible={true} //合并焦点，合理划分焦点
 aria-label={'这是一个商品'} // 优化提示内容
 role="link" // 元素语义化，提示可点击
 () = {
 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
 xxx}
 accessible={true} 
 role="link" 
 aria-label={`关注`} 
 /View

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

TrackerLink >

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

Picture >

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

自定义 DSL 文档自定义 DSL：https://www.imgcook.com/docs?slug=dsl-dev官方 DSL：https://www.imgcook.com/docs/official-dsl-pluginDSL 使用指南：https://www.imgcook.com/docs/dsl-use

测试方式

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

iOSVoiceOver 的开关：「设置」 - 「通用」 - 「辅助功能」 - 「旁白」或者「视觉 - 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