Alt-Texte für Bilder: Barrierefreiheit, SEO und KI-Tools
Das alt-Attribut im HTML macht Bilder für Menschen zugänglich, die sie nicht sehen können, und hilft Suchmaschinen, deren Inhalt einzuordnen. Trotzdem werden Alt-Texte im Redaktionsalltag häufig vergessen. Dabei lassen sie sich in Content-Management-Systemen wie TYPO3 und WordPress einfach hinterlegen. Auch KI-Werkzeuge können dich inzwischen dabei unterstützen, passende Bildbeschreibungen zu erstellen.
Alternative Texte und ihre Bedeutung
Der alternative Text dient zur Beschreibung von Bildern im Internet. Er wird dem Nutzer anstelle eines Bildes angezeigt, wenn dieses nicht geladen werden kann.
Menschen mit Sehbehinderung
Der Inhalt des Bildes ist nicht für jeden Nutzer erkenntlich. Menschen mit Sehbeeinträchtigungen verwenden Programme, welche die Inhalte aus einer Webseite vorlesen, oder sie müssen die Webseite so stark vergrößern, dass die Bilder sich nicht im Ganzen erschließen lassen. Ruft der Nutzer die Webseite mit geringer Bandbreite auf, werden die Bilder möglicherweise nicht geladen. Trotzdem ist es von Bedeutung, diesen Menschen den Zugang zur Information, welche das Bild vermitteln soll, nicht zu verwehren. Das Anreichern des Bildes mit Informationen spricht für die Qualität der Webseite. Es wirkt sich positiv auf die Nutzererfahrung und die Bewertung von Suchmaschinen aus.
Bilder für die Suchmaschinenoptimierung aufarbeiten
Suchmaschinen können Bildinhalte mittlerweile mithilfe künstlicher Intelligenz analysieren. Trotzdem bleiben aussagekräftige Dateinamen und Alt-Texte wichtig. Sie helfen dabei, den Inhalt und die Bedeutung eines Bildes im jeweiligen Seitenkontext einzuordnen. Verwende relevante Suchbegriffe deshalb nur dort, wo sie natürlich zur Bildbeschreibung passen. Im Vordergrund sollte immer eine verständliche Textalternative für Menschen stehen, die das Bild nicht wahrnehmen können.
Ein Beispiel für das Firmenlogo:
Problematisch ist es, wenn bei einem inhaltlich relevanten Bild der alternative Text fehlt. Dabei ist zwischen einem fehlenden und einem bewusst leeren alt-Attribut zu unterscheiden. Rein dekorative Bilder benötigen keine Beschreibung. Hier ist ein leeres alt-Attribut sogar sinnvoll, damit Screenreader das Bild überspringen können.
<img src="dekoratives-bild.jpg" alt="">
Im Gegensatz dazu eine optimale Bildbeschreibung:
<img src="clickstorm-logo.jpg" alt="Logo der clickstorm GmbH">
Was jedoch auch vermieden werden sollte:
<img src="clickstorm-logo.jpg" alt="Logo Internetagentur clickstorm GmbH Leipzig TYPO3 WordPress Shopware Symfony SEO">
Gut beschriebene Bilder können auch über die Google-Bildersuche zusätzliche Besucher auf deine Website bringen. Aussagekräftige Alt-Texte und Dateinamen helfen Google dabei, die Bilder thematisch einzuordnen. Eine Garantie für bessere Rankings sind sie allerdings nicht.
Anpassung des Workflows
Das Bild muss schnell online gehen, der nächste Termin steht gleich an oder es ist kurz vor Feierabend. Nur noch schnell das Bild hochladen, einfügen, speichern und der Rechner wird heruntergefahren. Das mit den alt-Texten kann man ja am nächsten Tag noch erledigen. Wenn überhaupt daran gedacht wird. So wichtig sind sie ja nicht, Hauptsache das Bild wird angezeigt. Dass alternative Texte durchaus von Bedeutung sind, wurde bereits gezeigt.
Als Redakteur musst du lediglich nach dem Hochladen des Bildes ein paar Wörter noch in ein Feld eintragen. Ein geringer Aufwand mit großer Wirkung. Eine Gewohnheitssache, die sich leicht aneignen lässt. In den Content Management Systemen kannst du die Bildinformationen direkt an das Bild knüpfen. Somit werden diese bei jedem Platzieren des Bildes auf der Webseite automatisch übernommen.
Pflege im TYPO3
Bei unseren TYPO3-Schulungen erklären wir immer, wie die Redakteure die Bilder mit weiteren Informationen anreichern können. In TYPO3 ist das sehr einfach gehalten. Nach dem Hochladen eines Bildes können die Metainformationen direkt im selben Modul gepflegt werden. Klicke dazu einfach auf das Icon vor dem Dateinamen und wähle Bearbeiten.
Anschließend öffnet sich eine Eingabemaske, in der du den alternativen Text und weitere Bildinformationen hinterlegen kannst. Besonders wichtig ist der Alt-Text, der die Bedeutung oder Funktion des Bildes beschreibt.
Die hinterlegten Informationen können bei der Verwendung des Bildes automatisch übernommen werden. TYPO3 ermöglicht es dir aber auch, den alternativen Text für einzelne Verwendungsstellen anzupassen. Das ist sinnvoll, wenn dasselbe Bild auf verschiedenen Seiten unterschiedliche Aufgaben erfüllt.
Wir haben für Sie auch ein YouTube-Video vorbereitet, wo Sie die eben gezeigten Schritte noch einmal nachvollziehen können. In unserem clickstorm YouTube-Kanal findest du weitere Videos u.a. zum Thema TYPO3.
Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.
Alternative Texte mit cs_seo
Mit der TYPO3-Erweiterung cs_seo siehst du direkt im TYPO3-Backend, welche Bilder noch keinen alternativen Text haben. Zugleich kannst du einen Text hinterlegen.
Mehr dazu erfährst du in einem weiteren Blog-Artikel.
Alt-Texte mit KI erstellen: Diese Werkzeuge helfen dir
KI kann dir viel Arbeit beim Erstellen von Alt-Texten abnehmen. Moderne Werkzeuge analysieren Bilder und schlagen passende Beschreibungen vor. Einige lassen sich direkt in Content-Management-Systeme wie TYPO3 oder WordPress integrieren.
Je nachdem, ob du nur einzelne Bilder oder gleich eine ganze Mediathek bearbeiten möchtest, kommen unterschiedliche Lösungen infrage:
- KI-Generator von barrierefreies.design: Ein kostenloser Online-Generator, der Bilder und SVG-Grafiken analysiert. Du kannst den Verwendungskontext angeben und zwischen verschiedenen Ausführlichkeitsstufen wählen. Laut Anbieter werden die Daten ausschließlich innerhalb der EU verarbeitet.
- AltText.ai für WordPress: Das Plugin erstellt Alt-Texte automatisch beim Hochladen von Bildern oder nachträglich für vorhandene Mediendateien. Es unterstützt auch WooCommerce und mehrsprachige Websites.
- AI3 Alt Text für TYPO3: Die TYPO3-Extension generiert Alt-Text-Vorschläge für einzelne Bilder oder ganze Bildbestände. Redakteure können die Vorschläge prüfen, bearbeiten und vor der Übernahme freigeben.
Beachte bei der Auswahl eines KI-Werkzeugs auch den Datenschutz und mögliche Kosten. Während der Generator von barrierefreies.design laut Anbieter Bilder innerhalb der EU verarbeitet, nutzt AltText.ai einen externen API-Dienst. Prüfe deshalb vor dem Hochladen, ob du die Bilder an den jeweiligen Anbieter übermitteln darfst. Bei CMS-Erweiterungen können außerdem Kosten für die KI-Nutzung entstehen.
Warum du KI-generierte Alt-Texte überprüfen solltest
Ein KI-Werkzeug kann erkennen, was auf einem Bild dargestellt ist. Es weiß aber nicht immer, welche Bedeutung das Bild im Zusammenhang mit deinem Inhalt hat.
Ein Beispiel: Ein Foto von einem Team vor einem Bürogebäude benötigt je nach Verwendung unterschiedliche Alt-Texte. Auf einer Teamseite können die abgebildeten Personen relevant sein. In einem Artikel über Bürogestaltung steht dagegen möglicherweise das Gebäude im Mittelpunkt.
Auch dekorative Bilder benötigen keine Beschreibung. In diesem Fall ist ein leeres Alt-Attribut (alt="") die richtige Wahl.
Nutze KI-generierte Alt-Texte deshalb als Formulierungshilfe, nicht als ungeprüfte fertige Lösung. Gerade bei Diagrammen, Infografiken und funktionalen Bildern ist eine zusätzliche redaktionelle Prüfung wichtig.
Noch mehr Informationen
Nicht nur Bilder benötigen barrierefreie Alternativen. Auch für Video- und Audioinhalte sind beispielsweise Untertitel und Transkripte wichtig. Weitere Tipps findest du in unserem Beitrag über barrierefreie Webseiten.
Auch aussagekräftige Linktexte tragen zur Barrierefreiheit bei. Statt eines allgemeinen „Hier klicken“ sollte bereits aus dem Linktext hervorgehen, wohin der Link führt.
Du möchtest deine Website barrierefreier gestalten oder benötigst Unterstützung bei der Suchmaschinenoptimierung? Dann kontaktiere uns.
Zuletzt aktualisiert: Oktober 2026
Kommentar von Monika Siegl
Hallo Marc,
danke für diesen interessanten Beitrag, ich lese ihn gerade mit Begeisterung.
Jedoch – im Absatz „Menschen mit Sehbehinderung“ hat sich ein Rechtschreibfehler eingeschlichen – es heißt bitte “ nicht zu verwehren“ .statt nicht zu verwähren .
Liebe Grüße,
Monika
Kommentar von Marc
Hallo Monika, danke für den Hinweis. Der Fehler ist korrigiert. Viele Grüße, Marc