Was ein Alt-Text-Generator tut
Ein Alt-Text-Generator nimmt eine Bild-URL oder einen Upload, das Seitenthema oder den Kontext und eine Zielgruppenpräferenz – allgemein, Screen-Reader-fokussiert oder SEO-fokussiert – und erzeugt dann drei Alt-Text-Varianten. Die kurze Variante bleibt unter 125 Zeichen und konzentriert sich auf das wesentliche Motiv. Die mittlere Variante ergänzt räumlichen oder relationalen Kontext in 125 bis 150 Zeichen. Die beschreibende Variante geht bis zu 200 Zeichen und enthält Details zu Farbe, Layout, Emotion oder Branding, wenn diese Details für das Verständnis oder die Auffindbarkeit wichtig sind.
Der Generator führt auch eine Dekorations-Bild-Prüfung durch. Wenn das Bild rein ästhetisch ist – ein Hintergrundverlauf, ein dekorativer Rahmen, ein Stockfoto von Händen auf einer Tastatur, das keine Information hinzufügt – kennzeichnet das Tool das Bild und empfiehlt alt="" (leeres Alt-Attribut) statt beschreibendem Text. Screen Reader überspringen Bilder mit leerem Alt, was die Belastung für Nutzer, die sich mit Kopfhörer navigieren, reduziert.
WCAG 2.2 verlangt, dass alle nicht-dekorativen Bilder Alt-Text haben, dass der Alt-Text gleichwertige Informationen zum Bild vermittelt und dass er 150 Zeichen nicht überschreitet, es sei denn, das Bild ist komplex (Charts, Diagramme, Infografiken). Unsere WCAG-Prüfung kennzeichnet drei Verstöße: fehlender Alt-Text, Alt-Text, der zu allgemein ist („Bild" oder „Foto"), und Alt-Text, der mit „Bild von" oder „Foto von" beginnt (Screen Reader geben bereits „Bild" an, also ist das Präfix redundant).
So verwendest du diesen Alt-Text-Generator
- Füge die Bild-URL ein oder ziehe eine Bilddatei in das Upload-Feld. Wir unterstützen JPG, PNG, WEBP und SVG.
- Fülle Seitenthema / Kontext mit einer Einzeiler-Beschreibung des Artikels oder der Seite aus, auf der das Bild erscheint – „Artikel zum Thema Immobilienkauf für Anfänger", „Zielseite für Projektmanagementsoftware", „Produktfoto auf einer Sneaker-Kategorieseite".
- Wähle Hauptzielgruppe. Wähle „Allgemein" für ausgewogene SEO und Barrierefreiheit. Wähle „Screen-Reader-fokussiert (Barrierefreiheit)", um die Klarheit für nicht-visuelle Nutzer über die Keyword-Einbindung zu priorisieren. Wähle „SEO-fokussiert", um Produktnamen, Markenbegriffe und auffindbare Phrasen hervorzuheben, wenn das Bild hauptsächlich für Such-Traffic bestimmt ist.
- Klicke auf Alt-Text generieren. Drei Varianten erscheinen mit Zeichenzählung. Jede ist kopierbereit.
- Wähle die Variante, die zu deinem Kontext passt. Nutze „kurz" für einfache Produktfotos. Nutze „mittel" für die meisten Hero-Bilder im Blog. Nutze „beschreibend" für Infografiken, Charts oder Bilder, die Daten oder komplexe Layouts vermitteln.
- Kopiere und füge es in dein CMS ein. In WordPress füge es in das Feld „Alternativtext" in der Mediathek ein. In HTML füge es als
alt="…"im<img>-Tag ein. In Next.js nutze diealt-Prop auf der<Image>-Komponente.
Für den Bulk-Modus klicke auf „In Bulk-Modus wechseln" oben im Formular. Füge bis zu zehn Bild-URLs ein, eine pro Zeile, oder ziehe einen Ordner mit Bildern. Fülle den Seitenkontext einmal aus. Klicke auf „generieren". Die Ausgabe ist eine Tabelle mit einer Zeile pro Bild: Miniaturansicht, kurzer Alt-Text, mittlerer Alt-Text, beschreibender Alt-Text. Kopiere die Tabelle oder exportiere als CSV für den WordPress-Bulk-Import.
Warum Alt-Text für Barrierefreiheit und SEO wichtig ist
Alt-Text dient zwei Herren: Screen-Reader-Nutzer, die Bilder nicht sehen können, und Suchmaschinen, die Bildinhalte ohne Text nicht interpretieren können. Eine WebAIM-Umfrage von 2023 zu einer Million Startseiten fand heraus, dass 58 % der Bilder entweder Alt-Text vermissten oder Alt-Text hatten, der WCAG-Richtlinien nicht erfüllte – „Bild", „IMG_1234.jpg" oder mit Keywords vollgestopfter Unsinn.
Drei Gründe, Alt-Text richtig zu schreiben.
Rechtliche Compliance. WCAG 2.1 Level AA ist der Barrierefreiheitsstandard, der vom Americans with Disabilities Act, dem European Accessibility Act und gleichwertigen Gesetzen in Kanada, Australien und dem UK verlangt wird. Fehlender oder falscher Alt-Text ist der zweithäufigste Auslöser für ADA-Website-Klagen nach Tastaturnavigationsfehlern, laut einem 2024er Bericht von UsableNet, der 4.600 Klagen zu digitaler Barrierefreiheit abdeckt. E-Commerce- und Finanzdienstleistungs-Websites sind die häufigsten Ziele.
Screen-Reader-Nutzerfreundlichkeit. Fünfzehn Prozent der US-amerikanischen Erwachsenen berichten von einer Sehbehinderung, laut CDC. Screen Reader wie JAWS, NVDA und VoiceOver lesen Alt-Text laut vor, wenn ein Nutzer zu einem Bild springt. Wenn der Alt-Text „Bild" sagt, erfährt der Nutzer nichts. Wenn der Alt-Text „Graph zeigt 23 % Wachstum im Jahresvergleich von Q1 2024 bis Q1 2025" sagt, versteht der Nutzer den Inhalt, ohne ihn zu sehen.
Traffic aus der Bildsuche. Google Images treibt 22 % aller Web-Suchen an, laut Daten von SparkToro. Alt-Text ist das primäre Text-Signal, das Google zur Indexierung von Bildern nutzt. Ein Produktfoto mit Alt-Text „blauer Laufschuh" wird für „blauer Laufschuh" gerankt. Das gleiche Foto mit Alt-Text „IMG_5391.jpg" wird für nichts gerankt. Eine 2022er Studie von Moz fand heraus, dass das Hinzufügen beschreibenden Alt-Texts zu zuvor nicht gealteten Bildern die Impressionen in der Bildsuche im Durchschnitt um 35 % innerhalb von 90 Tagen erhöhte.
Alt-Text vs. Title-Attribut vs. Caption vs. Dateiname
Diese vier Begriffe beschreiben verschiedene Bild-Metadaten. Jeder hat einen eigenen Zweck.
Alt-Text ist das alt-Attribut im <img>-Tag. Screen Reader geben es an. Google indexiert es. Es ist für Barrierefreiheit erforderlich. Wenn das Bild nicht geladen wird, zeigen Browser den Alt-Text statt des Bildes an. Maximale praktische Länge: 125 bis 150 Zeichen für einfache Bilder, 200 für komplexe.
Title-Attribut ist das title-Attribut im <img>-Tag. Browser zeigen es als Tooltip bei Hover an. Screen Reader ignorieren es größtenteils. Google ignoriert es. Title ist optional und selten notwendig. Verwende Title nicht als Ersatz für Alt.
Caption ist sichtbarer Text, der unterhalb oder neben dem Bild angezeigt wird, typischerweise innerhalb eines <figure>- und <figcaption>-Tags. Captions bieten Kontext oder Kredit. Screen Reader lesen Captions zusätzlich zu Alt-Text laut vor. Wenn die Caption das Bild vollständig beschreibt, kann der Alt-Text kürzer oder leer sein. Wenn die Caption redaktionell ist („Dieser Ansatz veränderte alles"), muss der Alt-Text immer noch beschreiben, was das Bild zeigt.
Dateiname ist der URL-Slug des Bildes – „blauer-laufschuh.jpg" vs „DSC_1234.jpg". Google liest Dateinamen als ein schwaches Ranking-Signal. Beschreibende Dateinamen helfen SEO marginal, aber Alt-Text ist viel wichtiger. Benenne Dateien vor dem Upload um, wenn dein CMS das erlaubt, aber überspringe Alt-Text nicht, weil der Dateiname beschreibend ist.
Wenn du ein Bild optimierst, schreibe zuerst Alt-Text. Füge eine Caption hinzu, wenn das Bild redaktionellen Kontext braucht. Benenne die Datei um, wenn sie derzeit ein zufälliger String ist. Überspringe das Title-Attribut, es sei denn, du hast einen spezifischen Tooltip-Anwendungsfall.
Häufige Fehler
- „Bild von" oder „Foto von" am Anfang schreiben. Screen Reader geben bereits „Bild" an, bevor sie den Alt-Text vorlesen. Mit „Bild von" zu beginnen, erzeugt „Bild Bild von blauem Schuh." Beginne mit dem Motiv: „Blauer Laufschuh auf weißem Hintergrund."
- Keyword-Stuffing. Alt-Text wie „beste Laufschuhe günstige Laufschuhe Laufschuhe online kaufen" ist Spam. Google ahndet das. Screen-Reader-Nutzer hören Unsinn. Schreibe zuerst für Menschen. Eine natürliche Keyword-Erwähnung reicht.
- Für jedes Bild auf einer Seite den gleichen Alt-Text verwenden. Wenn fünf Produktfotos alle alt="Produktfoto" haben, können Screen-Reader-Nutzer sie nicht unterscheiden. Beschreibe, was jedes Bild einzigartig macht: „Vorderansicht des blauen Laufschuhs", „Seitenprofil zeigt Laufflächenprofil", „Nahaufnahme der Schnürsenkelösen."
- Dekorative Bilder mit beschreibendem Alt lassen. Hintergrundmuster, dekorative Teiler und Leerraum-Bilder sollten
alt=""haben, damit Screen Reader sie überspringen. Ein dekoratives Swoosh-Grafik als „blaues geschwungenes Designelement" zu beschreiben, fügt keinen Wert hinzu und verlangsamt die Navigation. - Essay-lange Alt-Texte schreiben. Screen Reader sprechen mit 150 bis 250 Wörtern pro Minute. Ein 300-Zeichen-Alt dauert 10 Sekunden zum Vorlesen. Nutzer, die eine Seite mit 20 Bildern navigieren, verbringen drei Minuten mit dem Hören von Beschreibungen. Halte Alt unter 150 Zeichen, es sei denn, das Bild ist ein Chart oder eine Infografik, die Detail verlangt.
Fortgeschrittene Tipps
- Verwende die mittlere Variante als Standard. Kurz funktioniert für unkomplizierte Produktfotos. Beschreibend funktioniert für komplexe Diagramme. Mittel balanciert Barrierefreiheit und SEO für die meisten Blog- und Zielseiten-Bilder.
- Stimme die Alt-Text-Spezifizität auf das Seitenthema ab. Wenn dein Artikel „Wie man Laufschuhe bindet" ist, sollte der Hero-Bild-Alt den Knotenstil beschreiben – „Läufer bindet einen doppelten Knoten auf blauem Laufschuh". Wenn die Seite eine Kategorieauflistung für Laufschuhe ist, sollte der Alt des gleichen Bildes das Produkt betonen – „Blauer Mesh-Laufschuh mit weißer Sohle".
- Führe den Generator auf deinen bestehenden Bildern durch. Exportiere die Bild-URLs deiner Website aus deinem CMS oder crawle mit Screaming Frog. Füge die Liste in den Bulk-Modus ein. Überprüfe den generierten Alt-Text. Aktualisiere Bilder, die derzeit fehlenden oder generischen Alt haben.
- Teste Alt-Text mit einem Screen Reader. Installiere NVDA (Windows) oder aktiviere VoiceOver (Mac). Navigiere deine Seite, indem du die Tab-Taste drückst. Höre, was der Screen Reader ankündigt. Wenn der Alt-Text verwirrend oder repetitiv ist, überarbeite ihn.
- Füge strukturierte Daten für Bilder hinzu, die in How-to-Schritten, Rezepten oder Produktauflistungen verwendet werden. Verwende die
"image"-Eigenschaft in JSON-LD Schema, um auf die Bild-URL zu verweisen und sie mit dem strukturierten Inhalt zu verbinden. Google zeigt Bilder inline mit How-to-Rich-Results an, wenn das Schema vorhanden ist. - Vermeide Redundanz zwischen Caption und Alt. Wenn die Caption „Graph zeigt Umsatzwachstum" sagt, sollte der Alt die Daten beschreiben – „Balkendiagramm mit fünf Balken, zeigt Umsatz steigend von 2M in 2022 bis 3,5M in 2026." Der Alt bietet das Detail, das die Caption auslässt.
Sobald Alt-Text an Ort und Stelle ist, ist der nächste Schritt normalerweise, zu prüfen, dass der Rest der Metadaten der Seite korrekt ist. Gib deine Seiten-URL in unseren Website-Metadaten-Checker ein, um Title, Meta-Beschreibung, OG-Tags, Twitter-Card und Schema in einem Scan zu validieren. Wenn du einen vollständigen Artikel optimierst, nutze den Meta-Beschreibungs-Generator, um das SERP-Snippet zu schreiben, und den SEO-Title-Generator, um passende Title-Tags mit Live-Google-Vorschau zu erzeugen. Wenn du Inhalte planst, die Bilder enthalten, nutze den Content-Brief-Generator, um die gesamte Struktur vor dem Schreiben zu kartographieren.