你有没有想过这样一个问题：视障人士怎么用小程序？他们看不见屏幕，怎么点外卖、查公交、扫码点餐？

事实上，智能手机的读屏功能（iOS的“旁白”、Android的“TalkBack”）一直在帮助视障用户使用各类应用。但如果开发者没有做无障碍适配，读屏软件读到的小程序可能就是一堆“按钮”“图片”“未知”，完全无法理解每个元素的意义。

今天聊聊小程序的无障碍开发——这不仅关乎社会责任，也正在成为一项法规要求。

为什么现在要重视无障碍

2025年3月28日，国家标准GB/T 45395-2025《信息技术 小程序应用无障碍技术要求》正式发布并实施-6。这项标准由浙江大学、中国残疾人联合会信息中心、中国电子技术标准化研究院等单位联合起草，规定了小程序在无障碍访问上的技术要求。

标准分为两个等级：基本级和附加级。基本级涵盖19项要求，确保用户能访问小程序的主要信息和主要功能；附加级增加了16项强化要求，提供更便利的访问体验。

简单说：从2025年起，小程序做无障碍适配不再是“可选项”，而是符合国家标准的“必选项”。

小程序无障碍的核心技术：ARIA属性

小程序使用的是WXML语法（微信）或AXML语法（支付宝），不像HTML那样有语义化标签（如h1、article、header）。这意味着小程序原生组件对视障用户来说缺乏语义信息-1。

解决方案是使用ARIA属性（Accessible Rich Internet Applications）。这些属性告诉读屏软件：这个元素是什么、有什么状态、该怎么读-1。

核心属性一览

role属性：定义组件的语义角色。

<!-- 告诉读屏软件：这是一个按钮 --><view role="button" onTap="handleTap">提交</view><!-- 告诉读屏软件：这是一张图片 --><image src="{{imgUrl}}" role="img" aria-label="风景照片" />

当读屏软件聚焦到带有role="button"的元素时，会朗读出“按钮”-1。

aria-label属性：为元素提供文字描述，替代内部文本内容。

<!-- 只有图标，没有文字，视障用户不知道这是什么 --><view class="close-icon" role="button" aria-label="关闭"></view>

设置了aria-label="关闭"后，读屏软件会朗读“关闭 按钮”，用户就知道这个图标的作用了-1。

aria-labelledby属性：关联另一个元素的内容。

<label>
  <checkbox aria-labelledby="content" />
  <text id="content">我已阅读并同意用户协议</text></label>

复选框获得焦点时，读屏软件会一起朗读关联的文本内容-1。

aria-checked属性：表示复选框或开关的选中状态。

对于自定义的复选框组件，需要手动设置这个属性：

<view 
  role="checkbox" 
  aria-checked="{{checked}}"
  aria-labelledby="checkboxText">
  <icon type="{{checked ? 'success' : 'circle'}}" />
  <text id="checkboxText">同意协议</text></view>

读屏软件会朗读出“已选中”或“未选中”-1。

aria-expanded属性：表示折叠面板的展开/收起状态，适用于下拉菜单、折叠面板等场景-1。

支持ARIA属性的组件

微信和支付宝的以下基础组件支持ARIA属性：view、text、icon、button、label、checkbox、switch、image-1。

适老化设计：不只是为残障人士

无障碍的英文是Accessibility，它服务的对象不仅是残疾人，还包括老年人和各种临时性障碍场景（比如在强光下看不清屏幕）-1。

老年人的核心需求是：字要大。

微信小程序提供了字体大小适配机制。用户可以在微信中调整字体大小（iOS有7个档位，Android有8个档位），小程序应该响应这些设置-7。

获取用户字体大小设置：

const appBaseInfo = wx.getAppBaseInfo()console.log('用户字体大小:', appBaseInfo.fontSizeSetting)console.log('字体缩放倍率:', appBaseInfo.fontSizeScaleFactor)

微信推荐使用wx.getAppBaseInfo接口获取字体信息，后续wx.getSystemInfo将不再维护-7。

适老化界面设计的基础规则包括-7：

• 元素跟随文字档位倍率放大而放大

• 文字达到极值后折行，保持居左对齐

• 文字信息尽量完整展示，不截断

• 交互元素周围添加足够的热区（至少44pt×44pt）

微信还提供了适老化自动适配工具，可以一键转换部分样式，但开发者仍需要进行测试和手动调整-7。

开发与调试工具

微信开发者工具提供了无障碍访问模式插件，可以在模拟器中调试无障碍功能-2。

安装方法：菜单栏 → 设置 → 通用设置 → 扩展 → 其他插件 → 添加“无障碍访问模式插件”-2。

安装后，模拟器右下角会出现调试面板，可以查看每个组件的读屏内容，方便验证ARIA属性是否生效。

实操：从0到1做无障碍适配

如果你的小程序之前完全没有考虑无障碍，建议按以下优先级逐步推进。

第一优先级：给所有可交互元素添加role属性

按钮用role="button"，图片用role="img"并配aria-label，复选框用role="checkbox"。

第二优先级：给纯图标按钮添加aria-label

那些只有图标没有文字的按钮，是视障用户最大的障碍。逐一检查并添加描述。

第三优先级：适配字体缩放

确保页面布局在字体放大后不会乱掉，文字不被截断。

第四优先级：自定义组件的状态同步

如果自己封装了复选框、开关、折叠面板等组件，确保通过aria-checked或aria-expanded将状态告知读屏软件。

怎样才算合格

根据国家标准，满足以下19项基本级指标，算作达到基本级：

• 控件可被聚焦和操作

• 文本输入框可读

• 非文本内容有替代说明

• 不依赖颜色传达信息

• 避免快速闪烁导致癫痫风险

• 焦点不会陷入无法退出

• 页面有标题

• 导航可理解

• 新窗口打开前有提示

• 验证码提供替代形式

• 响应时间可感知

• 身份认证可操作

测试方法很简单：开启手机的旁白或TalkBack模式，完全闭上眼睛，尝试走一遍小程序的核心流程。如果能顺利完成，你的适配就成功了。

一点思考

无障碍开发的本质，是把隐式的信息变成显式的语义。让一个只有图标的按钮被“说出来”，让一个自定义复选框的状态被“读出来”。

这种开发思维方式，不仅对视障用户友好，也让小程序的信息架构更清晰。从这个角度看，无障碍适配是对代码质量的一次整体提升，而不是额外的负担。

延伸阅读：成都小程序开发、行业新闻、不要把所有成都营销型网站建设当作你的…