Alt-Text für Bilder – Regeln & Best Practices

Alt-Text (Alternativtext, alt-Attribut) ist eine Textbeschreibung, die einem HTML-<img>-Element zugeordnet wird, um blinden und sehbehinderten Nutzern, Suchmaschinen und Nutzern mit deaktivierten Bildern den Inhalt und die Funktion des Bildes zugänglich zu machen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Accessibility · Niveau: Fortgeschritten

Was ist Alt-Text?

Das alt-Attribut im HTML-<img>-Tag ist eines der grundlegendsten Accessibility-Merkmale des Webs. Es wurde bereits in HTML 2.0 (1995) eingeführt und ist in WCAG – Web Content Accessibility Guidelines im Überblick 2.2 als Erfolgskriterium 1.1.1 (Stufe A) verankert: Alle Nicht-Text-Inhalte müssen eine Textalternative haben.

Alt-Text dient vier Hauptzwecken:

1. Assistive Technologien: Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer lesen den Alt-Text vor, wenn sie ein Bild antreffen.
2. SEO: Suchmaschinen indexieren Alt-Text zur Klassifizierung des Bildinhalts.
3. Fehlerfall: Wenn ein Bild nicht geladen werden kann, wird der Alt-Text angezeigt.
4. Kontextuelles Verständnis: In bestimmten Browsermodi (z. B. Textmodus) und bei sehr langsamen Verbindungen wird nur der Text dargestellt.

Erklärung

Grundregeln für Alt-Text

Regel 1: Inhalt und Funktion, nicht Aussehen beschreiben. Alt-Text soll beschreiben, was das Bild im Kontext des Dokuments bedeutet und welche Funktion es erfüllt – nicht wie es aussieht.

• Schlecht: „Bild einer Person"
• Besser: „Schulungsleiterin Mia Krause erklärt am Whiteboard die WCAG-Prinzipien"

Regel 2: Kontextabhängigkeit. Dasselbe Bild kann je nach Kontext einen unterschiedlichen Alt-Text benötigen. Ein Foto einer Waage auf einer Kochwebseite könnte „500g Mehl auf einer digitalen Küchenwaage" erhalten. Dieselbe Waage auf einer Seite über Justizia würde „Goldene Waage als Symbol der Gerechtigkeit" erhalten.

Regel 3: Kein Redundanztext. Alt-Text sollte keine Informationen enthalten, die im umgebenden Text bereits stehen. Wenn eine Bildunterschrift „Abbildung 3: Kontrastverhältnis Beispiel" lautet, muss der Alt-Text dies nicht wiederholen.

Regel 4: Kein „Bild von" oder „Foto zeigt". Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer kündigen Bilder selbst an (z. B. „Grafik:"). Ein vorangestelltes „Bild von" ist redundant.

Regel 5: Länge angemessen. Alt-Text für einfache Bilder: 1–3 Sätze. Für komplexe Infografiken, Charts und Diagramme: kurzer Alt-Text plus ausführliche Textbeschreibung im Dokument oder im longdesc-Attribut bzw. per verlinkter Beschreibungsseite.

Entscheidungsbaum: Welchen Alt-Text brauche ich?

`` Ist das Bild dekorativ? ├── Ja → leeres alt="" verwenden (alt-Attribut muss vorhanden sein, aber leer) └── Nein → Hat das Bild eine Funktion (z. B. als Link oder Button)? ├── Ja → Funktion beschreiben (z. B. "Zur Startseite") └── Nein → Ist das Bild ein Diagramm/Infografik? ├── Ja → Kurze Zusammenfassung + ausführliche Beschreibung im Text └── Nein → Inhalt und Funktion im Kontext beschreiben ``

Dekorative Bilder: alt=""

Bilder, die ausschließlich dekorativ sind (keine inhaltliche Information tragen), erhalten ein leeres alt-Attribut (alt=""). Dies signalisiert Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer, das Bild zu überspringen. Das alt-Attribut darf bei Bildern niemals fehlen – fehlt es, lesen viele Screen Reader stattdessen den Dateinamen vor (z. B. „img0847final_final2.jpg").

Dekorativ sind typischerweise: Trennlinien aus Bilddateien, rein atmosphärische Hintergrundfotos ohne inhaltliche Relevanz, Icon-Bilder, deren Text-Beschriftung den Zweck bereits vollständig kommuniziert.

Komplexe Bilder: Charts, Diagramme, Infografiken

Für komplexe visuelle Inhalte reicht ein kurzer Alt-Text nicht aus. Empfohlene Strategien:

1. Alt-Text + Beschreibung im Fließtext: Die wichtigsten Erkenntnisse des Diagramms werden direkt im umgebenden Text erläutert.
2. Alt-Text + verlinktes Beschreibungsdokument: <a href="diagramm-beschreibung.html">Detaillierte Beschreibung von Abbildung 3</a>
3. Datentabelle: Hinter einem Diagramm liegt eine HTML-Datentabelle, die Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer linear vorlesen können.

Beispiel für ein Balkendiagramm:

• Alt-Text: „Balkendiagramm: Social-Media-Nutzung in Deutschland 2023 nach Altersgruppen"
• Im Text: „Die 18–29-Jährigen nutzen Instagram mit 78 % am häufigsten, gefolgt von TikTok mit 62 %. Bei den 50–65-Jährigen liegt Facebook mit 61 % an erster Stelle."

Alt-Text in verschiedenen Formaten

• SVG: Inline-SVG kann <title> und <desc>-Elemente für Beschreibungen nutzen, ergänzt durch aria-labelledby.
• CSS-Hintergrundbilder: Rein via CSS eingebundene Bilder sind für Screen Reader unsichtbar – sie sollten daher nur für dekorative Elemente verwendet werden.
• PDFs: In Barrierefreie PDFs – Tagging, Struktur & Standards entspricht der Alt-Text dem Bild-Tag in der PDF-Struktur.
• E-Mail-HTML: Alt-Text gilt auch für HTML-E-Mails; viele E-Mail-Clients blockieren Bilder standardmäßig.

Beispiele

Produktbild im Online-Shop:

• Alt-Text: „Blaue Daunenjacke mit Kapuze und orangem Reißverschluss, Modell 'Alpine Pro', Vorderansicht"

Portraitfoto einer Person:

• Alt-Text: „Prof. Dr. Hannah Weber, Leiterin des Instituts für Mediendesign, Universität Hamburg"
• Wenn dekorativ auf einer Teamseite mit Namen und Titel darunter: alt=""

Infografik:

• Alt-Text: „Infografik: 5 Schritte zur barrierefreien Website"
• Im anschließenden Fließtext: Die fünf Schritte werden als nummerierte Liste beschrieben.

In der Praxis

In Content-Management-Systemen wie WordPress, Typo3 oder Contentful ist ein Alt-Text-Pflichtfeld die einfachste technische Maßnahme. In Redaktionssystemen empfiehlt sich eine klare Checkliste:

• Ist das Bild inhaltlich relevant? → Alt-Text schreiben.
• Ist das Bild rein dekorativ? → alt="" setzen.
• Ist es ein Diagramm? → Alt-Text + Beschreibung im Text.
• Ist es ein Link-Bild? → Ziel des Links beschreiben.

Vergleich & Abgrenzung

Alt-Text vs. Bildunterschrift (Caption): Die Bildunterschrift ist für alle Nutzer sichtbar und beschreibt das Bild im Kontext. Der Alt-Text ist primär für Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer und Nicht-Darstellungsfälle. Beide können unterschiedliche Informationen enthalten.

Alt-Text vs. Title-Attribut: Das title-Attribut erscheint als Tooltip beim Hover über das Bild. Es ist kein Ersatz für Alt-Text und sollte sparsam eingesetzt werden.

Häufige Fragen (FAQ)

Wie lang darf Alt-Text maximal sein? WCAG macht keine Längenbeschränkung. Die Praxis empfiehlt unter 150 Zeichen für einfache Bilder. Zu langer Alt-Text verlangsamt die Screen-Reader-Navigation. Für komplexe Bilder: ausführliche Beschreibung außerhalb des Alt-Attributs.

Gilt Alt-Text-Pflicht auch für Icons? Icons ohne begleitenden Text benötigen entweder Alt-Text (wenn als <img>) oder eine ARIA-Labels – Zugängliche Rich Internet Applications-Beschriftung (wenn als SVG oder Font-Icon). Icons mit sichtbarer Textbeschriftung können aria-hidden="true" erhalten, damit Screen Reader die Doppelausgabe vermeiden.

Verwandte Einträge

• Accessibility – Grundlagen digitaler Barrierefreiheit
• Screen Reader – Barrierefreiheit für blinde und sehbehinderte Nutzer
• WCAG – Web Content Accessibility Guidelines im Überblick
• ARIA-Labels – Zugängliche Rich Internet Applications
• Barrierefreie PDFs – Tagging, Struktur & Standards
• Accessibility Testing – Tools & Methoden (axe, WAVE, Lighthouse)

Weiterführend

• W3C WAI: An alt Decision Tree. 2019.
• W3C WAI: Images Tutorial. 2019.
• Cooper, Michael / Kirkpatrick, Andrew: Techniques for WCAG 2.2: H37 – Using alt attributes on img elements. W3C, 2023.
• Weaver, Glenda: The Image Alt Text Handbook. Knowbility, 2021.
• Accessibility Developer Guide: Alternative texts for images. 2023.