Bilder sind ein wesentlicher Bestandteil jeder modernen Website. Sie erwecken Inhalte zum Leben, erzählen Geschichten und sorgen für die richtige Stimmung. Doch was passiert, wenn Ihre Besucher:innen die Bilder nicht sehen können? Ob aufgrund einer Sehbehinderung, technischer Probleme oder einer langsamen Internetverbindung – genau hier kommen Alt-Texte, ins Spiel. Doch was macht einen guten Alt-Text aus, und wie gehen Sie mit dekorativen Bildern um? In diesem Beitrag klären wir diese und viele weitere Fragen.
Was sind Alt-Texte?
Alt-Texte, auch als Alt-Tags, Alternativtexte oder „alternative Beschreibungen“ bekannt, sind kurze Texte, die den Inhalt oder die Funktion eines Bildes beschreiben. Sie wurden ursprünglich für blinde oder sehbehinderte Menschen entwickelt, um mithilfe von Screenreadern zu erklären, was auf einer Website zu sehen ist. Heute sind sie aber auch ein wichtiges Werkzeug für Suchmaschinenoptimierung (SEO) und die allgemeine Benutzerfreundlichkeit.
Alt-Texte werden im HTML-Code eines Bildes im Attribut alt=““ hinterlegt. Hier ein einfaches Beispiel:
<img src=“golden-retriever.jpg“ alt=“Golden Retriever mit rotem Halsband auf einer grünen Wiese“>
Warum sind Alt-Texte so wichtig?
Alt-Texte sind weit mehr als nur eine technische Spielerei – ihre Bedeutung reicht von der Barrierefreiheit bis hin zur Suchmaschinenoptimierung und verbessert nicht zuletzt die allgemeine Nutzererfahrung.
Ein zentraler Aspekt ist die Barrierefreiheit. Alt-Texte ermöglichen Menschen mit Sehbehinderungen oder Blindheit den Zugang zu visuellen Informationen, die sie sonst nicht wahrnehmen könnten. Mithilfe von zum Beispiel Screenreadern, die Texte vorlesen, erfahren Nutzer, welche Inhalte Bilder, Icons oder Grafiken vermitteln. Ohne Alt-Texte bleiben diese Informationen verborgen, was nicht nur eine große Gruppe potenzieller Nutzer ausschließt, sondern auch gegen gesetzliche Vorgaben verstoßen kann.
Dies wird 2025 insbesondere durch das Barrierefreiheitsstärkungsgesetz (BFSG) der Fall sein. Ab dem 28. Juni 2025 sind viele privatwirtschaftliche Unternehmen dazu verpflichtet, ihre Websites barrierefrei zu gestalten. Dazu gehören auch Alt-Texte für sogenannten „Nicht-Text-Inhalt“. Sie machen visuelle Inhalte für Menschen mit Sehbehinderungen zugänglich und sorgen gleichzeitig dafür, dass Ihre Website den gesetzlichen Vorgaben entspricht.
Mehr dazu erfahren Sie in unserem Beitrag zum BFSG.
Ein weiterer, oft übersehener Vorteil von Alt-Texten ist ihre Rolle in der Suchmaschinenoptimierung (SEO). Suchmaschinen wie Google oder Bing können die Inhalte von Bildern nicht „sehen“. Sie sind darauf angewiesen, dass Entwickler:innen und Website-Betreiber:innen die Bildinhalte in Textform bereitstellen. Gut geschriebene Alt-Texte helfen Suchmaschinen, den Kontext eines Bildes zu verstehen und die Relevanz für bestimmte Suchanfragen zu bewerten. Dies kann dazu beitragen, dass Ihre Website in den Suchergebnissen besser sichtbar wird und mehr organischen Traffic generiert. Besonders bei Onlineshops, die oft viele Produktbilder verwenden, können optimierte Alt-Texte einen echten Wettbewerbsvorteil darstellen.
Auch außerhalb der Barrierefreiheit, gesetzlichen Vorgaben und SEO spielen Alt-Texte eine wichtige Rolle für die Nutzerfreundlichkeit. Es kommt immer wieder vor, dass Bilder aus technischen Gründen nicht geladen werden – sei es durch langsame Internetverbindungen oder fehlerhafte Serveranfragen. In solchen Fällen erscheint der Alt-Text als Ersatz, sodass Nutzer trotzdem wissen, welche Information das Bild vermitteln sollte. Dies trägt zu einer besseren Nutzererfahrung bei und verhindert Frustration.
Was macht einen guten Alt-Text aus?
- Prägnant und beschreibend:
Ein Alt-Text sollte kurz und klar beschreiben, was auf dem Bild zu sehen ist. Beschränken Sie den Alt-Text auf 125 Zeichen oder weniger, damit er vom Screenreader vollständig vorgelesen wird.
Vermeiden Sie dabei unnötige Details.
– Sehr schlecht: alt=“Bild von einem Hund“
– Akzeptabel: alt=“Hund auf Wiese“
– Besser: alt=“Golden Retriever auf einer Wiese“
– Am besten: alt=“Golden Retriever mit rotem Halsband auf einer grünen Wiese“ - Kontext berücksichtigen: Überlegen Sie, welche Funktion das Bild auf Ihrer Seite erfüllt. Soll es ein Produkt darstellen, eine Handlung erklären oder lediglich eine Atmosphäre schaffen?Beispiel: Für einen Blogbeitrag über Fahrradfahren könnten Sie schreiben: alt=“Frau auf einem Retro-Rennrad fährt durch eine goldene Herbstlandschaft“
- Keine Floskeln: Formulierungen wie „Bild von“ oder „Grafik von“ sind unnötig. Screenreader erkennen durch den HTML-Code automatisch, dass es sich um ein Bild handelt. Handelt es sich um ein Logo, Comic oder Gemälde, sind diese Informationen jedoch für den Nutzer wertvoll und sollten daher mit in den Alt-Text aufgenommen werden.
- Keywords mit Bedacht einsetzen: Alt-Texte sind auch ein SEO-Tool. Integrieren Sie relevante Keywords, aber übertreiben Sie es nicht. Bleiben Sie natürlich und vermeiden Sie Keyword-Stuffing.
Was tun bei dekorativen Bildern?
Nicht alle Bilder benötigen einen Alt-Text. Manche Bilder dienen rein ästhetischen Zwecken und tragen keinen inhaltlichen Mehrwert bei. Dazu gehören beispielsweise Hintergrundmuster, Zierelemente oder dekorative Trennlinien.
Wie gehen Sie damit um?
- Für dekorative Bilder muss ein Alt-Text vorhanden sein, aber er sollte leer bleiben (alt=““).
- Ein leerer Alt-Text signalisiert Screenreadern, dass das Bild ignoriert werden kann.
- Fügen Sie dekorative Bilder niemals mit einem Alt-Text ein, der sie beschreibt – das würde Nutzer von Screenreadern nur unnötig ablenken.
Beispiel:
<img src="background-pattern.jpg" alt="">
Tipp: In WordPress können Sie in der Mediathek einstellen, ob ein Bild einen Alt-Text benötigt oder dekorativ ist.
Häufige Fehler und wie Sie sie vermeiden
- Fehlende Alt-Texte: Jedes informative Bild sollte einen Alt-Text haben. Bilder ohne Alt-Texte können Ihre Website unzugänglich machen.
- Überladene Alt-Texte: Vermeiden Sie es, jeden kleinen Aspekt eines Bildes zu beschreiben. Konzentrieren Sie sich auf das Wesentliche.
- Irreführende Alt-Texte: Der Alt-Text sollte immer das Bild korrekt wiedergeben. Ein irreführender Text schadet sowohl der Barrierefreiheit als auch der SEO.
- Automatische Alt-Texte ungeprüft übernehmen: Tools zur automatischen Generierung von Alt-Texten können hilfreich sein, können auch manchmal ungenaue oder unpassende Ergebnisse liefern. Überprüfen Sie die Texte immer manuell.
Fazit: Kleine Texte, große Wirkung
Alt-Texte sind ein unscheinbares, aber mächtiges Werkzeug. Sie machen Ihre Website barrierefrei, verbessern Ihre Platzierung in Suchmaschinen und erhöhen die allgemeine Benutzerfreundlichkeit. Indem Sie sorgfältig formulierte Alt-Texte erstellen und dekorative Bilder korrekt behandeln, leisten Sie einen wichtigen Beitrag zu einer inklusiven, modernen und erfolgreichen Website.