Alt-Text für Barrierefreiheit | Beispiele, Tipps & Best Practices

Warum Alt-Text unverzichtbar ist

Lebensader für über 285 Mio. sehbehinderte Nutzer

Laut der Weltgesundheitsorganisation leben weltweit über 285 Millionen Menschen mit einer Sehbehinderung.

Für sie ist Alt-Text keine Option, sondern eine Notwendigkeit: Screenreader lesen ihn vor, um Bilder, Grafiken und visuelle Hinweise verständlich zu machen.
Fehlender oder ungenauer Alt-Text bedeutet, dass ein großer Teil der Nutzer ausgeschlossen wird.

Gesetzliche Pflicht nach WCAG/ADA
Die Web Content Accessibility Guidelines (WCAG) 2.1, Erfolgskriterium 1.1.1, verlangen, dass alle Nicht-Text-Inhalte eine gleichwertige Textalternative haben (W3C).

In den USA wird dies auch über den Americans with Disabilities Act (ADA) durchgesetzt, fehlender oder mangelhafter Alt-Text ist häufiger Grund für Klagen.
Automatisierte Tools wie der Accesstive Access AI Audit helfen, Probleme frühzeitig zu finden und zu beheben.

Die 5-Sekunden-Regel für Alt-Text

Zeichenbegrenzung: unter 125 Zeichen

Screenreader wie JAWS  oder NVDA pausieren nach ca. 125 Zeichen. Kürzere, prägnante Beschreibungen sorgen dafür, dass der Sinn in etwa fünf Sekunden vermittelt wird.

Was unbedingt rein sollte, und was nicht

• Enthalten: relevante Details zu Objekten, Personen, Handlungen, Kontext.
  Beispiel: „Ein Golden Retriever-Welpe spielt mit einem roten Ball auf einer Wiese.“
• Vermeiden: Phrasen wie „Bild von…“ oder unnötige Details ohne Mehrwert, Screenreader kündigen das Bild selbst an.

Leere Alt-Tags für Deko-Bilder

Bei rein dekorativen Bildern (z. B. Hintergründe, Rahmen, Icons) sollte alt="" gesetzt werden.
So überspringen Screenreader das Bild und reduzieren unnötige Informationen.(W3C)
Für inhaltsrelevante Bilder gilt: Immer aussagekräftigen Alt-Text schreiben, der den Kontext erfasst.

Alt-Text, der überzeugt

SEO-Vorteile ohne Keyword-Stuffing

Suchmaschinen indexieren Alt-Texte, was die Sichtbarkeit in der Google Bildersuche erhöht und die Seitenrelevanz stärkt.
Setze Haupt-Keywords natürlich ein, mit menschenlesbaren Beschreibungen, ohne künstliche oder überladene Phrasen.

E-Commerce-Beispiele, die Verkäufe steigern

 Aussagekräftige Alt-Texte können die Conversion-Rate im Onlinehandel verbessern.

• Schlecht: „Produktbild“
• Optimal: „Schwarzer Leder-Bürostuhl mit verstellbarer Höhe und Lendenwirbelstütze“
  Detaillierte Produktbeschreibungen helfen nicht nur Screenreader-Nutzern, sondern steigern auch die Sichtbarkeit in den Suchergebnissen.

Social-Media-Alt-Text-Hacks

Plattformen wie Instagram, X (Twitter) und LinkedIn ermöglichen benutzerdefinierte Alt-Texte für Bilder.

Formuliere kurze, prägnante und passende Beschreibungen, die zum Ton deines Posts passen und dennoch genau sind.
Das steigert nicht nur die Barrierefreiheit, sondern auch die Auffindbarkeit über Nischen-Hashtags und Trends.

Komplexe Bilder entschlüsselt

Datenvisualisierung: Trends besprechen, nicht Pixel

Beim Erstellen von Alt-Texten für Diagramme oder Grafiken sollten die wichtigsten Erkenntnisse beschrieben und nicht jedes einzelne Datenset erläutert werden.
Beispiel: „Ein Liniendiagramm, das ein konstantes Umsatzwachstum von Q1 bis Q4 zeigt.“

Infografiken: Ansatz mit gestaffelter Beschreibung

Viele Infografiken enthalten mehrere Bilder und Textbausteine. Verwende einen kurzen Alt-Text, um das Hauptthema zusammenzufassen, und biete eine längere Beschreibung an einer anderen Stelle im Text oder auf einer verlinkten Seite für weitere Informationen.

Memes/Kunst: Ton und Humor einfangen

Alt-Texte für Memes oder Kunstwerke sollten Emotion, Ton oder Witz beschreiben, nicht nur das Visuelle.
Beispiel: „Meme einer schockierten Katze mit dem Text: ‚wenn du vergisst, dass es Alt-Text gibt.‘“ Dies sorgt für Barrierefreiheit und erhält gleichzeitig die Wirkung.

Das Alt-Text-Test-Toolkit

Screenreader-Simulation

Teste Alt-Texte, indem du deine Website wie ein Screenreader-Nutzer navigierst:

• NVDA – Kostenloser Screenreader für Windows.
• VoiceOver – Integriert in macOS- und iOS-Geräte.

Automatisierte Prüfungen

Führe schnelle Audits durch, um fehlende oder falsche Alt-Attribute zu finden:

• WAVE – Hebt Alt-Text-Fehler direkt auf der Seite hervor.
• Google Lighthouse – Prüft Barrierefreiheit sowie Leistung und SEO.
• Access Monitor – Bietet Barrierefreiheits-Scoring und WCAG-Checks.
• Access Accy – Ein Website-weiter Konversationsagent, der Besuchern hilft, die Seite zu navigieren, Antworten zu finden und Barrierefreiheitsfunktionen zu verstehen.

Der „Augen zu“-Test

Überprüfe manuell Klarheit und Relevanz:

• Augen schließen und jemanden den Alt-Text vorlesen lassen.
• Wenn du die Nutzung in unter 5 Sekunden visualisieren kannst, ist er effektiv.
• Falls nicht, kannst du ihn jederzeit für mehr Klarheit und Kontext umschreiben.

Über die Grundlagen hinaus

Dynamische Bildverarbeitung

Moderne Frameworks wie React und Vue laden Bilder oft dynamisch, was zu Barrierefreiheitslücken führen kann, wenn alt-Attribute übersehen werden. Um Alt-Text effektiv und konsistent zu halten:

• Übergib alt-Attribute über Props in deinen benutzerdefinierten Komponenten, damit der Text bearbeitbar und lokalisierbar bleibt.
• Verwende Lazy-Loading-Bibliotheken (z. B. react-lazyload), die das alt-Attribut während des verzögerten Ladens beibehalten.
• Teste mit simulierten langsamen Verbindungen oder gedrosselten Netzgeschwindigkeiten, um sicherzustellen, dass Alt-Text von Screenreadern auch vor dem Laden des Bildes vorgelesen wird. Eine vollständige Checkliste der zu prüfenden Elemente findest du in unserer Website-Accessibility-Checkliste.

Wann ARIA statt Standard-alt verwenden

 Nicht alle visuellen Elemente sind Standard-<img>-Tags, insbesondere in komplexen Interfaces. In solchen Fällen:

• Verwende aria-label oder aria-labelledby für Elemente wie SVG-Icons, Hintergrundbilder oder benutzerdefinierte Komponenten, die wichtige Bedeutung haben.
• Ersetze ein Standard-<img alt="..."> nicht durch ARIA, es sei denn, es gibt kein <img>. Das alt-Attribut ist nach wie vor die zuverlässigste Methode für Bilder.
• Folge den W3C-ARIA-Authoring-Practices, um korrekte Rollen, Zustände und Eigenschaften für maximale Kompatibilität sicherzustellen.

Wenn du WCAG 2.2 Level AA-Compliance anstrebst, deckt unsere WCAG 2.2-Checkliste die ARIA-Nutzung im Detail ab. Für eCommerce-spezifische Barrierefreiheitsregeln siehe unseren ADA-Compliance-Guide für eCommerce-Websites.

Fazit

Alt-Texte zu schreiben ist mehr als nur eine Pflichtaufgabe zur Compliance – es verbessert Barrierefreiheit, SEO und die Nutzererfahrung für alle. 

Wenn Sie Zeichenlimits beachten, redundante Phrasen vermeiden, komplexe Bilder klar beschreiben und mit den richtigen Tools testen, stellen Sie sicher, dass Ihre Bilder für alle funktionieren. 

Starten Sie noch heute Ihre kostenlose Testphase mit Accesstive und erfahren Sie, wie professionelle Alt-Text-Strategien die Zugänglichkeit steigern und gleichzeitig die Conversionrate erhöhen. Durch Techniken wie dynamische Bildverarbeitung und gezielten ARIA-Einsatz wird Ihre Website zukunftssicher, vollständig inklusiv und konform mit WCAG 2.2 sowie ADA-Standards.