Toegankelijke gegenereerde content

Webfuncties: Content Alt-tekst voor gegenereerde content
  • Gebruik content NIET om betekenisvolle tekst (labels, status, instructies) over te brengen. Houd die in de DOM (WCAG F87). Het argument voor alt-tekst is schadebeperking voor gevallen waarin decoratie per ongeluk betekenis heeft, geen licentie.
  • Gebruik het alt-attribuut van content om alt-tekst voor schermlezers te bieden. Bijv. content: url(cloud.svg) / "Save";
  • Gebruik content: "text" / ""; om te voorkomen dat puur decoratieve tekst wordt voorgelezen door schermlezers.
  • Gebruik GEEN leeg alt-tekstargument voor afbeeldingen. Ze zijn standaard al presentatiegericht. Dit is bijvoorbeeld onjuist: content: url(cloud.svg) / "";.
  • Gebruik het argument alt-tekst NIET om emoji's te beschrijven, tenzij de beschrijving verschilt van de officiële emoji-naam. Doe bijvoorbeeld niet content: "🎉" / "celebration";, maar content: "🎉" / "Yay!"; is prima.

Gebruik het argument alt-tekst ALLEEN als de tekst verschilt van de primaire waarde en nog niet aanwezig is in het DOM. Dit is bijvoorbeeld onjuist:

HTML:

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

CSS:

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

Een schermlezer leest dit voor als 'Opslaan opslaan'.