Jedes Bild auf einer Webseite sollte einen Alt-Text haben. Das ist keine bloße Empfehlung, sondern ein fundamentaler Bestandteil guten Webdesigns. Alt-Texte, kurz für alternativer Text, erfüllen zwei entscheidende Aufgaben: Sie machen deine Bilder für Suchmaschinen verständlich und ermöglichen es Menschen mit Sehbehinderung, den Inhalt deiner Seite vollständig zu erfassen. Trotzdem werden Alt-Texte auf unzähligen Webseiten vergessen, vernachlässigt oder schlecht geschrieben. In diesem Artikel erfährst du, warum sie so wichtig sind und wie du sie richtig einsetzt.
Wie Screenreader Bilder verarbeiten: Screenreader wie NVDA (Windows), VoiceOver (Apple) und TalkBack (Android) sind Softwareprogramme, die blinden und sehbehinderten Menschen Bildschirminhalte vorlesen. Diese Programme können Text interpretieren, aber sie können keine Bilder sehen. Wenn ein Bild keinen Alt-Text hat, reagiert der Screenreader je nach Programm unterschiedlich. Manche sagen nur "Bild", andere lesen den Dateinamen vor, zum Beispiel "IMG_20240315_142037.jpg". Das ist für den Nutzer vollkommen nutzlos und frustrierend. Stell dir vor, du navigierst eine Webseite, auf der jedes zweite Element einfach als "Bild" angekündigt wird, ohne jeglichen Kontext. Du würdest die Seite sofort verlassen. Genau so geht es blinden Nutzern auf schlecht gepflegten Webseiten. Ein guter Alt-Text hingegen gibt dem Nutzer dieselbe Information, die ein sehender Besucher durch das Betrachten des Bildes erhält.
Was genau ist ein Alt-Text? Ein Alt-Text ist ein kurzer beschreibender Text, der im HTML-Code eines Bildes hinterlegt wird. Er wird angezeigt, wenn das Bild nicht geladen werden kann, etwa bei langsamer Verbindung oder wenn der Bildpfad fehlerhaft ist. Im Code sieht das so aus: Das alt-Attribut im img-Tag enthält die Beschreibung. Zusätzlich zur Barrierefreiheit hat der Alt-Text eine weitere praktische Funktion: Er erscheint als Platzhalter, solange das Bild noch lädt. So weiß der Besucher schon vor dem vollständigen Laden der Seite, was ihn erwartet.
Google und Alt-Texte: Google kann Bilder mittlerweile bis zu einem gewissen Grad mit Computer Vision analysieren, aber der Alt-Text bleibt die zuverlässigste Informationsquelle darüber, was ein Bild zeigt. Google empfiehlt in seiner offiziellen Dokumentation ausdrücklich, Alt-Texte zu verwenden. Die Empfehlungen lauten: Beschreibe den Inhalt des Bildes präzise und spezifisch. Verwende relevante Schlüsselwörter, wo sie natürlich passen. Vermeide Keyword-Stuffing, also das übermäßige Einfügen von Keywords. Rein dekorative Bilder sollten einen leeren Alt-Text (alt="") bekommen. Bilder mit guten Alt-Texten erscheinen häufiger in der Google-Bildersuche, die eine erhebliche Trafficquelle sein kann. Besonders für E-Commerce-Seiten ist die Bildersuche relevant: Viele Nutzer suchen Produkte zuerst über Google Images und gelangen von dort auf die Produktseite.
Für SEO sind Alt-Texte ein unterschätzter Rankingfaktor. Wenn du einen Online-Shop mit Produktbildern betreibst und diese keine Alt-Texte haben, verpasst du eine enorme Chance. Deine Produkte erscheinen nicht in der Google-Bildersuche. Da viele Nutzer ihre Produktrecherche genau dort beginnen, kann das direkten Einfluss auf deinen Umsatz haben. Ein guter Alt-Text enthält relevante Keywords, wirkt aber nicht gezwungen oder vollgestopft. Statt "Tasche kaufen günstig Leder Handtasche online" schreibst du besser "Braune Lederhandtasche mit Reißverschluss, Frontalansicht". Der zweite Text ist für Menschen und Suchmaschinen gleichermaßen nützlich.
Die Web Content Accessibility Guidelines, kurz WCAG, definieren internationale Standards für barrierefreie Webinhalte. Nach WCAG 2.1 Kriterium 1.1.1 müssen alle nicht-textuellen Inhalte eine Textalternative haben. Das betrifft Bilder, Icons, Grafiken und Diagramme. In vielen Ländern ist die Einhaltung dieser Richtlinien für öffentliche Einrichtungen und zunehmend auch für Unternehmen gesetzlich vorgeschrieben. In der EU sorgt der European Accessibility Act dafür, dass ab 2025 viele digitale Produkte und Dienstleistungen barrierefrei sein müssen. Verstöße können zu empfindlichen Geldstrafen führen. Alt-Texte sind dabei ein grundlegender Baustein der Barrierefreiheit.
5 Regeln für gute Alt-Texte: Erstens, beschreibe was zu sehen ist, nicht was du interpretierst. Schlecht: "Glückliche Familie". Besser: "Vier Personen sitzen lachend an einem Esstisch mit Geburtstagskuchen." Zweitens, sei spezifisch. Schlecht: "Hund". Besser: "Golden Retriever liegt auf einer grünen Wiese und hält einen roten Ball im Maul." Drittens, halte dich kurz. Unter 125 Zeichen ist ideal, weil viele Screenreader bei längeren Texten abschneiden. Viertens, beginne nicht mit "Bild von" oder "Foto von". Der Screenreader kündigt bereits an, dass es sich um ein Bild handelt. Fünftens, dekorative Bilder bekommen ein leeres alt-Attribut (alt=""). Ein Trennlinienbild oder ein rein gestalterisches Hintergrundelement braucht keine Beschreibung und würde den Screenreader-Nutzer nur stören.
Für verschiedene Bildtypen gelten unterschiedliche Regeln. Bei Infografiken oder Diagrammen reicht ein kurzer Alt-Text nicht aus. Hier solltest du eine ausführliche Beschreibung der Daten oder Aussagen bereitstellen, entweder im Alt-Text selbst oder in einem separaten Textelement auf der Seite. Bei Logos ist der Alt-Text typischerweise der Firmenname, zum Beispiel "Formidex Logo". Bei verlinkten Bildern sollte der Alt-Text beschreiben, wohin der Link führt, nicht was auf dem Bild zu sehen ist. Ein verlinktes Pfeil-Icon sollte also "Zurück zur Startseite" heißen, nicht "Grüner Pfeil nach links". Bei Bildern in Artikeln, die den Textinhalt ergänzen, beschreibst du, was das Bild zeigt und warum es im Kontext relevant ist.
Wie das Formidex Alt-Text-Tool funktioniert: Das Tool nutzt das vit-gpt2-Modell, eine Kombination aus Vision Transformer (ViT) und GPT-2. Das Modell ist etwa 300 MB groß und wird beim ersten Aufruf in deinen Browser geladen. Der Vision Transformer zerlegt das Bild in Patches, kleine Bildausschnitte, und wandelt diese in eine Reihe von visuellen Merkmalen um. Diese Merkmale werden dann an den GPT-2-Teil des Modells übergeben, der daraus einen englischen Beschreibungssatz generiert. Das Modell erkennt Objekte, Szenen, Farben und räumliche Beziehungen. Die Verarbeitung läuft vollständig in deinem Browser. Die generierten Beschreibungen sind ein guter Ausgangspunkt, den du dann an deinen spezifischen Kontext anpassen kannst.
Häufige Fehler bei Alt-Texten: Der häufigste Fehler ist schlicht das Vergessen. Viele Content-Management-Systeme machen das alt-Attribut optional, und in der Hektik des Alltags wird es oft ausgelassen. Der zweithäufigste Fehler ist das Verwenden des Dateinamens als Alt-Text, zum Beispiel "header-banner-new-v2-final.jpg". Das hilft niemandem. Ein weiterer Fehler ist das Überladen mit Keywords: "Schuhe kaufen online günstig Sneaker Damen Herren Sale" ist weder für Screenreader-Nutzer noch für Google nützlich. Auch zu generische Texte wie "Bild" oder "Foto" bringen keinen Mehrwert.
Alt-Texte in der Praxis umsetzen: Wenn du eine bestehende Webseite hast, beginne mit den wichtigsten Seiten: der Startseite, den Produktseiten und den am meisten besuchten Unterseiten. Arbeite dich dann systematisch durch den Rest. Für neue Inhalte solltest du einen Workflow etablieren, bei dem der Alt-Text direkt beim Hochladen eines Bildes geschrieben wird. Viele CMS-Systeme wie WordPress zeigen beim Bild-Upload ein Feld für den Alt-Text an. Nutze es konsequent. Für Webseiten mit vielen Bildern kann das Formidex Alt-Text-Tool den Prozess erheblich beschleunigen.
Alt-Texte sind kein lästiges Detail, das man am Ende eines Webprojekts noch schnell erledigt. Sie sind ein integraler Bestandteil guter Webentwicklung. Nimm dir die Zeit, sie sorgfältig zu schreiben. Deine Besucher, ob sehbehindert oder nicht, und dein Google-Ranking werden es dir danken. Mit dem Formidex Alt-Text-Tool kannst du den Prozess beschleunigen und sicherstellen, dass kein Bild ohne Beschreibung bleibt.