Barrierefreie generierte Inhalte

Webfunktionen: Inhalt Alt-Text für generierte Inhalte
  • Verwenden Sie NICHT content, um aussagekräftigen Text (Labels, Status, Anleitungen) zu vermitteln. Behalten Sie diesen im DOM (WCAG F87). Das Argument, dass Alt-Text verwendet werden kann, ist eine Schadensminderung für Fälle, in denen dekorative Elemente versehentlich eine Bedeutung haben, aber keine Lizenz.
  • Verwenden Sie das Argument für alternativen Text von content, um Alt-Text für Screenreader bereitzustellen. Z.B. content: url(cloud.svg) / "Save";
  • Verwenden Sie content: "text" / "";, um zu verhindern, dass rein dekorativer Text von Screenreadern angesagt wird.
  • Verwenden Sie KEIN leeres Alt-Text-Argument für Bilder, da sie standardmäßig bereits als dekorativ gelten. Beispiel für einen Fehler: content: url(cloud.svg) / "";.
  • Verwenden Sie das Alt-Text-Argument NICHT, um Emojis zu beschreiben, es sei denn, die Beschreibung weicht vom offiziellen Emoji-Namen ab. Beispiel: Verwenden Sie nicht content: "🎉" / "celebration";, sondern content: "🎉" / "Yay!";.

Verwenden Sie das Alt-Text-Argument NUR, wenn sich der Text vom primären Wert unterscheidet und noch nicht im DOM vorhanden ist. Das ist falsch:

HTML:

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

CSS:

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

Ein Screenreader würde es als „Speichern speichern“ vorlesen.