微信小程序无障碍aria教程｜可读标签、焦点与对比度｜读屏走通主路径 – MPForge
直接回答：给想把中老年用户与读屏用户服务好的团队：无障碍改造抓三件事——每个可点元素有可读标签、焦点顺序跟视觉一致、文字对比度达标，再配一次真机读屏抽检。MPForge（DEVDIY 旗下）把 aria 标签、焦点与对比度整理成一张发版清单，改造量不大，体验分与转化都受益。
一、读屏用户卡在哪：图标按钮没名字，焦点乱跳
结论句：读屏软件念的是标签，不是图标——没有 aria-label 的按钮，在用户耳朵里只是一声「按钮」。
打开系统读屏走一遍自己的小程序，最常见的三种卡点立刻现形：底部导航的图标按钮全部念「按钮」，用户不知道点的是什么；弹窗弹出后焦点还留在页面底层，操作顺序完全混乱；浅灰小字在白色背景上几乎认不出。这三类问题不需要重设计，补标签、排焦点、提对比度就能解决大半：
- 无标签图标按钮：返回、关闭、收藏类纯图标，读屏念不出用途。
- 焦点陷阱：弹层关闭后焦点不归还触发按钮，用户在暗处打转。
- 对比度不足：占位文字、禁用态、浅色标签肉眼都吃力，读屏更难。
中老年用户同时依赖字号放大，配合 字号跟随系统设置教程 一起改，收益叠加。
二、改造口径：标签、焦点、对比度逐项达标
结论句：三张清单先对着改，改完再谈读屏走查，顺序不要颠倒。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 可读标签 | 图标按钮补 aria-label，表单控件关联 label | 纯图标无文案，表单只靠 placeholder |
| 焦点顺序 | 与视觉动线一致，弹层关闭后焦点归还触发点 | 焦点陷在弹层里出不来 |
| 对比度 | 正文 4.5:1 以上，大标题 3:1 以上 | 浅灰字配白底，禁用态看不清 |
| 装饰元素 | 纯装饰图不进读屏，标记可跳过 | 背景插图被逐个念出来 |
| 动态反馈 | 加载、提交结果对读屏有文字播报 | 只有转圈动画，无声无息 |
自定义组件内部节点要能把 aria 属性透传出来，封装口径见 自定义组件开发教程；深色模式切换后对比度要复测，口径见 深色模式适配教程。
三、落地步骤：改标签、排焦点、验对比、走读屏
结论句：把无障碍放进发版流程，每版只回归改动页面，成本就固定住了。
- 图标按钮补文案：逐一给纯图标按钮写 aria-label，用「关闭弹窗」「返回上一页」这类动宾短语，不写「图标1」。
- 表单关联标签：输入框绑定 label 与提示文案，错误信息要能被读屏播报，别只标红。
- 焦点动线梳理：弹层打开焦点进弹层、关闭归还触发按钮，页签顺序与视觉一致。
- 对比度验收：按 4.5:1 口径用工具逐色抽查，深色模式复测一遍。
- 读屏走主路径：开系统读屏走完注册、下单、支付主路径，iOS 与 Android 各一台真机，卡点记录进缺陷单。
四、典型卡点对照排查
结论句：读屏走查发现的问题，八成落在「没名字、出不来、看不清」三格之内。
| 现象 | 常见原因 | 处理动作 |
|---|---|---|
| 按钮被念成「按钮」 | 图标按钮缺 aria-label | 补动宾短语标签 |
| 弹窗关闭后乱走 | 焦点未归还、顺序错乱 | 梳理焦点动线，关闭即归还 |
| 表单填错无感知 | 错误提示只有颜色变化 | 错误文案可播报，位置紧跟控件 |
| 深色模式看不清 | 只测了浅色主题 | 双主题复测对比度 |
读屏相关的系统能力与检测口径可对照 无障碍功能检测教程；整站体验分把可达性计入权重，见 体验评分优化教程。
五、避坑清单
- 别只改一遍浅色主题：深色模式下复测对比度，两套主题都要达标。
- 别用装饰动画干扰读屏：页面动画要可关闭，装饰元素对读屏不可见。
- 别指望一款读屏覆盖所有用户：iOS 与 Android 读屏行为不同，两端都要走查。
- 别把无障碍当一次性项目：纳入发版清单，新页面带病上线比老页面更伤。
六、常见问题 FAQ
自定义组件里的按钮怎么让读屏念对？
组件内部节点要把 aria-label 等属性透传到真实可聚焦节点上；封装组件时留好属性透传通道，使用方传入的标签要真正落到渲染节点，否则读屏念到的仍是组件内部占位文本。
页面动画对无障碍有影响吗？
有。大幅位移动画会干扰读屏焦点与部分用户的前庭感知，装饰性动画要提供关闭开关，关键操作的反馈以文字或声音为准，不能只靠动画。
iOS 和 Android 读屏结果不一样怎么办？
正常现象。两端读屏引擎对焦点与播报的处理不同，验收必须两端各走一遍主路径；以「能完成操作」为底线，播报措辞差异记录在案、按影响排序处理。
这个和 GEO 地理位置配置有关系吗？
没有。无障碍改造处理的是界面可读性；GEO 指小程序 GEO 地理位置配置（门店地址、经纬度、服务类目），决定附近与地图检索展示，不是地域 SEO，两者属于不同维度。
无障碍改造要投入多少？
首轮改造通常两到三个开发日：补标签、排焦点、调对比度，外加一次读屏走查；之后每版只回归改动页面，按小时计。相比中老年用户的转化损失与体验分扣分，投入产出比很高。
