Barrierefreie Bilder in der Praxis — alt/Dekorativ/Diagramm 2025

Einführung

SEO und Barrierefreiheit überschneiden sich, verfolgen aber unterschiedliche Ziele. Dieser Beitrag fokussiert Alt-Texte, die für Screenreader funktionieren, und grenzt dekorative, informative und Diagramm-Bilder sauber ab. Für SEO-Aspekte siehe Bild-SEO 2025 — Alt-Text, strukturierte Daten und Sitemaps in der Praxis.

Grundprinzipien für alt

• Dekorativ: leeres alt (alt=""), damit Screenreader schweigen.
• Informativ: Kernaussage kurz und präzise (Substantiv zuerst), ohne Fließtext zu wiederholen.
• Diagramme/Charts: alt liefert die Quintessenz; Zahlen/Einheiten in Fließtext oder Caption.

Häufige Fälle

• Verlinkte Bilder: alt benennt das Ziel bzw. den Zweck des Links. Dateinamen oder ausschweifende Beschreibungen vermeiden.
• OGP-Vorschaubilder: duplizieren oft den Seiteninhalt; alt minimal halten. Design-Hinweise: OGP-Thumbnail-Design 2025 — Lesbar, leicht, im Frame.

Implementierungsfallen

• role="presentation" nicht überstrapazieren; semantisches HTML mit passendem alt ist vorzuziehen.
• Überlieferung vermeiden: srcset/sizes kombinieren. Details: Responsive Bildgestaltung 2025 — Praxisleitfaden zu srcset/sizes.

Praxis-Tipps

• Lesbarkeit von Diagrammen und Komposition mit Image Cropper prüfen.
• Responsive Quellen mit Srcset Generator erzeugen.
• OGP-Thumbnails mit OGP-Thumbnail-Maker erstellen.

Erste Entscheidung: dekorativ, informativ oder UI

1. Dekorativ (nur Atmosphäre) → alt="". Keine zusätzlichen Rollen nötig.
2. Informativ (zum Verständnis nötig) → Kernaussage knapp; Wiederholungen vermeiden.
3. UI-Icons/Buttons → Alt/Accessible Name entspricht dem sichtbaren Label.

Kontrakt für alt

• Alt ist ein Satz, der an Ort und Stelle vorgelesen Sinn ergibt.
• Wörter wie „Bild/Foto“ sind meist redundant.
• Bei Daten-Grafiken alt = Quintessenz+Einheiten; lange Beschreibung in Text/Caption.

Schlechte vs. gute alt-Beispiele

• Schlecht: alt="Graph"

  • Was fehlt: Metrik und Trend.

• Gut: alt="Monatlicher Umsatz 2024; Anstieg in Q4"

• Schlecht: alt="Button"

• Gut: alt="In den Warenkorb" (für UI-Button)

• Schlecht: alt="Firmenlogo"

• Gut: alt="Unified Image Tools" (bei Link am Linkzweck ausrichten)

Komplexe Diagramme (Langtext woanders)

• Alt bleibt kurz; Detailzahlen/Anmerkungen nahe der Grafik.
• <figcaption> für Kontext nutzen; Screenreader kommen so besser klar als mit überladenem alt.

Beispiel (Next.js)

<figure>
  <Image src="/charts/sales-2024.png" alt="Monatlicher Umsatz 2024; Anstieg in Q4" width={960} height={540} />
  <figcaption>Umsatz steigt ab Juli. Einheit: 10K.</figcaption>
</figure>

UI-Icons und Accessible Names

• Reines Deko-Icon: alt="" und aus dem Accessibility-Tree ausblenden.
• Icon als einziges Inhaltselement einer Kontrolle: aria-label oder sichtbarer Text.
• Alt und aria-label nicht doppeln; einen Accessible Name wählen.

Performance und A11y gemeinsam denken

• LCP-Bild priorisieren/preloaden, alt dennoch knapp halten.
• sizes/srcset optimieren; Bandbreite ist auch eine A11y-Frage.
• Textkontrast beachten; statt Text-im-Bild echten HTML-Text bevorzugen.

OGP/Social-Bilder

• Alt kurz halten, um Wiederholung mit Seiteninhalt zu vermeiden.
• Viele Vorschauen lesen alt nicht; die Quintessenz im Fließtext sichern.
• Details: OGP-Thumbnail-Design 2025 — Lesbar, leicht, im Frame.

Test & Verifikation

• Screenreader (NVDA/VoiceOver): Lesereihenfolge/Redundanz prüfen.
• Automatisiert (Axe/Pa11y): leere alt und sinntragende Bilder erkennen.
• Auf echten Seiten: Tastaturfokus und Verhalten bei Bildladefehlern.

Checkliste vor dem Go-Live

• Deko-Bilder sind mit alt="" stummgeschaltet.
• Informative Bilder haben eine knappe Kernaussage ohne Duplikate.
• UI-Icons haben einen Accessible Name gemäß Label.
• Diagramme: Einheiten/Trends im Text; alt bleibt kurz.
• Responsive Auslieferung (srcset/sizes, Format, Preload) behindert A11y nicht.

Ähnliche Artikel

• Bild-SEO 2025 — Alt-Text, strukturierte Daten und Sitemaps in der Praxis
• Responsive Bildgestaltung 2025 — Praxisleitfaden zu srcset/sizes
• Srcset Generator