likes
comments
collection

小程序如何适配无障碍?

作者站长头像
站长
· 阅读数 15

背景

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

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

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

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

小程序官方文档

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

小程序如何适配无障碍?

小程序一开始设计API时,给出了viewtextblock标签,确实让人很容易上手,比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-disabledtrue

按钮的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个专栏里分享:《教你做小游戏》《极致用户体验》