VoiceOver（Chrome/Mac）无法读取aria-errormessage关联的错误提示

你的HTML结构已使用aria-invalid和aria-errormessage，但在Chrome+VoiceOver组合下可能需要额外调整才能正确关联并读取错误信息，试试以下修改方案：

调整后的代码示例 #

<label for=":r0:-input">First name</label>
<input 
  id=":r0:-input" 
  type="text" 
  value="" 
  name="firstName" 
  aria-required="true" 
  aria-invalid="true" 
  aria-describedby=":r0:-error"
>
<p 
  id=":r0:-error" 
  class="micro text-feedback-red flex items-center mt-4" 
  role="alert" 
  aria-live="assertive"
>
  This field is required
</p>

关键调整说明 #

• 给输入框添加aria-describedby=":r0:-error"：部分浏览器对aria-errormessage的支持稳定性不如aria-describedby，显式关联错误元素能让屏幕阅读器明确识别输入框对应的错误信息。
• 给错误提示添加aria-live="assertive"：虽然role="alert"隐含该属性，但显式声明能确保Chrome+VoiceOver环境下更可靠地触发即时播报。
• 确保错误触发时输入框获得焦点：当表单校验失败后，主动将焦点移至错误输入框，VoiceOver会自动读取焦点元素的状态及关联的错误内容。

额外测试步骤 #

• 使用VO+U打开元素转子，定位到输入框，查看是否能显示关联的错误信息；
• 触发错误后直接聚焦输入框，验证VoiceOver是否播报“First name, invalid data, This field is required”这类完整提示；
• 确认动态生成的ID（如:r0:-）在页面中唯一，无特殊字符导致的关联失效问题。

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