Accessibilité

<!-- Étiquette manquante -->
<input type="email" name="email" placeholder="Saisir l'email">

<!-- Correct : étiquette explicite -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email">

<!-- Correct : aria-label -->
<input type="search" aria-label="Rechercher des produits">

<!-- Bouton vide — aucune indication de purpose -->
<button type="submit"></button>

<!-- Bouton icône sans nom accessible -->
<button><svg>...</svg></button>

<!-- Correct : bouton icône avec étiquette accessible -->
<button aria-label="Supprimer l'élément"><svg>...</svg></button>

<button aria-label="Sauvegarder le document">
  <svg>...</svg>
</button>

<!-- Alt manquant — le lecteur d'écran annonce le nom du fichier -->
<img src="company-logo.png">

<!-- Correct : alt descriptif -->
<img src="company-logo.png" alt="Acme Corporation">

<!-- Correct : image décorative (alt vide) -->
<img src="divider.png" alt="">

<!-- Image informative incorrectement marquée comme décorative -->
<img src="revenue-chart-2024.png" alt="">
<img src="product-photo.jpg" alt="">

<img src="revenue-chart-2024.png" alt="Graphique des revenus montrant une croissance de 40 % au T3 2024">

/* Échec : gris clair sur blanc — ratio ~2,8:1 */
color: #999999;
background: #ffffff;

/* Réussite : gris foncé sur blanc — ratio ~7:1 */
color: #595959;
background: #ffffff;

body { font-size: 1rem; }       /* 16px par défaut */
.caption { font-size: 0.875rem; } /* 14px */

<!-- Inatteignable : div avec gestionnaire de clic, pas de tabindex -->
<div onclick="openModal()">Ouvrir les paramètres</div>

<!-- Correct : élément button (nativement focalisable) -->
<button onclick="openModal()">Ouvrir les paramètres</button>

<!-- Correct : div avec tabindex et rôle -->
<div role="button" tabindex="0" onclick="openModal()">Ouvrir les paramètres</div>

<!-- Focalisable mais non activable au clavier -->
<div tabindex="0" onclick="handleAction()">Cliquez-moi</div>

element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault()
    handleAction()
  }
})

/* Ne faites pas cela */
:focus { outline: none; }

/* Faites cela à la place */
:focus-visible {
  outline: 2px solid #8265fd;
  outline-offset: 2px;
}

<!-- Seule la couleur distingue le champ obligatoire — inaccessible -->
<input type="text" style="border-color: red;">

<!-- Correct : couleur + marqueur texte -->
<label>Nom <span aria-hidden="true" style="color: red;">*</span></label>
<input type="text" aria-required="true">

<!-- Pas de titre — le lecteur d'écran annonce "frame" -->
<iframe src="payment.html" width="600" height="400"></iframe>

<!-- Correct : titre descriptif -->
<iframe src="payment.html" title="Formulaire de paiement sécurisé" width="600" height="400"></iframe>

<iframe src="map-embed.html" title="Carte montrant l'emplacement de notre bureau"></iframe>
<iframe src="video-player.html" title="Vidéo de démonstration du produit"></iframe>