Ein Bild lädt nicht, wird von einem Screenreader nicht erkannt oder bleibt für Menschen mit eingeschränktem Sehvermögen unverständlich. Genau hier helfen alt tags, also kurze Textalternativen, die Inhalt oder Funktion eines Bildes vermitteln. Ich zeige, wie gute Alternativtexte formuliert werden, wann alt="" richtig ist und wie sich die Lösung in HTML, CMS und modernen Frameworks sauber umsetzen lässt.
Gute Alternativtexte verbinden Barrierefreiheit, Kontext und saubere Technik
- Informative Bilder brauchen eine kurze Beschreibung ihrer wesentlichen Aussage.
-
Dekorative Bilder erhalten ein leeres Attribut mit
alt="". - Bei verlinkten Bildern beschreibt der Text das Ziel oder die Aktion, nicht nur das Motiv.
- Keyword-Stuffing schadet der Nutzerfreundlichkeit und bringt keinen nachhaltigen SEO-Vorteil.
- In Frameworks sollte der Alternativtext als Pflichtfeld in Komponenten und Content-Modellen angelegt werden.
Was ein Alternativtext auf der Website wirklich leistet
Das Attribut alt gehört zum HTML-Element
Für Screenreader ist der Alternativtext oft der einzige Hinweis darauf, welche Rolle ein Bild auf einer Seite spielt. Auch bei langsamer Verbindung, deaktivierten Bildern oder einem fehlerhaften Bildpfad bleibt die Information verfügbar. Die W3C beschreibt deshalb nicht nur das Vorhandensein des Attributs als wichtig, sondern vor allem seine inhaltliche Eignung.
Ein guter Text beschreibt nicht automatisch jedes sichtbare Detail. Er vermittelt das, was für das Verständnis der Seite zählt. Bei einem Artikel über agile Zusammenarbeit ist „Team diskutiert an einem Konferenztisch“ sinnvoll. Auf einer Seite über Bürogestaltung könnten dagegen Raumaufteilung, Möbel oder Beleuchtung wichtiger sein.
Suchmaschinen können den Alternativtext gemeinsam mit dem umgebenden Inhalt nutzen, um ein Bild einzuordnen. Ich sehe SEO jedoch als positiven Nebeneffekt. Wer zuerst für Menschen formuliert, erhält meistens auch die bessere Suchmaschinenbasis.
Der Zweck des Bildes entscheidet über den richtigen Text
Bevor ich einen Alternativtext schreibe, stelle ich mir eine einfache Frage: Was würde auf der Seite fehlen, wenn das Bild verschwände? Die Antwort entscheidet über die Formulierung.
| Bildtyp | Richtige Umsetzung | Beispiel |
|---|---|---|
| Informativ | Die wichtigste Aussage des Bildes kurz beschreiben. | alt="Liniendiagramm zeigt steigende Zugriffszahlen im zweiten Quartal" |
| Dekorativ | Leeres Attribut verwenden, damit Screenreader das Bild überspringen. | alt="" |
| Funktional | Aktion oder Ziel des Links beschreiben. | alt="Warenkorb öffnen" |
| Komplex | Kurze Einordnung mit ausführlicher Erklärung im Text oder in einer Tabelle kombinieren. | alt="Umsatzentwicklung von 2022 bis 2025, Details in der Tabelle darunter" |
Dekorative Bilder brauchen keine erfundene Beschreibung
Ein Farbverlauf, ein ornamentales Muster oder ein Icon neben einer bereits beschrifteten Überschrift trägt oft keine eigene Information. In diesem Fall ist alt="" die korrekte Lösung. Das Attribut sollte dabei nicht fehlen, denn ein fehlendes alt kann dazu führen, dass Screenreader stattdessen den Dateinamen vorlesen.
Bei Links zählt die Funktion
Ein Pfeil-Icon als Link sollte nicht mit „Pfeil nach rechts“ beschrieben werden, wenn es tatsächlich zur nächsten Seite führt. Besser ist alt="Nächste Seite". Bei einem Suchsymbol passt alt="Suche öffnen" besser als eine rein visuelle Beschreibung.
Diagramme und Infografiken brauchen mehr als einen Satz
Ein komplexes Diagramm lässt sich selten vollständig in einem kurzen Attribut erklären. Ich verwende deshalb eine knappe Einordnung im alt-Text und stelle die entscheidenden Werte zusätzlich als echten HTML-Text oder Tabelle bereit. So bleibt die Information nicht auf eine einzige Wahrnehmungsform beschränkt.
So formuliere ich Alternativtexte, die wirklich verständlich sind
Ein brauchbarer Text ist meistens kürzer, als viele denken. Er sollte das Wesentliche nennen, ohne mit „Bild von“ oder „Foto von“ zu beginnen. Screenreader kündigen ein Bild in der Regel bereits als solches an.
Den Kontext vor die Bilddetails stellen
Dasselbe Foto kann je nach Seite unterschiedliche Texte benötigen. Ein Bild mit einer Person an einem Laptop könnte „Webentwicklerin testet eine responsive Website“ heißen, wenn es einen Beitrag über Frontend-Tests begleitet. Für einen Artikel über ergonomische Arbeitsplätze wäre „Person arbeitet an einem höhenverstellbaren Schreibtisch“ wahrscheinlich hilfreicher.
Konkrete Verben statt leerer Beschreibungen verwenden
„Mann mit Laptop“ ist nicht falsch, bleibt aber blass. „Entwickler prüft den Quellcode auf einem zweiten Monitor“ vermittelt eine deutlich klarere Situation. Ich bevorzuge Formulierungen, die eine Handlung oder Aussage transportieren.
Text im Bild nicht unterschlagen
Wenn ein Bild eine wichtige Überschrift, einen Preis oder einen Hinweis enthält, muss diese Information auch in der Alternative vorkommen. Bei Logos reicht häufig der Markenname. Ist das Logo gleichzeitig ein Link zur Startseite, sollte der Text die Funktion berücksichtigen, etwa alt="Metawebart.de Startseite".
Keine Keywords aneinanderreihen
Ein Text wie „Webentwicklung Website SEO Framework Barrierefreiheit Bild Grafik Deutschland“ beschreibt kein Bild und klingt für Menschen wie Spam. Google weist ebenfalls darauf hin, dass überfüllte Attribute die Nutzererfahrung verschlechtern können. Ein präziser Satz im passenden Kontext ist die bessere Strategie.
Die Länge am Informationswert ausrichten
Es gibt keine verlässliche Universalzahl für die perfekte Länge. Ein kleines Icon braucht oft zwei oder drei Wörter, ein aussagekräftiges Foto vielleicht zehn bis fünfzehn. Bei einer komplexen Visualisierung gehört die ausführliche Erklärung nicht in ein überladenes Attribut, sondern in den sichtbaren Seiteninhalt.
Alt-Texte in Frameworks und Komponenten sauber pflegen
Technisch ist das Attribut einfach. In größeren Projekten scheitert die Qualität jedoch selten am HTML, sondern an unklaren Zuständigkeiten und fehlenden Pflichtfeldern. Der Alternativtext sollte dort gepflegt werden, wo auch Bildquelle, Bildnachweis und Bildunterschrift verwaltet werden.
HTML bleibt die verlässliche Grundlage
Bei responsiven Bildern mit srcset und
Komponenten sollten fehlende Inhalte sichtbar machen
In React, Vue oder Svelte gehört alt als Prop zur Bildkomponente. Für informative Bilder kann die Komponente einen Pflichtwert verlangen. Für dekorative Bilder sollte ausdrücklich alt="" übergeben werden, damit niemand die Entscheidung stillschweigend dem Browser überlässt.
Bei einem Bild-Renderer mit dynamischen Daten ist ein automatisch erzeugter Dateiname kein guter Ersatz. Ein Fallback wie „Bild“ verhindert zwar ein leeres Feld, löst aber nicht das Zugänglichkeitsproblem. Ich lasse fehlende Inhalte in der Entwicklungsumgebung lieber als Fehler oder Warnung erscheinen.
CMS und Medienbibliotheken richtig modellieren
Ein einziges Feld namens „Beschreibung“ sorgt häufig für Verwirrung. Besser sind getrennte Felder für Alternativtext, Bildunterschrift und interne Notizen. Die Bildunterschrift darf ausführlicher oder redaktioneller sein, während die Alternative die Funktion des Bildes für nicht visuelle Nutzer vermittelt.
Das gleiche Bild kann auf verschiedenen Seiten unterschiedliche Bedeutungen haben. Deshalb sollte ein global gespeicherter Standardtext überschreibbar bleiben. Eine Produktaufnahme im Shop braucht andere Informationen als dasselbe Motiv in einem Blogbeitrag.
SEO, Performance und Qualitätssicherung gehören zusammen
Alternativtexte ersetzen keine gute Bildoptimierung. Dateigröße, moderne Formate, passende Dimensionen und responsive Auslieferung beeinflussen die Ladezeit. Das alt-Attribut bleibt trotzdem wichtig, weil es auch dann greift, wenn die technische Auslieferung fehlschlägt.
CSS-Hintergrundbilder eignen sich für rein dekorative Flächen. Wenn ein Hintergrundbild jedoch eine Information trägt, sollte ich es als semantisches background-image eingebunden wird, besitzt sonst keine gleichwertige Textalternative.
Lesen Sie auch: Redux erklärt: Wann zentrale Zustandsverwaltung sinnvoll ist
Ein praktischer Test in fünf Minuten
- Prüfen, ob jedes informative oder funktionale Bild ein passendes
alt-Attribut besitzt. - Dekorative Bilder auf
alt=""setzen. - Die Seite ohne geladene Bilder betrachten und kontrollieren, ob die Aussage erhalten bleibt.
- Mit einem Screenreader oder einem Accessibility-Scanner testen, ob Texte doppelt oder unnötig vorgelesen werden.
- Bei Diagrammen, Karten und Infografiken nach einer vollständigen Text- oder Tabellenalternative suchen.
Automatische Prüfungen finden fehlende Attribute zuverlässig, bewerten aber nicht immer den Inhalt. „Person“ kann technisch vorhanden und trotzdem redaktionell unbrauchbar sein. Die letzte Qualitätskontrolle braucht deshalb den Seitenkontext und einen kurzen menschlichen Blick.
Ein kleiner Alt-Text-Check vor jedem Deployment
Ich prüfe vor der Veröffentlichung nicht nur, ob ein Feld ausgefüllt ist, sondern ob die Beschreibung ihren Zweck erfüllt. Ein informatives Bild muss seine Aussage vermitteln, ein verlinktes Bild sein Ziel nennen und ein dekoratives Bild darf den Lesefluss nicht stören.
Wer diese Entscheidungen bereits in Designsystem, CMS und Komponentenbibliothek abbildet, verhindert viele Fehler automatisch. So wird aus einem kleinen HTML-Attribut ein verlässlicher Bestandteil einer zugänglichen, verständlichen und technisch robusten Website.
