← Tous les exemples

Afficher le texte alternatif des images

Encadre les images et signale tout texte alternatif manquant pour faciliter les contrôles d'accessibilité.

Code à copier

/* Outline images and surface their alt text as a tooltip-style label. */
img {
  outline: 1px dashed rgba(0, 120, 215, 0.7);
}
img:not([alt]),
img[alt=""] {
  outline: 2px solid #d33;
}
img[alt]:not([alt=""])::after {
  content: attr(alt);
}

Comment utiliser cet exemple

1. Copiez le code avec le bouton ci-dessus.
2. Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
3. Ajoutez une nouvelle règle correspondant à cette page.
4. Collez le code dans le panneau CSS de la règle et enregistrez — l'effet apparaît aussitôt.