Was ist Alternativtext-Assistent?

Wählen Sie den Bildtyp, schreiben Sie den Alt-Text mithilfe typspezifischer Hinweise und prüfen Sie ihn mit der Barrierefreiheits-Checkliste. Enthält Tipps und Beispiele für screenreaderfreundliche Beschreibungen.

Wählen Sie einen von sechs Bildtypen — Foto, Icon, Diagramm, dekorativ, informativ oder Bild-Link — und das Feld wechselt zum passenden Hinweis, der genau das herausholt, was Screenreader-Nutzer brauchen. Ein Zähler warnt bei 125 Zeichen, und eine Sechs-Punkte-Checkliste prüft, ob die Beschreibung spezifisch, knapp und kontextbewusst ist, frei von Wendungen wie 'Bild von', das Wichtigste vorn stehen hat und nicht in Kommaketten oder wiederholten Stichwörtern erstickt. Dekorative Bilder bekommen einen alt=""-Hinweis, damit Hilfstechnologien sie überspringen.

Anleitung

  1. Wählen Sie den Bildtyp, den Sie beschreiben: Foto, Icon, Diagramm, dekorativ, informativ oder Bild-Link.
  2. Nutzen Sie den Hinweis für Ihren Bildtyp, um eine knappe Beschreibung zu verfassen.
  3. Überprüfen Sie Ihren Alt-Text anhand der Barrierefreiheits-Checkliste und kopieren Sie ihn zur Verwendung in Ihrem HTML oder CMS.

Wann verwenden

  • Alt-Attribute in einer Shopify- oder WordPress-Produktgalerie vor dem Launch ausfüllen.
  • Alt-Text für ein Diagramm in einem Quartalsbericht schreiben, damit Screenreader-Nutzer die Zahlen erfassen.
  • Einen Bestand auf WCAG 1.1.1 prüfen, bevor ein Barrierefreiheits-Audit startet.

Ergebnis

Für ein Balkendiagramm mit Q1-Umsätzen: Statt „chart.png“ schreiben Sie „Balkendiagramm der Q1-2024-Umsätze nach Region: Nordamerika 2,1 Mio. $, Europa 1,8 Mio. $, Asien 1,4 Mio. $“.

Häufige Fragen

Warum gilt der Alt-Text als wichtigstes Barrierefreiheits-Attribut?
Er ist die erste WCAG-Anforderung (1.1.1 Nicht-Textinhalte, Level A) und das einzige Kriterium, auf das ein blinder Screenreader-Nutzer auf jeder Seite sofort trifft. Fehlt er, leidet die Barrierefreiheit, und auch Suchmaschinen sowie Link-Preview-Crawler verwenden ihn als Bildunterschrift.
Wie kurz sollte Alt-Text sein? Sind 125 Zeichen ein hartes Limit?
Technisch nicht. Browser und Screenreader kommen mit längeren Strings klar. Die 125-Zeichen-Faustregel stammt aus alten JAWS-Versionen, die längere Texte schlecht zerlegt haben. Inzwischen behoben, aber kurze Beschreibungen sind weiter angenehmer zu hören.
Was tun bei rein dekorativen Bildern wie Trennern oder Ornamenten?
Setzen Sie alt="" (leerer String), lassen Sie das Attribut nicht weg. Ein leeres alt sagt dem Screenreader, das Bild zu überspringen. Komplettes Weglassen lässt manche Screenreader den Dateinamen vorlesen, das ist schlechter als nichts.
Wie beschreibe ich ein komplexes Diagramm in 125 Zeichen?
Starten Sie mit Diagrammtyp und Kernaussage, nicht mit allen Datenpunkten. 'Linien-Diagramm, mobile Nutzer überholen Desktop in Q3 2024' wirkt besser als eine Monatsliste. Vollständige Zahlen gehören in eine längere Textbeschreibung an anderer Stelle der Seite.
Sollte ich mit 'Foto von' oder 'Bild von' anfangen?
Nein. Screenreader kündigen ohnehin an, dass sie ein Bild lesen, also wird aus 'Bild von einer Katze' 'Bild, Bild von einer Katze'. Beginnen Sie beim Motiv: 'Eine graue Katze auf einem blauen Sofa'. Die Checkliste in diesem Tool warnt automatisch davor.

Ähnliche Tools