iOS VoiceOver宣布invalid data时打断表单错误提示的问题排查

问题根源 #

这是VoiceOver处理aria-invalid与aria-describedby的时序冲突问题：当输入框被设置为aria-invalid="true"并同时获得焦点时，VoiceOver会优先触发内置的"invalid data"提示，打断错误描述文本的朗读，导致内容截断。

修复步骤及代码示例 #

1. 调整错误提示的隐藏方式 #

避免使用display:none隐藏错误提示（屏幕阅读器无法感知该状态的元素），改用视觉隐藏但可访问的样式，确保屏幕阅读器始终能检测到元素存在。

2. 配置aria-live并动态绑定aria-describedby #

给错误提示添加aria-live="polite"，让屏幕阅读器等待当前朗读完成后再读取更新内容；同时仅在验证失败时，才给输入框绑定aria-describedby，避免初始状态的无效关联。

3. 优化验证函数的执行顺序 #

先更新错误提示的可见性，再设置aria-invalid，最后聚焦输入框，给VoiceOver足够的时间处理内容更新。

修改后的完整代码：

HTML

<form onsubmit="validate(event)">
  <label for="full-name">
    <p>Full name</p>
    <input type="text" id="full-name" required>
    <em id="full-name-error" class="visually-hidden" aria-live="polite">Enter your full name</em>
  </label>
  <button type="submit">Submit</button>
</form>

CSS

/* 视觉隐藏但保持可访问的样式 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.has-error .visually-hidden {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: #dc3545; /* 可选：设置错误文本颜色 */
}

JavaScript

function validate(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const $label = document.querySelector('label');
  const $input = document.getElementById('full-name');
  const $error = document.getElementById('full-name-error');

  if (!$input.value.trim()) {
    $label.classList.add('has-error');
    $input.setAttribute('aria-invalid', 'true');
    // 仅在验证失败时绑定错误描述
    $input.setAttribute('aria-describedby', 'full-name-error');
    // 微小延迟后聚焦，让VoiceOver先处理错误提示
    setTimeout(() => {
      $input.focus();
    }, 100);
  } else {
    // 验证通过时重置表单状态
    $label.classList.remove('has-error');
    $input.setAttribute('aria-invalid', 'false');
    $input.removeAttribute('aria-describedby');
  }
}

关键修改说明 #

• 视觉隐藏样式：替代display:none，确保错误提示元素始终在DOM中可被屏幕阅读器检测，动态显示时能触发aria-live的内容更新。
• aria-live="polite"：让屏幕阅读器等待当前朗读队列完成后，再读取错误提示，避免被aria-invalid的内置提示打断。
• 动态绑定aria-describedby：初始状态下不关联错误提示，仅在验证失败时绑定，避免屏幕阅读器尝试读取未显示的内容。
• 延迟聚焦：给VoiceOver留出处理内容更新的时间，确保错误提示先被读取，再触发焦点和aria-invalid提示。

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