Озвучивание ошибок

Веб-функции: :user-valid и :user-invalid

Проблема

Стандартная проверка HTML5 предоставляет визуальную обратную связь (через :invalid или :user-invalid), но не синхронизируется автоматически с атрибутами специальных возможностей, такими как aria-invalid.

Если вы используете стандартный стиль :invalid, программы чтения с экрана могут объявить "Недопустимая запись", как только пользователь перейдет в обязательное поле, которое в данный момент пусто. Это может создавать трудности для пользователей, использующих технологии специальных возможностей, поскольку сообщение об ошибке появляется до того, как пользователь совершил действие.

Решение

Программное состояние (aria-invalid="true") должно применяться в тот же момент, что и визуальное (:user-invalid). Поскольку :user-invalid зависит от внутреннего флага браузера "user-interacted", мы можем использовать JavaScript, чтобы проверить, соответствует ли этот селектор стандартным событиям взаимодействия.

Подробную информацию можно найти в документации MDN по aria-invalid.

Стратегия реализации

  1. Визуальный слой. Используйте CSS :user-invalid, чтобы показывать границы и значки.
  2. Слой специальных возможностей. Используйте aria-invalid и aria-errormessage, чтобы передавать информацию о состоянии вспомогательным технологиям.
  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
}

Резервный ССЦ

Чтобы резервная логика визуально не отличалась от нативного поведения, необходимо применить стили ошибок как к псевдоклассу, так и к резервному классу.

/* 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) переведен. Логика остается прежней.