Kurz erklärt
Alt-Text ist der Inhalt des alt-Attributs in <img>-Tags. Er beschreibt das Bild für:
- Screenreader-Nutzer: Blinde und sehbehinderte Menschen hören den Alt-Text
- Browser bei Ladefehlern: Alt-Text erscheint, wenn Bild nicht lädt
- Suchmaschinen: Google nutzt Alt-Text, um Bilder zu verstehen und zu ranken
- Nutzer mit deaktivierten Bildern: Manche Browser-Settings oder langsame Verbindungen
Guter Alt-Text – Die Prinzipien
1. Beschreibe den Inhalt, nicht das Offensichtliche
❌ Schlecht: alt="Bild"
❌ Schlecht: alt="Foto"
✓ Gut: alt="Frau tippt auf Laptop in modernem Büro"
2. Kontext ist entscheidend
Gleiches Bild, unterschiedliche Kontexte:
Kontext: Artikel über Homeoffice
<img alt="Frau arbeitet von zuhause mit Laptop und Kaffee" src="homeoffice.jpg">
Kontext: Produktseite für Laptop
<img alt="MacBook Air 13 Zoll in Space Grau, aufgeklappt" src="macbook.jpg">
3. Prägnant aber informativ
- ✓ Ideal: 125 Zeichen oder weniger
- ✓ Screenreader schneiden oft bei 125 Zeichen ab
- ❌ Zu kurz:
alt="Laptop" (zu unspezifisch)
- ❌ Zu lang:
alt="Ein silberner Laptop der Marke Apple, Modell MacBook Air mit 13-Zoll-Display in der Farbe Space Grau, aufgeklappt auf einem weißen Schreibtisch neben einer Kaffeetasse und einem Notizbuch..." (zu ausschweifend)
4. Keine Redundanz
❌ Schlecht:
<p>Unser neues MacBook Air</p>
<img alt="Unser neues MacBook Air" src="macbook.jpg">
✓ Gut:
<p>Unser neues MacBook Air</p>
<img alt="13 Zoll Display in Space Grau, aufgeklappt" src="macbook.jpg">
Spezielle Bild-Typen
1. Dekorative Bilder – Leeres alt=""
Regel: Bilder ohne informationellen Wert erhalten alt=""
<!-- Dekorative Trennlinie -->
<img alt="" src="divider.png">
<!-- Icon neben Text, der bereits alles aussagt -->
<button>
<img alt="" src="trash-icon.svg">
Löschen
</button>
Wichtig: alt="" (leer) ≠ fehlendes alt-Attribut
alt="" – Screenreader überspringt Bild (korrekt für dekorativ)- Fehlendes
alt – Screenreader liest Dateinamen (verwirrend)
2. Icons & UI-Elemente
Icon-Only-Buttons brauchen Alt-Text:
<!-- Schlecht: Icon ohne Kontext -->
<button><img src="search.svg"></button>
<!-- Gut: Alt-Text beschreibt Aktion -->
<button><img alt="Suchen" src="search.svg"></button>
<!-- Besser: aria-label am Button -->
<button aria-label="Suchen">
<img alt="" src="search.svg" aria-hidden="true">
</button>
3. Komplexe Grafiken & Diagramme
Kurzer Alt + Langbeschreibung:
<figure>
<img
alt="Balkendiagramm: Website-Traffic 2024"
src="chart.png"
aria-describedby="chart-details"
>
<figcaption id="chart-details">
Der Traffic stieg von Januar (50.000 Besucher) bis Dezember
(120.000 Besucher) kontinuierlich. Höchster Anstieg im März (+20%).
</figcaption>
</figure>
4. Text in Bildern
Regel: Bild-Text muss im Alt-Text stehen
<!-- Infografik mit Text -->
<img
alt="5 Schritte zu besserer SEO: 1. Keywords recherchieren,
2. On-Page optimieren, 3. Content erstellen, 4. Backlinks aufbauen,
5. Performance messen"
src="seo-infographic.jpg"
>
Best Practice: Text in Bildern vermeiden – echter HTML-Text ist barrierefreier und SEO-freundlicher.
5. E-Commerce-Produktbilder
Formel: Produktname + wichtigste Merkmale
<!-- Gut für SEO & Accessibility -->
<img
alt="Nike Air Max 90 Herrenschuh, Weiß/Schwarz, Größe 42"
src="nike-air-max-90.jpg"
>
Mehrere Produktbilder:
<!-- Hauptbild -->
<img alt="Nike Air Max 90, Seitenansicht links" src="side.jpg">
<!-- Detailbilder -->
<img alt="Nike Air Max 90, Sohlendetail" src="sole.jpg">
<img alt="Nike Air Max 90, Innenfutter" src="inside.jpg">
6. Logos
Firmenlogo im Header:
<a href="/">
<img alt="Wolf-Agents Startseite" src="logo.svg">
</a>
Logo in Referenzen/Partner-Section:
<img alt="Google Logo" src="google-logo.svg">
7. Fotos von Personen
Kontextabhängig:
Team-Seite:
<img alt="Dr. Anna Schmidt, Rechtsanwältin für Arbeitsrecht" src="anna.jpg">
Testimonial:
<img alt="Max Mustermann" src="max.jpg">
<blockquote>Beste Beratung ever!</blockquote>
Häufige Fehler
❌ “Bild von…”: alt="Bild von einem Laptop" → unnötig, kürze zu alt="Laptop"
❌ Dateinamen als Alt: alt="IMG_1234.jpg" → beschreibe Inhalt
❌ Keyword-Stuffing: alt="Laptop kaufen günstig Laptop online bestellen Laptop" → SEO-Spam
❌ Komplett fehlendes alt: <img src="bild.jpg"> → WCAG-Verstoß
❌ Nicht-dekorative Bilder mit alt="": Informative Bilder brauchen Beschreibung
Alt-Text für SEO
Google’s Bild-Ranking-Faktoren:
- Alt-Text: Beschreibt Bildinhalt
- Dateiname:
nike-air-max-90.jpg > IMG_1234.jpg
- Umliegender Text: Kontext auf der Seite
- Bildgröße & Format: WebP/AVIF für Ladezeiten
- Strukturierte Daten: Product Schema mit Bild-URL
Best Practice:
<!-- SEO-optimiert -->
<img
alt="Nike Air Max 90 Sneaker in Weiß/Schwarz"
src="nike-air-max-90-weiss-schwarz.webp"
loading="lazy"
width="800"
height="600"
>
Alt-Text testen
Automatische Tests:
- axe DevTools: Prüft fehlende Alt-Texte
- WAVE: Markiert Bilder ohne Alt
- Lighthouse: “Images do not have alt attributes”
Manuelle Prüfung:
- Screenreader-Test (NVDA, VoiceOver)
- Browser DevTools: Images ohne Alt filtern
- “Bilder deaktivieren” im Browser → Alt-Texte sollten Sinn ergeben
Chrome DevTools:
- Elements →
<img> auswählen
- Accessibility Tab → “Computed Properties” → “Name” prüfen
Alt-Text-Generator-Tools (mit Vorsicht)
AI-Tools (GPT Vision, Microsoft Azure Computer Vision):
- ✓ Schnell für große Bildmengen
- ✗ Oft generisch (“A person using a laptop”)
- ✗ Kontext fehlt
- Empfehlung: Als Basis, dann manuell anpassen
Nächste Schritte
- Alle
<img>-Tags mit alt-Attribut versehen
- Dekorative Bilder:
alt="" setzen
- Produktbilder: Produktname + Hauptmerkmale
- axe DevTools installieren und fehlende Alt-Texte finden
- Screenreader-Test: Ergeben Alt-Texte Sinn im Kontext?