Formulaires

<!-- Formulaire sans gestion des erreurs — échoue silencieusement -->
<form>
  <input type="email" required name="email">
  <button type="submit">S'abonner</button>
</form>
<!-- Après une soumission invalide : page inchangée, aucun message affiché -->

<!-- Erreur de résumé générique -->
<div role="alert" id="form-errors">
  Veuillez corriger les erreurs suivantes avant de continuer.
</div>

<!-- Erreur inline par champ -->
<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-error">
<span id="email-error" role="alert">Veuillez saisir une adresse email valide</span>

/* Au lieu de basculer display:none */
.error-message {
  display: block; /* Afficher lors d'une erreur */
}

/* Ou utiliser visibility */
.field-error {
  visibility: visible;
  height: auto;
}

// Exemple React
{errors.email && <span role="alert">{errors.email.message}</span>}

<!-- Indicateur visuel obligatoire manquant -->
<label for="phone">Téléphone</label>
<input type="tel" id="phone" required>

<!-- Correct : indicateur astérisque -->
<label for="phone">Téléphone <span aria-hidden="true">*</span></label>
<input type="tel" id="phone" required aria-required="true">

<!-- Inclure une légende expliquant l'indicateur -->
<p>Les champs marqués d'un <span aria-hidden="true">*</span> sont obligatoires.</p>

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Veuillez saisir une adresse email valide
</span>

<!-- Placeholder uniquement — l'étiquette disparaît lors de la frappe -->
<input type="email" placeholder="Adresse email">

<!-- Correct : étiquette visible + placeholder comme indice -->
<label for="email">Adresse email</label>
<input type="email" id="email" placeholder="vous@example.com">

<form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <button type="submit">S'abonner</button>
</form>

<!-- Select sans étiquette -->
<select name="country">
  <option>États-Unis</option>
</select>

<!-- Correct : étiquette associée -->
<label for="country">Pays</label>
<select id="country" name="country">
  <option>États-Unis</option>
</select>

<select aria-label="Sélectionnez votre pays" name="country">

// Supprimer ceci
input.addEventListener('paste', (e) => e.preventDefault())

// Autoriser le collage — c'est le comportement par défaut, aucun code nécessaire