Alt-Tags sind mehr als nur ein Häkchen auf der Accessibility-Checkliste. Sie sind die Brücke zwischen visuellen Inhalten und allen Nutzern – egal ob mit oder ohne Behinderung.
Wie setzt man ein Alt-Text für Logos richtig?
Lass uns direkt mit einem Praxisbeispiel starten. Stell Dir vor, Du hast eine Website mit einem Logo im Header. Wie beschreibst Du das? Ich erklär es Dir an unserem Logo im Header:
So sieht unser Alt-Tag aktuell aus:
<a href="/" title="Lightweb Media">
<img
alt="Lightweb Media"
src="https://lightweb-media.de/.../lightweb-media-logo.svg"
>
</a>
Perfekte wäre es aber so:
<a href="/" title="Lightweb Media Logo - Zurück zur Startseite">
<img
alt="lightweb media logo, zur startseite"
src="logo-lwm.svg"
/>
</a>
Yes, Alt-Tags zu überarbeiten ist Arbeit. Wir sind auch noch nicht soweit..kommt aber! Wir nutzen bereits auf vielen unserer Websites AltText.ai als WordPress-Plugin. Du kannst auch Scripte wie die von Ahrefs.com nutzen, die beim rendern Deiner Seite die Einstellungen überschreiben. So kannst Du an einem zentralen Platz optimieren, ohne technische Kenntnisse. Solche Tools werden immer mehr mit KI-Assistenten ausgestattet.
Was macht diesen Alt-Text so besonders?
- Er nennt den Site-Namen
- Er erklärt, wohin der Link führt
- Er informiert über den Bildtyp (Logo)
Allgemeine Alt-Tag Regeln für Bilder
1. Beschreibe, was Du siehst
Dein Alt-Text sollte genau beschreiben, was auf dem Bild zu sehen ist. Kein Bla-bla, sondern knackige Information.
Beispiele:
- ✅ „Schwarzer Hund rennt über grüne Wiese“
- ❌ „Tier“
- ❌ „Bild123.jpg“
2. Kontext ist King
Denk immer daran: Warum ist dieses Bild auf Deiner Seite? Was will es dem Nutzer vermitteln?
3. SEO-Boost
Alt-Texts helfen Google, Deine Bilder zu verstehen. Sie sind weiterhin ein subtiler aber kraftvoller SEO-Trick.
Tricks für Maximum Accessibility
- Vermeide Redundanzen wie „Bild von…“ oder „Ein Foto von…“
- Halte es kurz und präzise
- Sei spezifisch
Wann lass ich den Alt-Text weg?
Nicht jedes Bild braucht einen Alt-Text. Bei dekorativen Bildern kannst Du alt="" verwenden. Das signalisiert Screenreadern: „Ignoriere dieses Bild“.
Quellen & Inspiration
Teste Deine Alt-Texts, indem Du sie Dir laut vorliest. Klingt es komisch? Dann überarbeiten!
