Dostępne powiadomienie o błędzie

Funkcje internetowe: :user-valid i :user-invalid

Problem

Standardowa walidacja HTML5 zapewnia wizualne informacje zwrotne (za pomocą :invalid lub :user-invalid), ale nie synchronizuje się automatycznie z atrybutami ułatwień dostępu, takimi jak aria-invalid.

Jeśli używasz standardowego stylu :invalid, czytniki ekranu mogą odczytać „Nieprawidłowy wpis”, gdy użytkownik przejdzie do wymaganego pola, które jest obecnie puste. Powoduje to zakłócenia w korzystaniu z technologii wspomagających osoby z niepełnosprawnością, ponieważ błąd jest ogłaszany, zanim dojdzie do interakcji.

Rozwiązanie

Chcemy, aby stan programowy (aria-invalid="true") był stosowany dokładnie w tym samym momencie co stan wizualny (:user-invalid). Ponieważ :user-invalid opiera się na wewnętrznej fladze przeglądarki „interakcja użytkownika”, możemy użyć JavaScriptu, aby sprawdzić, czy ten selektor pasuje podczas standardowych zdarzeń interakcji.

Więcej informacji znajdziesz w artykule aria-invalid w MDN.

Strategia wdrażania

  1. Warstwa wizualna: użyj CSS :user-invalid, aby wyświetlić obramowania/ikony.
  2. Warstwa ułatwień dostępu: używaj atrybutów aria-invalid i aria-errormessage, aby przekazywać stan do technologii wspomagających osoby z niepełnosprawnością.
  3. Warstwa wizualna i ułatwień dostępu: utwórz lekkie narzędzie JavaScript, które nasłuchuje zdarzeń blur i input, sprawdza, czy element pasuje do :user-invalid, i odpowiednio aktualizuje atrybuty ARIA.

Przewodnik po implementacji

1. Struktura HTML

Połącz dane wejściowe z komunikatem o błędzie za pomocą atrybutu aria-errormessage (lub aria-describedby, aby uzyskać szerszą obsługę).

<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

Widoczność komunikatu o błędzie możesz kontrolować za pomocą natywnej pseudoklasy :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

Ponieważ nie ma zdarzenia „UserInvalidChanged”, podłącz się do standardowych zdarzeń formularza, aby sprawdzić stan.

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);
  }
});

Kreacje zastępcze i obsługa przeglądarek

Wykrywanie funkcji

Możesz sprawdzić obsługę w CSS i JavaScript.

Sprawdzanie JavaScriptu:

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

CSS dla kreacji zastępczej

Aby mieć pewność, że logika kreacji zastępczej jest wizualnie nie do odróżnienia od zachowania natywnego, musisz zastosować style błędów zarówno do pseudoklasy, jak i klasy kreacji zastępczej.

/* 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;
}

Logika zastępcza

Jeśli brakuje :user-invalid, ręcznie śledź stan interakcji za pomocą 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();

Inne rzeczy, które warto wziąć pod uwagę

  1. aria-live – aria-errormessage:

    • aria-errormessage łączy pole tekstowe z tekstem, ale czytniki ekranu mogą nie odczytać go od razu po wyświetleniu (tylko po zaznaczeniu pola tekstowego).
    • Jeśli potrzebujesz natychmiastowego powiadomienia, gdy pojawi się błąd (np.po utracie zaznaczenia), rozważ dodanie atrybutu role="alert" lub aria-live="polite" do kontenera komunikatu o błędzie. Przetestuj jednak dokładnie to rozwiązanie, aby uniknąć „podwójnego powiadomienia”, gdy użytkownik zaznaczy pole, aby poprawić błąd.

  2. Internacjonalizacja:

    • Upewnij się, że tekst komunikatu o błędzie (#email-error) jest przetłumaczony. Logika pozostaje taka sama.