无障碍错误通知

Web 功能： :user-valid 和 :user-invalid

问题

标准 HTML5 验证会提供视觉反馈（通过 :invalid 或 :user-invalid），但不会自动与 aria-invalid 等无障碍属性同步。

如果您使用标准 :invalid 样式，那么当用户通过 Tab 键进入当前为空的必填字段时，屏幕阅读器可能会读出“输入无效”。这会给使用辅助技术的用户带来干扰，因为错误会在用户开始互动之前就被播报出来。

解决方案

我们希望在应用视觉状态 (:user-invalid) 的同一时刻应用程序化状态 (aria-invalid="true")。由于 :user-invalid 依赖于浏览器的内部“用户互动”标志，因此我们可以使用 JavaScript 检查此选择器是否在标准互动事件期间匹配。

如需了解详情，请参阅 MDN aria-invalid。

实施策略

  1. 视觉层：使用 CSS :user-invalid 显示边框/图标。
  2. 无障碍层：使用 aria-invalid 和 aria-errormessage 将状态传达给辅助技术 (AT)。
  3. 桥接视觉和无障碍层：创建一个轻量级 JavaScript 实用程序，用于监听 blur 和 input 事件，检查元素是否与 :user-invalid 匹配，并相应地更新 ARIA 属性。

实现指南

1. HTML 结构

使用 aria-errormessage（或 aria-describedby，以获得更广泛的支持）将输入与其出错提示相关联。

<form>
  <div class="field">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      required 
      aria-errormessage="email-error"
    >
    <span id="email-error" class="error-msg">
      Please enter a valid email address.
    </span>
  </div>
</form>

2. CSS

使用原生伪类 :user-invalid 控制出错提示的可见性。

.error-msg {
  display: none;
  color: #d93025;
}

/* Show error message when input is user-invalid */
input:user-invalid ~ .error-msg {
  display: block;
}

/* Optional: Visual cues on the input itself */
input:user-invalid {
  border-color: #d93025;
}

3. JavaScript

由于没有“UserInvalidChanged”事件，因此请挂接到标准表单事件来检查状态。

const updateAriaState = (event) => {
  const input = event.target;
  if (!input.matches?.('input, textarea, select')) return;

  // Check if the browser currently considers this input "user-invalid"
  const isUserInvalid = input.matches(':user-invalid');
  
  if (isUserInvalid) {
    input.setAttribute('aria-invalid', 'true');
  } else {
    input.removeAttribute('aria-invalid');
  }
};

// Listen on the document to handle dynamically added fields.
// 'blur' and 'focus' do not bubble, so we must use the capture phase (true).
document.addEventListener('blur', updateAriaState, true);
document.addEventListener('focus', updateAriaState, true);

// Also update on input if we've already shown the error, 
// so the error clears immediately when fixed.
document.addEventListener('input', (event) => {
  const input = event.target;
  if (!input.matches?.('input, textarea, select')) return;

  const hasAriaInvalid = input.hasAttribute('aria-invalid');
  const ariaInvalid = input.getAttribute('aria-invalid');
  if (hasAriaInvalid && ariaInvalid === 'true') {
    updateAriaState(event);
  }
});

回退和浏览器支持

功能检测

您可以在 CSS 和 JavaScript 中检查支持情况。

JavaScript 检查：

if (!CSS.supports('selector(:user-invalid)')) {
  // Fallback logic here
}

后备 CSS

为确保您的回退逻辑在视觉上与原生行为无法区分，您必须将错误样式同时应用于伪类和回退类。

/* Apply error styles to both native selector and fallback class */
input:user-invalid,
input.user-invalid-fallback {
  border-color: #d93025;
  background-color: #fce8e6;
}

/* Show error message for both cases */
input:user-invalid ~ .error-msg,
input.user-invalid-fallback ~ .error-msg {
  display: block;
}

后备逻辑

如果缺少 :user-invalid，请使用 WeakMap 手动跟踪互动状态。

const UserInvalidFallback = (() => {
  const dirtyState = new WeakMap();

  const updateState = (input) => {
    const isValid = input.checkValidity();

    // Update both visual and ARIA state
    input.classList.toggle('user-invalid-fallback', !isValid);
    input.classList.toggle('user-valid-fallback', isValid);

    if (!isValid) {
      input.setAttribute('aria-invalid', 'true');
    } else {
      input.removeAttribute('aria-invalid');
    }
  };

  const handleEvent = (event) => {
    const input = event.target;

    if (event.type === 'reset' && input.matches?.('form')) {
      const controls = input.elements || [];
      for (const control of controls) {
        dirtyState.delete(control);
        control.classList.remove('user-invalid-fallback');
        control.classList.remove('user-valid-fallback');
        control.removeAttribute('aria-invalid');
      }
      return;
    }

    if (!input.matches?.('input, textarea, select')) return;

    if (event.type === 'input' || event.type === 'change') {
      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };
      state.hasInteracted = true;
      dirtyState.set(input, state);
      if (state.hasBlurred) {
        updateState(input);
      }
    } else if (event.type === 'blur') {
      const state = dirtyState.get(input) || { hasInteracted: false, hasBlurred: false };
      state.hasBlurred = true;
      dirtyState.set(input, state);
      if (state.hasInteracted) {
        updateState(input);
      }
    }
  };

  const init = () => {
    if (CSS.supports('selector(:user-invalid)')) return;

    document.addEventListener('blur', handleEvent, true); // Capture phase required
    document.addEventListener('input', handleEvent, true);
    document.addEventListener('change', handleEvent, true);
    document.addEventListener('reset', handleEvent, true); // Capture resets
  };

  return { init };
})();

// Initialize globally
UserInvalidFallback.init();

其他注意事项

  1. aria-live 与 aria-errormessage：

    • aria-errormessage 会将输入框与文本关联起来，但屏幕阅读器可能不会在文本出现时立即读出（只有在焦点位于输入框时才会读出）。
    • 如果您需要在错误出现时（例如，在失去焦点时）立即播报，请考虑将 role="alert" 或 aria-live="polite" 添加到出错提示容器中，但要进行全面测试，以避免在用户聚焦到该字段进行修复时出现“重复播报”。

  2. 国际化：

    • 确保出错提示 (#email-error) 的文本内容已翻译。逻辑保持不变。