背景

之前公司要求我们所有网页必须实现无障碍适配，有幸接触了下「无障碍适配」。

之前文章介绍了《什么是无障碍适配？》，推荐大家先读一下。

我还写了文章《Web如何适配无障碍？》，讲了在web开发适配的方案。

今天我给大家介绍，小程序如何实现无障碍适配。

小程序官方文档

参考小程序官方文档无障碍访问。如下所示：

小程序一开始设计API时，给出了view、text、block标签，确实让人很容易上手，比html的各种button a div p span footer 学习成本低。但代价就是：屏幕阅读器无法识别到一个标签的作用了。

所以，在小程序中，如果不是纯文本展示，尽量要用aria-role标签，表明该标签的作用。

注意aria-role是小程序特有的标签，在html中，只有role没有aria-role。

与web的共同点

小程序的无障碍适配，与上篇文章《Web如何适配无障碍？》有一些共同点，如下：

1. 如果不加ARIA标签，读屏软件已经可以正确识别，那么不要加ARIA标签。减少代码侵入性。
2. 如果是无用元素（如不影响业务流程的logo、图片），给结点设置aria-hidden="true"，但是image结点无效，需要给image的父结点设置aria-hidden="true"。
3. 如果是可触发bindtap事件的元素，需要设置aria-role="button"，读屏软件识别后播报“按钮，xx，单指双击即可执行”。
4. 针对密集的文字内容，需要打包阅读。
5. 打包阅读的内容，如果包含链接，需要额外处理。

关于弹窗

打开弹窗时，弹窗下的所有元素都不应该被激活（通过左右滑动手势，不应该选中弹窗底部元素）。

具体方案：用一个变量(如showDialog)标记弹窗状态，给弹窗下所有元素（或者他们的父节点）设置aria-hidden="{{showDialog}}"。

此外，弹窗应该设置aria-role="dialog"和aria-modal="true"。

按钮的禁用状态

按钮状态如果变为disabled，针对这些结点，需要有变量记录状态，并设置aria-disabled为true。

按钮的wxml写法

不要这么做：

<view aria-role="button" bindtap="onTap"><text>确认</text></view>

因为读屏软件会这样阅读：“确认，按钮，确认，单指双击即可执行”。

应该改成这样：

<view aria-role="button" bindtap="onTap">确认</view>

读屏软件会这样阅读：“按钮，确认，单指双击即可执行”。

其实就是要阅读的元素，不要嵌套了。如果一定要嵌套，要把子元素设置aria-hidden="true"，避免被重复阅读。

焦点管理

小程序没有API可以让我们管理焦点，这里只能接受现状了。

写在最后

我感到十分荣幸，能在互联网时代，为“障碍群体”开发无障碍的Web应用，让他们也能跟上时代潮流。

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。