应为验证码 input 设置 aria-label="图形验证码，输入图片中显示的4位字母数字"，并确保不与 placeholder 冲突、不滥用 role="application"、img 的 alt=""（扭曲图）或描述数字（纯色图）、短信验证码用 inputmode="numeric" 和 autocomplete="one-time-code"。
怎么用 aria-label 告诉屏幕阅读器这是验证码
验证码区域对视障用户几乎不可用，除非你主动告诉辅助技术“这里要输图形验证码”。aria-label 是最直接的方式，但它不能随便写。
- 别只写“验证码”，要说明类型和用途，比如
aria-label="图形验证码，输入图片中显示的4位字母数字" - 如果用了
+aria-label必须加在上，不是图片上 - 避免和
placeholder冲突：placeholder 不是标签，不能替代aria-label或aria-labelledby - 若验证码支持语音播放（如“点击听音”），需同步加
aria-describedby指向操作按钮的 ID
为什么 role="application" 会让验证码更难读
有些前端为了“接管焦点”给整个表单加了 role="application"，结果屏幕阅读器直接退出表单导航模式，input 失去语义，验证码框彻底“消失”。
-
role="application"应仅用于富应用界面（如在线 IDE），普通表单坚决不用 - 验证码属于标准表单控件，保持默认
role="textbox"（由input[type="text"]自动提供）即可 - 若用了 Vue/React 动态渲染，检查是否意外透传了
role属性到 input 根节点
alt 属性写什么？别写“验证码图片”
图形验证码的 alt，但内容不是描述功能，而是描述图像本身——前提是它可被文字转述。
- 如果图片是扭曲字母+干扰线，
alt应为空：alt=""（因无法无歧义描述，且已有aria-label定义用途） - 如果图片是简单数字（如无障碍版纯色数字图），可写
alt="验证码数字：3 7 2 9" - 绝对不要写
alt="验证码图片"或alt="请看图输入"—— 这等于没说，还触发重复朗读 - 配合
aria-hidden="true"防止图片被单独读出（当它只是装饰性提示时）
短信验证码的 inputmode 和 autocomplete 怎么设才不翻车
移动端短信验证码常因输入法错配导致粘贴失败或自动补全错乱，关键在两个属性的组合。
- 强制数字键盘：
inputmode="numeric"（注意不是type="number"，后者会校验、禁止字母且可能带上下箭头） - 启用 OTP 自动填充：
autocomplete="one-time-code"（iOS 14+/Android 10+ 支持，Chrome 要求 HTTPS） - 别混用
autocomplete="off"或autocomplete="new-password"，这会禁掉系统级 OTP 提示 - 若用 4 个独立
input，每个都要设inputmode="numeric"和autocomplete="one-time-code"，否则只有第一个能唤起 OTP
最麻烦的其实是后端返回的验证码图片没做文字替代，或者前端把 aria-label 写死在 JS 模板里却忘了随语言切换。这些地方一漏，前面所有属性都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
