Alt-Text für Screenshots und Vorschaubilder

Was verlangt WCAG 2.2 von Bildern?

WCAG 2.2 verlangt für jedes Bild eine Textalternative mit gleichem Zweck. Das regelt das Erfolgskriterium 1.1.1 „Non-text Content“ (Stufe A) für jeden Nicht-Text-Inhalt, der Nutzern präsentiert wird. Für einige Fälle nennt das Kriterium eigene Regeln, etwa für Bedienelemente, zeitbasierte Medien und reine Dekoration. Dekoration soll etwa von Hilfstechnik ignoriert werden können. Die aktuelle Fassung der W3C-Empfehlung WCAG 2.2 trägt das Datum 12. Dezember 2024 (Quelle: w3.org/TR/WCAG22/#non-text-content, Stand: Oktober 2026).

Ein Bild ganz ohne alt-Attribut ist schlechter zugänglich als eines mit leerem alt="". Die WAI weist darauf hin, dass manche Screenreader bei fehlendem alt-Attribut den Dateinamen vorlesen. Ein Screenshot namens scr-2026-10-07-1432.png wird so zur Zahlenkolonne (Quelle: w3.org/WAI/tutorials/images/decorative/, Stand: Oktober 2026).

Welchen Alt-Text bekommt ein verlinktes Vorschaubild?

Ein Vorschaubild, das allein den Link bildet, ist ein funktionales Bild. Sein Alt-Text nennt das Ziel oder die Aktion, nicht das Aussehen. Die WAI nennt als Beispiele „print this page“ statt „printer“ und „Example.com homepage“ statt „Example.com logo“. Sie warnt: Bei fehlendem oder leerem Alt-Text eines funktionalen Bildes lesen Screenreader meist Dateinamen oder URL vor (Quelle: w3.org/WAI/tutorials/images/functional/, Stand: Oktober 2026).

<!-- Bild ist der einzige Linkinhalt -->
<a href="https://example.org/">
  <img src="/thumbs/example-org.webp" width="400" height="300"
       alt="Startseite von example.org">
</a>

<!-- Bild plus Linktext: Bild ist redundant -->
<a href="https://example.org/">
  <img src="/thumbs/example-org.webp" width="400" height="300" alt="">
  example.org – Beispielseite
</a>

Ein Vorschaubild in einem Link mit eigenem Zieltext bekommt ein leeres alt="". Sonst liest der Screenreader das Ziel doppelt vor. Die WAI zeigt das am Beispiel eines Logos innerhalb eines Linktexts, das keine zusätzliche Information trägt (Quelle: w3.org/WAI/tutorials/images/functional/, Stand: Oktober 2026).

Wann ist ein Screenshot informativ?

Ein Screenshot ist informativ, wenn er eine Aussage trägt, etwa in einem Artikel über ein Website-Redesign. Laut WAI gibt der Alt-Text eines informativen Bildes die Bedeutung oder den Inhalt wieder. Das ist meist keine wörtliche Beschreibung. Eine detaillierte Beschreibung ist nur nötig, wenn der Bildinhalt selbst die Information ist (Quelle: w3.org/WAI/tutorials/images/informative/, Stand: Oktober 2026).

Ob ein Bild informativ oder dekorativ ist, entscheidet laut WAI der Autor. Maßgeblich ist der Grund, aus dem das Bild auf der Seite steht. Derselbe Screenshot kann in einer Linkliste dekorativ und in einer Designkritik informativ sein (Quelle: w3.org/WAI/tutorials/images/decorative/, Stand: Oktober 2026).

Was tun, wenn der Screenshot viel Text oder Daten zeigt?

Ein Screenshot mit vielen Daten, etwa ein Dashboard mit Kennzahlen, gilt nach der WAI als komplexes Bild. Komplexe Bilder zeigen Inhalte, die sich nicht in einem kurzen Satz fassen lassen. Sie brauchen eine zweiteilige Textalternative. Die Kurzbeschreibung benennt das Bild und verweist auf die Langbeschreibung. Die Langbeschreibung enthält die wesentlichen Informationen in Textform (Quelle: w3.org/WAI/tutorials/images/complex/, Stand: Oktober 2026).

<figure>
  <img src="/shots/dashboard.png" width="1280" height="800"
       alt="Dashboard mit Ladezeiten; Werte in der Tabelle darunter">
  <figcaption>Ladezeiten der Startseite im September</figcaption>
</figure>

Text, der nur als Bild vorliegt, ist ein Sonderfall. Nach dem WCAG-Kriterium 1.4.5 „Images of Text“ (Stufe AA) soll Information als echter Text vermittelt werden, wenn die Technik das erlaubt. Logos sind ausgenommen (Quelle: w3.org/TR/WCAG22/#images-of-text). Für Screenshots heißt das: Wichtiger Text gehört zusätzlich in den Fließtext. Lässt sich ein Textbild nicht vermeiden, muss die Textalternative laut WAI denselben Text enthalten (Quelle: w3.org/WAI/tutorials/images/textual/, Stand: Oktober 2026).

Was ist mit Hover-Vorschauen?

Hover-Vorschaubilder fallen unter das WCAG-Kriterium 1.4.13 „Content on Hover or Focus“ (Stufe AA). Sie müssen sich schließen lassen, ohne Maus oder Fokus zu bewegen. Sie dürfen nicht verschwinden, wenn der Mauszeiger auf sie wandert. Und sie müssen sichtbar bleiben, bis der Auslöser entfällt (Quelle: w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html, Stand: Oktober 2026). Mehr dazu unter Link-Vorschau beim Überfahren.

Brauchen Open-Graph-Bilder einen Alt-Text?

Open-Graph-Bilder sollten einen Alt-Text haben. Das Open-Graph-Protokoll sagt: Gibt eine Seite og:image an, sollte sie auch og:image:alt angeben. Gemeint ist eine Beschreibung des Bildinhalts, ausdrücklich keine Bildunterschrift (Quelle: ogp.me/, Stand: Oktober 2026).

Hilft der Alt-Text auch in der Suche?

Alt-Text hilft auch in der Google-Suche. Google bezeichnet ihn als das wichtigste Attribut für zusätzliche Metadaten zu einem Bild. Google nennt ausdrücklich auch die Barrierefreiheit für Nutzer, die Bilder nicht sehen können, etwa mit Screenreadern oder langsamen Verbindungen (Quelle: developers.google.com/search/docs/appearance/google-images, Stand: Oktober 2026).

Ist Barrierefreiheit für Websites gesetzlich vorgeschrieben?

Barrierefreiheit ist für bestimmte Online-Angebote gesetzlich vorgeschrieben. Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt nach § 1 Abs. 3 unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr. Erfasst sind auch Bankdienstleistungen für Verbraucher und E-Books. Voraussetzung ist, dass die Leistungen nach dem 28. Juni 2025 für Verbraucher erbracht werden (Quelle: gesetze-im-internet.de/bfsg/__1.html, Stand: Oktober 2026). Ob eine einzelne Website darunter fällt, hängt vom Angebot ab und lässt sich nicht pauschal beantworten.