Contenu généré accessible

  • À ÉVITER : N'utilisez pas content pour transmettre du texte significatif (libellés, état, instructions). Conservez-le dans le DOM (WCAG F87). L'argument du texte alternatif est une réduction des risques pour les cas où la décoration est accidentellement porteuse de sens, et non une licence.
  • Utilisez l'argument de texte alternatif de content pour fournir un texte alternatif aux lecteurs d'écran. Exemple : content: url(cloud.svg) / "Save";
  • Utilisez content: "text" / ""; pour empêcher les lecteurs d'écran d'annoncer du texte purement décoratif.
  • À ÉVITER : N'utilisez pas d'argument de texte alternatif vide pour les images, car elles sont déjà présentées par défaut. Exemple incorrect : content: url(cloud.svg) / "";.
  • À ÉVITER : N'utilisez pas l'argument de texte alternatif pour décrire les emoji, sauf si la description diffère du nom officiel de l'emoji. Par exemple, n'utilisez pas content: "🎉" / "celebration";, mais content: "🎉" / "Yay!"; est acceptable.

Utilisez l'argument de texte alternatif UNIQUEMENT lorsque le texte est différent de la valeur principale et qu'il n'est pas déjà présent dans le DOM. Par exemple, ceci est incorrect :

HTML :

<button class="save">Save</button>

CSS :

button.save::before {
  content: url(cloud.svg) / "Save";
}

Un lecteur d'écran lirait "Enregistrer enregistrer".