Alt-Text vs. title-Attribut: Der Unterschied

Kurz erklärt: Das alt-Attribut liefert die Textalternative für Bilder (für Screenreader, Pflicht). Das title-Attribut zeigt Tooltips beim Hover (für sehende Nutzer, optional). Sie haben verschiedene Zwecke und ersetzen einander nicht.

Einer der häufigsten Web-Anfänger-Fehler: <img title="..."> ohne alt-Attribut. Das ist doppelt falsch – title ist nicht barrierefrei, alt fehlt komplett.

Alt-Attribut: Pflicht für Screenreader

Das alt-Attribut ist die primäre Textalternative für Bilder. Screenreader lesen es vor. Suchmaschinen nutzen es für Bild-Ranking. Es wird angezeigt, wenn das Bild nicht lädt. WCAG 1.1.1 Pflicht (Level A). BFSG-verbindlich.

Title-Attribut: Tooltip

Das title-Attribut erzeugt beim Maus-Hover einen Tooltip. Nur sehende Maus-Nutzer sehen ihn. Screenreader lesen title meist NICHT vor (Standard-Verhalten). Touch-Geräte zeigen Tooltips nicht. Tastatur-Nutzer sehen sie nicht. Fazit: title ist unzuverlässig, für Barrierefreiheit irrelevant.

Wann welches Attribut?

alt: IMMER bei . Inhalt abhängig: beschreibend für informative Bilder, leer für dekorative.
title: selten nützlich. Evt. bei Links oder Buttons für Zusatzinfo, die sehende Nutzer brauchen – aber besser sichtbaren Text nutzen.

Code-Beispiele

Richtig:
<img src="logo.svg" alt="OceanSphere Logo">

Falsch:
<img src="logo.svg" title="OceanSphere Logo"> (title statt alt)

Sehr falsch:
<img src="logo.svg"> (gar nichts)

Aria-Label als Spezialfall

Für SVG-Icons und komplexe interaktive Grafiken ist aria-label oft besser als alt/title. <svg role="img" aria-label="Menü">...</svg>

Wird geprüft: bf-check prüft, ob img-Tags ein alt-Attribut haben (auch leer ist OK für dekorative Bilder).

Wie steht deine Webseite in diesem Punkt da?

Kostenloser Scan gegen 15 WCAG-2.1-AA-Kriterien – inkl. Alt-Text vs. title-Attribut-Check.

Jetzt Webseite prüfen →