关于输入框altText/alt与图片alt读值差异及AODA适配问题咨询

首先明确：原生HTML里，文本输入框（<input type="text">）根本没有alt或altText属性，这和<img>的alt是W3C标准原生属性完全不同。

你的阅读器能读取<img>的alt，是因为alt是图片的必填无障碍属性，所有符合标准的辅助技术都会优先识别它。

而你用的<Input>组件的altText是自定义属性，浏览器和辅助阅读器不会把它当成标准无障碍标签处理——组件库如果没做特殊映射，这个属性只会留在组件层面，不会转换成原生无障碍属性输出到DOM里。

对于文本输入框，正确的无障碍标签方式是以下三种：

• 用<label for="输入框ID">标签文本</label>关联输入框，这是最推荐的方式
• 给输入框加aria-label="标签文本"属性，直接提供可读标签
• 如果页面上已有对应说明文本，用aria-labelledby="对应文本元素ID"关联

举个正确的实现例子：

<!-- 方式1：关联label标签 -->
<label for="user-email">邮箱地址</label>
<input type="text" id="user-email" />

<!-- 方式2：使用aria-label -->
<input type="text" aria-label="邮箱地址" />

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