你有没有想过这样一个问题：视障人士怎么用小程序？他们看不见屏幕，怎么点外卖、查公交、扫码点餐？
事实上，智能手机的读屏功能（iOS的“旁白”、Android的“TalkBack”）一直在帮助视障用户使用各类应用。但如果开发者没有做无障碍适配，读屏软件读到的小程序可能就是一堆“按钮”“图片”“未知”，完全无法理解每个元素的意义。
今天聊聊小程序的无障碍开发——这不仅关乎社会责任，也正在成为一项法规要求。
2025年3月28日，国家标准GB/T 45395-2025《信息技术 小程序应用无障碍技术要求》正式发布并实施-6。这项标准由浙江大学、中国残疾人联合会信息中心、中国电子技术标准化研究院等单位联合起草，规定了小程序在无障碍访问上的技术要求。
标准分为两个等级：基本级和附加级。基本级涵盖19项要求，确保用户能访问小程序的主要信息和主要功能；附加级增加了16项强化要求，提供更便利的访问体验。
简单说：从2025年起，小程序做无障碍适配不再是“可选项”，而是符合国家标准的“必选项”。
小程序使用的是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属性：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属性是否生效。
如果你的小程序之前完全没有考虑无障碍，建议按以下优先级逐步推进。
第一优先级：给所有可交互元素添加role属性
按钮用role="button"，图片用role="img"并配aria-label，复选框用role="checkbox"。
第二优先级：给纯图标按钮添加aria-label
那些只有图标没有文字的按钮，是视障用户最大的障碍。逐一检查并添加描述。
第三优先级：适配字体缩放
确保页面布局在字体放大后不会乱掉，文字不被截断。
第四优先级：自定义组件的状态同步
如果自己封装了复选框、开关、折叠面板等组件，确保通过aria-checked或aria-expanded将状态告知读屏软件。
根据国家标准，满足以下19项基本级指标，算作达到基本级：
控件可被聚焦和操作
文本输入框可读
非文本内容有替代说明
不依赖颜色传达信息
避免快速闪烁导致癫痫风险
焦点不会陷入无法退出
页面有标题
导航可理解
新窗口打开前有提示
验证码提供替代形式
响应时间可感知
身份认证可操作
测试方法很简单：开启手机的旁白或TalkBack模式，完全闭上眼睛，尝试走一遍小程序的核心流程。如果能顺利完成，你的适配就成功了。
无障碍开发的本质，是把隐式的信息变成显式的语义。让一个只有图标的按钮被“说出来”，让一个自定义复选框的状态被“读出来”。
这种开发思维方式，不仅对视障用户友好，也让小程序的信息架构更清晰。从这个角度看，无障碍适配是对代码质量的一次整体提升，而不是额外的负担。
