ALT-Texte (alternative Texte) sind die beschreibenden Texte, die hinter Bildern in Webseiten und sozialen Medien stehen. Auf den ersten Blick scheint das nebensächlich, aber sie erfüllen mehrere wichtige Funktionen:
Für Menschen mit Sehbehinderung
Screenreader lesen ALT-Texte vor und ermöglichen so blinden oder sehbehinderten Menschen, den Inhalt von Bildern zu verstehen. Ohne ALT-Text bleibt diese Information verloren.
Für Suchmaschinenoptimierung (SEO)
Suchmaschinen können Bilder nicht „sehen“. ALT-Texte helfen ihnen, Bildinhalte zu erfassen und relevanzbasiert einzuordnen – ein oft unterschätzter Faktor für bessere Rankings.
Für technische Ausfälle
Wenn ein Bild nicht lädt, wird der ALT-Text stattdessen angezeigt. Nutzer behalten also trotzdem den Kontext.
Gute Praxis:
Beschreiben Sie kurz und präzise, was auf dem Bild passiert. Bei dekorativen Bildern genügt ein leeres ALT-Attribut (alt=""). Vermeiden Sie Füllwörter wie „Bild von“, sondern beginnen Sie direkt mit der Beschreibung.
Barrierefreiheit ist kein Nice-to-have, sondern eine Frage der Inklusion. Ein paar zusätzliche Worte pro Bild machen das Web für alle zugänglicher.
Merke: Beschreiben Sie die Information, nicht das Bild.
Beispiele zur Umsetzung nach Bildkategorien
Porträts/Fotos von Personen
TEMPLATE: [Person beschreiben] + [Aktivität/Context] + [Emotion/Stimmung, falls wichtig]
Gute Umsetzung:
✓ „Frau mittleren Alters im Rollstuhl, lächelnd in Konferenzraum“
✓ „Team aus 5 Personen bei Brainstorming-Sitzung mit Whiteboard“
✓ „Arzt mit Stethoskop berät ältere Patientin“
✓ „Kind spielt im Garten mit rotem Ball“
⚠️ Wichtig bei Personen:
→ Wenn Identität wichtig: „CEO Anna Müller spricht an Podium“
→ Wenn nur Symbolhaft: „Unternehmensführung bei Meeting“
→ Bei unbekannter Person: „Mitarbeiterin an Arbeitsplatz“
Diagramme/Grafiken/Charts
TEMPLATE: [Chart-Typ] + [Daten-Thema] + [Wichtige Erkenntnis, 1 Satz]
Gute Umsetzung:
✓ „Balkendiagramm: Umsatzentwicklung Q1-Q4 2025, höchster Wert im Dezember“
✓ „Kreisdiagramm: Marktteilungsverteilung, Konzern A führt mit 42%“
✓ „Liniendiagramm: Besucherzahlen Website 2020-2025, +67% Wachstum“
ℹ️ KOMPLEXE GRAFIKEN:
→ ALT-Text: „Umsatzkurve 2025 mit Spitzen im November, detaillierte Beschreibung im Artikeltext“
→ plus Ausführliche Erklärung IM TEXT daneben oder darunter
Infografiken
TEMPLATE: [Thema] + [Schlüsseldatenpunkte, 1-2 Zahlen] + [Zweck]
Gute Umsetzung:
✓ „Sparrechner: 200 € monatlich = 48.000€ in 20 Jahren“
✓ „Recycling-Prozess: 3 Schritte von Sortierung bis Wiederverwertung“
✓ „Impfkampagne: 5 Millionen Dosen verteilt in 6 Monaten“
ℹ️ Bei langen Infografiken:
ALT-Text: „Infografik zur Recycling-Statistik, siehe Details im folgenden Abschnitt“
PLUS: Vollständige Beschreibung im Fließtext
Produktfotos (E-Commerce)
TEMPLATE: [Farbe] + [Produktname] + [Schlüsselmerkmal] + [Hintergrund, falls relevant]
Gute Umsetzung:
✓ „Schwarze Over-Head-Kopfhörer mit verstellbarem Bügel“
✓ „Weißer Baumwoll-T-Shirt, Frontansicht, Größe M“
✓ „Silberner Laptop 15 Zoll, geöffnet, Tastatur sichtbar“
✓ „Roter Kindersitz für Autos, Seitenprofil“
Falsche Umsetzung:
✗ „Foto von Kopfhörern“ (bildhafte Formulierung vermeiden)
✗ „Hier sind unsere tollen Kopfhörer!“ (zu werblich)
✗ „image_23489.jpg“ (Dateiname nie verwenden!)
Screenshots
TEMPLATE: [Screenshot zeigt] + [Interface-Element] + [Wichtigkeit]
Gute Umsetzung:
✓ „Einstellungen-Menü mit aktivierter Zwei-Faktor-Authentifizierung“
✓ „Login-Fenster mit E-Mail- und Passwortfeldern“
✓ „Navigation-Menü der Website mit Startseite, Produkte, Kontakt“
⚠️ Wenn Text im Screenshot:
→ Text im ALT-Text exakt wiedergeben
→ ODER: Text als echtes HTML-Element statt Bild
Wenn einem nichts einfällt
| Fragen | Was inhaltlich passen könnte |
|---|---|
| Wer? | Person, Gruppe, Tier, Objekt |
| Was? | Tätigkeit, Pose, Interaktion |
| Wo? | Ort, Hintergrund, Umgebung |
| Wann? | Tageszeit, Jahreszeit, Event |
| Warum? | Zweck auf Seite (Symbol für X, Demonstration Y) |
| Wie viel? | Menge, Größe, Skala (falls relevant) |
2-3 Zeilen daraus kombinieren ergibt ALT-Text!
Beispiel:
- WER: Zwei Kinder
- WAS: Spielen mit Sandburg
- WO: Strand bei Sonnenuntergang
- WARUM: Symbol für Familienfreizeit
ergibt „Kinder bauen Sandburg am Strand bei Sonnenuntergang“
Ich weiß nicht, wie ich es beschreiben soll
Ist das Bild klickbar?
Ja → Funktion beschreiben („In den Warenkorb“)
Nein → Weiter
Ist das Bild dekorativ? (rein ästhetisch)
Ja → alt=““ (leer lassen)
Nein → Weiter
Enthält das Bild Text?
Ja → Text exakt wiedergeben ODER als HTML-Text setzen
Nein → Weiter
Sind Menschen darauf?
Ja → [Aktion] + [Umgebung], keine Identifikation bei unbekannt
Nein → Weiter
Ist es ein Produkt?
Ja → Farbe + Name + relevantes Detail (Größe, Zustand)
Nein → Weiter
Ist es eine Grafik/Chart?
Ja → Typ + Thema + Schlüsselerkenntnis
Nein → Weiter
Bleibt nichts übrig?
KI-Tool ausprobieren + manuell anpassen
Oder: „Bildbeschreibung fehlt“ als Platzhalter + später nachholen
Häufige Fehler & Korrekturen
| Falsch | Korrektur | Warum besser |
|---|---|---|
| Bild von Produkt | Schwarze Lautsprecherbox | „Bild von“ redundant |
| Unser tolles Angebot! | Kühlschrank 300€, 10% Rabatt | Sachlich, informativ |
| Hier klicken | Zur Produktdetailseite | Funktion klarer |
| logo.png | Firmenname XYZ | Sinnvoll für Screen Reader |
| komplett leer bei informativem Bild | Kurze Beschreibung Fehlende Information | |
| Langes Diagramm mit Daten… (250+ Zeichen) | Umsatz 2025 +25%, Detailbeschreibung im Text | Kürzer + Verweis |
| Mitarbeiter mit guter Stimmung | Teamleiterin präsentiert Quartalsergebnisse | Neutral, sachlich |
Checkliste zur Qualitätssicherung
Vor der Speicherung des ALT-Textes prüfen:
Wenn ALLE Häkchen gesetzt: Fertig!
Zusammenfassung
- Beginne mit maximal 125 Zeichen
- Templates (wie oben unter „Beispiele zur Umsetzung nach Bildkategorien“) statt „freies Schreiben“
- Nutze KI-Tools als Drafting-Hilfe + menschlicher Prüfer
- Mit 3 Bildern am Tag üben. Nach 2 Wochen wird es leichter.
- Frage dich: „Was muss ein blinder Nutzer wissen?“ Nicht: „Wie sehe ich das?“
- ALT-Text ist KEINE Kunstbeschreibung
- ALT-Text ist INFORMATION für Screen Reader-Nutzer
- JEDE Beschreibung besser als KEINE
Unterschied von ALT-Text und Bildbeschreibung in WordPress
ALT-Text (Alternativer Text)
- Barrierefreiheit
Wird von Screenreadern für sehbehinderte Nutzer vorgelesen. - SEO
Suchmaschinen nutzen ihn zum Verständnis des Bildinhalts. - Fallback
Wird angezeigt, wenn das Bild nicht laden kann. - Stil
Kurz, prägnant, beschreibend (ca. 5-15 Wörter empfohlen).
Bildbeschreibung
- Darstellung
Oft als Caption/Untertitel unter dem Bild sichtbar. - Details
Kann länger und ausführlicher sein. - Kontext
Bietet zusätzlichen Hintergrund zum Bild. - Weniger kritisch
Nicht unbedingt erforderlich für Zugänglichkeit.
Praxis-Empfehlung
- ALT-Text immer ausfüllen
Essentiell für Barrierefreiheit und SEO. - Beschreibung optional
Verwendung, wenn zusätzlicher Kontext sinnvoll ist. - NICHT duplizieren
Die Inhalte sollten unterschiedlich sein, da verschiedene Zwecke erfüllt werden.
Siehe auch die Erklärung WordPress und die Bild-Metadaten
