OpenHarmony验证码如何做无障碍

在 OpenHarmony（鸿蒙原子化/ArkUI 应用）里做验证码的无障碍（Accessibility），核心目标是：
让视障用户（屏幕朗读/TalkBack、OpenHarmony 的“无障碍语音”）能知道验证码是什么、在哪里、是否需要输入、是否错误。

下面按场景说明做法（以 ArkTS + ArkUI 为主）。

一、文本/数字验证码（最常见）

1️⃣ 给验证码整体加无障碍说明

Text(this.code)
  .fontSize(24)
  .accessibilityText('验证码：' + this.code)
  .accessibilityDescription('当前显示的验证码内容')

✅ 效果：
视障用户聚焦时，会朗读：“验证码：8 3 2 9”

2️⃣ 每个字符单独朗读（推荐）

Row() {
  ForEach(this.code.split(''), (ch: string) => {
    Text(ch)
      .fontSize(28)
      .accessibilityText(ch)
  })
}

这样比整体读更清晰，尤其字母+数字混合时。

二、输入框验证码（4/6 位）

1️⃣ 输入框无障碍

TextInput({ placeholder: '请输入验证码' })
  .maxLength(6)
  .inputType(InputType.Number)
  .accessibilityText('验证码输入框')
  .accessibilityDescription('请输入收到的6位验证码')

2️⃣ 自动读取短信（无障碍友好）

OpenHarmony 支持 短信验证码自动填充（系统能力）：

• 使用 TextInput + inputType(NumberPassword | Number)
• 系统会自动提示“填入验证码”

✅ 对无障碍用户极友好

三、图形验证码（必须做替代方案）

❌ 错误做法

只放一张图，不提供文字说明。

✅ 正确做法

1. 提供语音/文字验证码
2. 或提供“无障碍专用验证码”

Image($r('app.media.captcha'))
  .accessibilityText('图形验证码，内容为：AB12')

或：

Button('听验证码')
  .onClick(() => {
    // 调用 TTS 朗读验证码
  })

四、倒计时 & 重新获取

Button(this.count > 0 ? `${this.count}s后重发` : '获取验证码')
  .accessibilityText(this.count > 0 ? `请在${this.count}秒后重新获取验证码` : '获取验证码')

五、错误提示（非常重要）

if (this.error) {
  Text('验证码错误')
    .fontColor(Color.Red)
    .accessibilityText('验证码错误，请重新输入')
}

✅ 不要让错误只靠颜色区分

六、语音验证码（推荐增强）

OpenHarmony 可通过：

• TtsClient（文本转语音）
• 或自定义音频

tts.speak('您的验证码是 ' + this.code)

七、无障碍检查清单 ✅

• [ ] 验证码可朗读
• [ ] 不依赖颜色
• [ ] 输入框有说明
• [ ] 图形验证码有替代方案
• [ ] 错误有明确语音/文字提示
• [ ] 支持自动填充

如果你用的是 OpenHarmony 3.x / 4.x / 5.x 或 ArkUI-X / 元服务，我可以给你对应版本的完整示例代码。