ARIA alert : notifier les utilisateurs de lecteurs d'écran

<div role="alert">
  Votre session expire dans 2 minutes.
</div>

<!-- Conteneur vide présent au chargement -->
<div role="alert" id="form-errors" aria-live="assertive"></div>

<form id="contact-form">
  <!-- Champs du formulaire -->
</form>

function showError(message) {
  const errorContainer = document.getElementById('form-errors');
  errorContainer.textContent = message;
}

// Utilisation
showError('Le champ email est requis.');

function showAlert(message) {
  // Créer le conteneur
  const alert = document.createElement('div');
  alert.setAttribute('role', 'alert');

  // Ajouter au DOM d'abord
  document.body.appendChild(alert);

  // Puis insérer le message (après un cycle de rendu)
  requestAnimationFrame(() => {
    alert.textContent = message;
  });

  // Supprimer après un délai
  setTimeout(() => alert.remove(), 10000);
}

<form id="login-form" novalidate>
  <div role="alert" id="form-alert" aria-live="assertive"></div>

  <div class="field">
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      aria-describedby="email-error"
      required>
    <span id="email-error" class="error" hidden></span>
  </div>

  <button type="submit">Connexion</button>
</form>

document.getElementById('login-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const errors = validateForm();

  if (errors.length > 0) {
    // Message global dans l'alerte
    document.getElementById('form-alert').textContent =
      `${errors.length} erreur(s) dans le formulaire.`;

    // Messages individuels près des champs
    errors.forEach(error => {
      const errorSpan = document.getElementById(`${error.field}-error`);
      errorSpan.textContent = error.message;
      errorSpan.hidden = false;
    });

    // Focus sur le premier champ en erreur
    document.getElementById(errors[0].field).focus();
  }
});

<div aria-live="polite" id="search-status">
  <!-- Mis à jour dynamiquement -->
</div>

// L'annonce attend que l'utilisateur fasse une pause
document.getElementById('search-status').textContent =
  '42 résultats trouvés pour "accessibilité"';

<div role="status" aria-live="polite">
  Vos modifications ont été enregistrées.
</div>

<div aria-live="polite" aria-atomic="false">
  <span>Température actuelle : </span>
  <span id="temp-value">22°C</span>
</div>

// Mauvais : chaque frappe déclenche une alerte
input.addEventListener('keyup', () => {
  showAlert(`${input.value.length} caractères`);
});

// Bon : debounce et aria-live polite
let timeout;
input.addEventListener('keyup', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    statusDiv.textContent = `${input.value.length} caractères`;
  }, 500);
});

<!-- Trop intrusif pour une simple confirmation -->
<div role="alert">Produit ajouté au panier</div>

<!-- Approprié -->
<div role="status" aria-live="polite">Produit ajouté au panier</div>

<!-- Redondant : alert implique déjà assertive -->
<div role="alert" aria-live="assertive">Message</div>

<!-- Suffisant -->
<div role="alert">Message</div>

<!-- Sera annoncé au chargement de la page ! -->
<div role="alert">
  Bienvenue sur notre site.
</div>

<!-- Utiliser role="alert" uniquement pour du contenu dynamique -->

<div role="alert" id="session-warning">
  <p>Votre session expire dans 2 minutes.</p>
  <button onclick="dismissAlert()">
    Prolonger la session
  </button>
</div>

function dismissAlert() {
  const alert = document.getElementById('session-warning');
  alert.hidden = true;
  // Retourner le focus là où il était, ou sur un élément logique
}