Flutter中如何让TextInputField的错误文本支持Talkback/VoiceOver无障碍访问

有原生可直接使用的实现方案，无需引入第三方依赖，具体实现方式如下： #

原生组件适配（推荐） #

Flutter官方提供的带表单校验能力的TextFormField（也就是你提到的TextInputField）本身已经做了无障碍兼容，只需要正确配置参数即可实现错误提示的无障碍识别：

• 配置autovalidateMode参数指定校验触发时机，比如设置为AutovalidateMode.onUserInteraction，仅在用户操作输入框后触发校验
• 在validator回调方法中返回对应的错误提示文本，无需手动给decoration的errorText赋值也能自动生效
• 系统会自动将错误文本和输入框做语义绑定，读屏软件（如VoiceOver、TalkBack）聚焦到输入框时，会自动朗读当前的错误提示内容

示例代码 #

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  decoration: const InputDecoration(
    labelText: '手机号',
  ),
  validator: (value) {
    if (value == null || value.length != 11) {
      return '请输入11位有效手机号';
    }
    return null;
  },
)

自定义错误提示适配 #

如果你没有使用原生的errorText能力，自己实现了独立的错误提示组件，需要手动做语义关联：

• 给输入框设置GlobalKey获取对应的语义节点
• 用Semantics组件包裹自定义错误提示，配置associatedSemanticNodes参数绑定输入框的语义节点即可，读屏软件会自动将两个组件的语义内容做关联识别

注意：不要直接渲染和输入框无语义关联的独立Text组件作为错误提示，这种场景下无障碍工具无法将错误信息和对应输入框绑定，会导致视障用户无法感知到报错信息。

内容的提问来源于stack exchange，提问作者pixelWorld