Leitfaden für Bild-Alt-Text: Barrierefreiheit + SEO + Screenshots (2026)
# Bild-Alt-Text: Ein Leitfaden 2026 für Barrierefreiheit, SEO und Screenshots
Bild-Alt-Text ist eine kurze Textbeschreibung, die du einem Bild hinzufügst, damit Screenreader sie blinden Nutzern vorlesen können und Suchmaschinen erfassen können, was das Bild zeigt. Guter Alt-Text ist knapp (rund 125 Zeichen), spezifisch und überspringt Füllwörter wie "Bild von". Dekorative Bilder nutzen alt="", damit Screenreader sie überspringen. Dasselbe Alt-Attribut hilft sowohl der Barrierefreiheit (eine WCAG-1.1.1-Regel) als auch SEO (Bild-Rankings und Seitenkontext).
Dieser Leitfaden ist die volle Referenz: was Alt-Text ist, wie du ihn schreibst, die 7 Regeln, 20 Gut-vs.-Schlecht-Beispiele, häufige Fehler und wie du testest. Wir decken auch unsere Nische ab: Alt-Text für Screenshots, wo die meisten Leitfäden zu kurz greifen.
Was ist Alt-Text? Eine Definition in einfachen Worten
Alt-Text (kurz für "alternativer Text") ist der Wert des HTML-alt-Attributs an einem
<img src="red-running-shoe.jpg" alt="Red running shoe with white sole on hardwood floor" />Das alt-Attribut bedient drei echte Zielgruppen:
- Screenreader-Nutzer. Tools wie VoiceOver, NVDA und JAWS lesen den Alt-Text laut vor, sodass ein blinder oder sehbehinderter Nutzer weiß, was das Bild zeigt.
- Suchmaschinen. Google, Bing und Bild-Crawler nutzen Alt-Text, um Bilder zu ranken und Seitenkontext zu erfassen.
- Jeder, dessen Bild nicht lädt. Wenn das Netzwerk ausfällt, zeigen Browser den Alt-Text statt des kaputten Bildes.
Eine Anmerkung zu Begriffen. "Alt-Tag" ist verbreitet, aber falsch — Alt ist ein Attribut am img-Tag, kein Tag selbst. "Alternativer Text" ist der formelle Name, der in WCAG 2.1 Success Criterion 1.1.1 verwendet wird. Die MDN-Seite zum alt-Attribut an
Wie Browser das Alt-Attribut nutzen
Ein sehender Nutzer sieht den Alt-Text normalerweise nie — das Bild rendert ganz normal. Unter der Haube:
- Screenreader sagen an: "Bild, [Alt-Inhalt]." Leerer Alt (
alt="") heißt überspringen. - Wenn
srcfehlschlägt, zeigen Browser den Alt-Text inline. Deshalb klingt "Bild von einem Sonnenuntergang" seltsam, wenn ein Bild kaputt ist. - Sprachsteuerungstools (Dragon, macOS Voice Control) nutzen Alt-Text, um Bilder per Name anzusteuern.
Der letzte Punkt zählt für Nutzer, die nicht blind sind. Ein Nutzer, der per Stimme navigiert, kann ein Bild nur klicken, wenn es ein Label hat.
Warum Alt-Text wichtig ist: Die Doppelfunktion
Die meisten Teams schlagen sich auf eine Seite. Designer sehen Alt-Text als Barrierefreiheits-Pflichtaufgabe. Marketer sehen ihn als SEO-Hebel. Beide haben recht, und ein guter Satz kann beide Jobs bedienen.
Für Barrierefreiheit ist Alt-Text in vielen Ländern gesetzlich vorgeschrieben. WCAG 1.1.1 wird vom ADA, vom European Accessibility Act, von Kanadas ACA und von Section 508 in den USA zitiert. Fehlender Alt-Text ist im großen Maßstab eines der häufigsten Audit-Versäumnisse.
Für SEO hilft Alt-Text Google, deine Bilder zu ranken, und gibt der Seite zusätzlichen thematischen Kontext. Bild-Traffic ist real in Produkt-, Rezept- und How-To-Nischen.
Der Trick: ein Satz erledigt oft beide Jobs. "Red running shoe with white sole on hardwood floor" funktioniert für einen Screenreader-Nutzer und für die Anfrage "red running shoe". Du brauchst keine zwei Versionen.
Die 7 Regeln, um guten Alt-Text zu schreiben
Diese sieben Regeln bringen dich zu 90 % ans Ziel. Der Rest ist Urteilsvermögen über Kontext.
1. Sei spezifisch, nicht generisch
"Bild" oder "Foto" sagt dem Leser nichts. Wähl konkrete Substantive und Adjektive. "Frau lächelt an einem Schreibtisch in einem sonnigen Homeoffice" schlägt "Person".
2. Vermittle Zweck, nicht nur Beschreibung
Frag "was tut dieses Bild hier?" und nicht nur "was ist drin?". Ein Foto eines Kochs auf einer Restaurant-Homepage könnte alt = "Chef plating spaghetti carbonara at Trattoria Lupo" sein. Dasselbe Foto auf einem Rezeptblog könnte alt = "Plated spaghetti carbonara with parsley" sein. Gleiche Pixel, andere Aufgaben.
3. Spar dir "Bild von" und "Foto von"
Screenreader sagen schon "Bild" vor dem Alt. "Bild von einem Sonnenuntergang" liest sich als "Bild, Bild von einem Sonnenuntergang". Beschreib einfach den Inhalt.
4. Ziel auf rund 125 Zeichen
Es gibt keine harte Grenze, aber einige ältere Screenreader schneiden lange Alt-Strings ab. Rund 125 Zeichen halten es knapp. Wenn du mehr Platz brauchst, nutze eine Bildunterschrift oder zusätzlichen Fließtext daneben.
5. Funktionale Bilder beschreiben die Funktion
Wenn ein Bild als Button oder Link fungiert, beschreib was es tut, nicht wie es aussieht. Ein Such-Icon ist alt="Search", nicht alt="Magnifying glass icon."
6. Dekorative Bilder bekommen einen leeren Alt
Wenn das Bild rein visuell ist (ein Trenner, ein Verlauf, ein Hero-Muster), nutze alt="". Das leere Attribut sagt Screenreadern, es zu überspringen. Lass das Attribut nicht weg — das ist schlimmer, weil manche Reader auf das Vorlesen des Dateinamens zurückfallen.
7. Wiederhol nicht die umgebende Bildunterschrift
Wenn ein
20 Beispiele: Guter vs. schlechter Alt-Text
Der schnellste Weg, die Regeln zu verinnerlichen, ist sie angewendet zu sehen. Hier sind 20 gepaarte Beispiele über 10 Bildkategorien.
Produktfotos
- Schlecht:
alt="shoe.jpg" - Gut:
alt="Red Nike running shoe with white sole, side profile on white background"
- Schlecht:
alt="Image of a coffee maker" - Gut:
alt="Stainless-steel drip coffee maker brewing into a glass carafe"
Anleitungs-Screenshots
- Schlecht:
alt="screenshot1" - Gut:
alt="macOS System Settings showing the Privacy tab with Screen Recording highlighted"
- Schlecht:
alt="how to do it" - Gut:
alt="Excel toolbar with the Insert Chart button circled in red"
Diagramme
- Schlecht:
alt="diagram" - Gut:
alt="Three-tier system diagram with web server, app server, and database connected by arrows"
- Schlecht:
alt="flowchart" - Gut:
alt="User login flowchart showing email entry, password check, and dashboard redirect"
Dekorative Bilder
- Schlecht:
alt="decorative gradient" - Gut:
alt=""
- Schlecht: (gar kein Alt-Attribut)
- Gut:
alt=""
Infografiken
- Schlecht:
alt="infographic" - Gut:
alt="Infographic showing 7 alt-text rules; full text below image"(entfalte die Regeln dann im Fließtext)
- Schlecht:
alt="stats" - Gut:
alt="Bar chart showing 67% of users abandon sites with broken images, 2024 survey"
Button-Icons
- Schlecht:
alt="trash icon" - Gut:
alt="Delete"
- Schlecht:
alt="three dots" - Gut:
alt="More options"
Profilfotos
- Schlecht:
alt="headshot" - Gut:
alt="Maya Chen, lead designer at Acme, smiling in front of a blue wall"
- Schlecht:
alt="author" - Gut:
alt="Jordan Park, author of this article"
Hero-Illustrationen
- Schlecht:
alt="hero image" - Gut:
alt="Illustrated workspace with laptop, plant, and coffee cup on a wooden desk"
- Schlecht:
alt="background" - Gut:
alt=""(wenn rein dekorativ) oderalt="Team of remote workers collaborating on video call"(wenn es Bedeutung trägt)
Diagramme und Graphen
- Schlecht:
alt="chart" - Gut:
alt="Line chart of monthly active users from Jan to Dec 2025, growing from 12k to 38k"
- Schlecht:
alt="bar graph" - Gut:
alt="Bar chart comparing Q1 sales across 4 regions; West leads at $1.2M"
Markenlogos
- Schlecht:
alt="logo" - Gut:
alt="ScreenSnap Pro logo"
- Schlecht:
alt="our logo image" - Gut:
alt="Acme Corporation"(wenn das Logo als Link zur Homepage fungiert)
Alt-Text für Screenshots: Unsere Nische
Die meisten generischen Leitfäden lassen Screenshots aus, aber Screenshots sind dort, wo Doku-Teams, Marketer und Blogger den meisten Aufwand stecken. Die Regel ist einfach: beschreib den UI-Zustand, nicht die Pixel.
Ein Screenshot eines Mac-Finder-Fensters mit einer ausgewählten Datei sollte nicht alt = "rechteckiger Screenshot" sein. Er sollte alt = "macOS Finder window with budget.xlsx selected in the Documents folder" sein. Der Leser muss wissen, was zu sehen und zu tun ist, nicht die Form des Rechtecks.
Drei schnelle Regeln für Screenshot-Alt-Text:
- Nenne die App und den Bildschirm. "Slack settings — Notifications tab" schlägt "Settings-Seite".
- Hebe das hervorgehobene Element hervor. Wenn du einen Pfeil oder Kasten gezeichnet hast, sag das: "Excel toolbar with the Format Cells button highlighted in red."
- Nenne die Aktion, falls relevant. "After clicking Save, the success banner appears at the top" verwandelt ein statisches Bild in einen nützlichen Schritt.
Wenn du Dokumentation baust, nimm Screenshots in ScreenSnap Pro auf und annotiere sie — die Annotation-Schicht macht das Schreiben von Alt-Text leichter, weil du schon beschriftet hast, was wichtig ist. Paar es mit unserem Schritt-für-Schritt-Screenshot-Tutorial-Leitfaden oder unserem Leitfaden zu Screenshots in technischer Dokumentation für den vollen Workflow.
SEO-Vorteile von Alt-Text
Alt-Text ist eines der ältesten und stabilsten On-Page-SEO-Signale.
Bildsuche-Ranking. Google Images ist eine Top-fünf-Suchproperty. Alt-Text ist das wichtigste Textsignal, das Google nutzt, um ein Bild zu ranken. Wenn dein Bild gut beschrieben, auf einer relevanten Seite und in vernünftiger Größe ist, hat es eine echte Chance zu ranken.
Seiten-Keyword-Kontext. Suchmaschinen lesen die Wörter rund um ein Bild als Relevanzsignal. Wenn deine Seite "red running shoes" anvisiert, verstärken Bilder von roten Schuhen mit beschreibendem Alt das Thema.
Featured-Snippet-Anker. Google zieht oft Bilder von einer Seite für Snippets und Bildkarussells. Gut beschriebene Bilder werden öfter ausgewählt.
Was Alt-Text nicht tut: Er gibt dir keinen Ranking-Boost, wenn du ihn mit Keywords vollstopfst. Google stuft überoptimierten Alt herab, der sich wie wiederholte Begriffe liest.
Barrierefreiheits-Vorteile von Alt-Text
Der Barrierefreiheits-Fall ist älter und stärker als der SEO-Fall.
WCAG 1.1.1 (Non-text Content) verlangt, dass jeder Nicht-Text-Inhalt eine Textalternative hat. Das W3C-WAI-Alt-Text-Tutorial hat den kanonischen Entscheidungsbaum. Harvards Leitfaden für Inhaltsbilder ist eine der klarsten praktischen Referenzen.
Screenreader-UX. Ein blinder Nutzer auf einer Rezeptseite ohne Alt-Text hört "Grafik, Grafik, Grafik" — keine Info. Mit Alt-Text hört er "Plated spaghetti carbonara, Recipe of the Week" und entscheidet, ob er weiterliest.
Sprachsteuerung. Nutzer von Dragon, macOS Voice Control oder Windows Speech Recognition steuern Bilder per Name an. Ohne Alt-Text existiert das Bild für sie nicht.
Kognition und Bandbreite. Alt-Text hilft Nutzern mit Leseschwierigkeiten oder langsamer Verbindung (bei der Bilder spät oder nie laden). Es ist eine der billigsten und wirkungsvollsten Korrekturen, die du ausspielen kannst.
Genug von langweiligen Screenshots? Probier ScreenSnap Pro.
Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.
Sieh, was es kannDie 4 Bildkategorien (und wie du jede behandelst)
Das W3C gruppiert Bilder in vier praktische Kategorien. Die Kategorie zu kennen, sagt dir, wie du den Alt schreibst.
Informative Bilder
Bilder, die Bedeutung tragen, die nicht schon im Text steht — ein Foto einer Person, eines Produkts, ein Icon mit Bedeutung.
Regel: beschreib die Bedeutung kurz. Rund 125 Zeichen.
Funktionale Bilder
Bilder, die als Buttons oder Links fungieren — ein Such-Icon, ein Logo, das nach Hause verlinkt.
Regel: beschreib die Funktion, nicht den Look. alt="Search", alt="Acme Corporation home".
Dekorative Bilder
Bilder, die rein visuell sind — Verläufe, Trenner, Hintergrundmuster.
Regel: alt="". Leer, nicht weggelassen.
Komplexe Bilder
Diagramme, Graphen, Infografiken, Karten. Information zu dicht für einen Satz.
Regel: kurzer Alt zur Identifikation, plus eine längere Beschreibung daneben (Fließtext, longdesc-Attribut ist deprecated.
Häufige Fehler, die du vermeiden solltest
Die meisten schlechten Alt-Texte fallen in einen dieser fünf Eimer.
1. Keyword-Stuffing. alt="red shoe red running shoe red Nike shoe red sneakers buy red shoe online" liest sich wie Spam für Leser und Suchmaschinen.
2. Alt komplett weglassen. Schlimmer als leerer Alt. Ohne alt lesen viele Screenreader die Datei-URL laut vor. Hör mal "uploads-2024-IMG-4521-final-v3-FINAL-real.jpg" zu und du verstehst warum.
3. Dateinamen als Alt nutzen. "screenshot.png" oder "DSC_0492" ist der häufigste schlechte Alt im Wild. Die meisten CMSe haben das als Default. Schreib das immer um.
4. Generische Platzhalter. "Bild", "Foto", "Picture", "Grafik" bringen null Info.
5. Bildunterschrift wiederholen. Wenn eine Bildunterschrift das Bild schon abdeckt, ist alt = Bildunterschrift Lärm. Kürze den Alt oder setz ihn leer.
So testest du Alt-Text
Du musst nicht blind ausspielen. Drei Test-Schichten erwischen die meisten Probleme.
Browser-DevTools
Rechtsklick auf jedes Bild und wähl Untersuchen in Chrome, Edge, Firefox oder Safari. Das Elements-Panel zeigt das alt. Der schnellste Spot-Check ist, das DOM nach fehlenden oder leeren Alts auf Inhaltsbildern zu durchscrollen.
Screenreader-Testen
Der echte Test ist, was ein Screenreader sagt. Geh deine Seite mit einem davon durch:
- VoiceOver auf macOS (Cmd+F5 zum Umschalten) und iOS — eingebaut.
- NVDA auf Windows — kostenlos, Open Source, der populärste Screenreader.
- JAWS auf Windows — kostenpflichtig, im Enterprise verbreitet.
- TalkBack auf Android.
Hör auf "Grafik" oder "Bild" ohne Beschreibung. Das ist fehlender Alt. Hör darauf, ob Dateinamen vorgelesen werden. Das ist ein fehlendes Alt-Attribut (schlimmer als leerer Alt).
Automatisierte Tools
Automatisierung erwischt offensichtliche Fehler schnell — fehlende Attribute, generische Strings, dekorative Bilder, die nicht markiert sind. Das Deque-Team-Intro zu großartigem Alt-Text deckt ab, was Automatisierung kann und nicht kann. Die großen drei:
- axe DevTools — Browser-Extension von Deque, der Dev-Standard.
- WAVE — kostenlose Extension von WebAIM, super für Nicht-Entwickler.
- Lighthouse — eingebaut in Chrome DevTools, enthält ein Barrierefreiheits-Audit.
Diese Tools erwischen fehlenden Alt, können aber Qualität nicht beurteilen. "Bild" besteht axe; es scheitert in der Review. Paar Automatisierung mit manuellem Screenreader-Testen.
Rückwärtsprüfen, was in einem Bild ist
Manchmal erbst du einen Ordner Bilder ohne Idee, was drin ist — eine Marketing-Übergabe, eine CMS-Migration, ein Ordner Screenshots von einem Kollegen. Unser kostenloses Tool zum Extrahieren von Text aus Bildern führt OCR auf jedem Bild aus, sodass du sichtbaren Text als Startpunkt für den Alt rausziehen kannst. Bei Screenshots voller UI-Labels gibt es dir einen Vorsprung. Unser Bild-Annotations-Tool ist nützlich, um Bilder zu markieren, sodass die hervorgehobene Region zu dem passt, was du beschreibst.
So fügst du Alt-Text in verschiedenen Plattformen hinzu
Reines HTML: 
Markdown: !Your alt text. Dekorativ: .
WordPress: die Mediathek zeigt beim Upload ein Alt-Text-Feld. Der Block-Editor hat auch eines in der Sidebar, wenn ein Bild-Block ausgewählt ist.
Andere CMS-Plattformen: Webflow, Squarespace, Shopify, Wix und Ghost zeigen alle beim Upload ein Alt-Feld, meist beschriftet als "Alt-Text" oder "Alternativer Text".
Soziale Medien: Twitter/X, LinkedIn, Facebook, Instagram und Bluesky unterstützen alle Alt über einen "Beschreibung hinzufügen"- oder "ALT"-Button nach dem Upload. Füll ihn immer aus.
Alt-Text vs. Title-Attribut vs. Bildunterschrift
Diese drei werden oft verwechselt.
| Attribut | Zweck | Sichtbar? | Wird von Screenreadern vorgelesen? |
|---|---|---|---|
alt | Textalternative, wenn das Bild nicht gesehen werden kann | Nur wenn das Bild nicht lädt | Ja (immer) |
title | Tooltip beim Hover | Ja (beim Hover, nur Maus) | Inkonsistent |
| Sichtbare Bildunterschrift unter dem Bild | Ja | Ja |
Nutze alt für die Beschreibung. Immer. Spar dir title, wenn du keinen spezifischen Grund hast — es ist nur Maus, auf Touch-Geräten ignoriert und inkonsistent von Screenreadern gelesen. Nutze
Häufig gestellte Fragen
Was ist die maximale Länge für Alt-Text?
Es gibt keine harte HTML-Grenze, aber die meisten Experten empfehlen, Alt rund 125 Zeichen zu halten. Einige ältere Screenreader (besonders ältere JAWS) schneiden längere Strings ab. Wenn du mehr brauchst, pack das zusätzliche Detail in eine Bildunterschrift oder Fließtext.
Soll ich "Bild von" oder "Foto von" im Alt-Text einbauen?
Nein. Screenreader sagen schon "Bild" vor dem Alt, also liest sich "Bild von einem Sonnenuntergang" als "Bild, Bild von einem Sonnenuntergang". Beschreib einfach den Inhalt: "Sonnenuntergang über dem Pazifik".
Was ist der Unterschied zwischen den Attributen alt und title?
alt ist die Textalternative für Nutzer, die das Bild nicht sehen können. Es ist Pflicht. title ist ein Tooltip beim Maus-Hover, auf Touch unsichtbar und von Screenreadern inkonsistent gelesen. Nutze alt für die Beschreibung; spar dir title, wenn du keinen spezifischen Tooltip-Bedarf hast.
Wie schreibe ich Alt-Text für dekorative Bilder?
Nutze ein leeres Alt-Attribut: alt="". Das sagt Screenreadern, das Bild zu überspringen, was du für Trenner, Verläufe und Hintergrundmuster willst. Lass das Alt-Attribut nicht weg — das ist schlimmer, weil manche Reader auf das Vorlesen des Dateinamens zurückfallen.
Hilft Alt-Text bei SEO?
Ja, aber moderat. Alt-Text ist das wichtigste Textsignal, das Google nutzt, um Bilder zu ranken, und gibt der Seite zusätzlichen thematischen Kontext. Es ist kein magischer Boost, und ihn mit Keywords vollzustopfen geht nach hinten los. Schreib zuerst für Menschen; der SEO-Vorteil folgt.
Wie füge ich Alt-Text in WordPress hinzu?
Wenn du ein Bild in die Mediathek lädst, fülle das Feld Alternativer Text aus. Im Block-Editor wähl einen Bild-Block und nutze das Feld Alt-Text in der Sidebar. WordPress speichert den Alt mit dem Bild, sodass er übernommen wird.
Wie füge ich Alt-Text in Markdown hinzu?
Der Text in eckigen Klammern ist der Alt: !Your alt text. Für dekorative Bilder nutze leere Klammern: . Die meisten Static-Site-Generatoren (Hugo, Jekyll, Astro, Next.js MDX) berücksichtigen das direkt.
Was ist der Unterschied zwischen Alt-Text, Alt-Tag und Alt-Attribut?
Sie meinen alle umgangssprachlich dasselbe, aber technisch: alt ist ein Attribut am
Fazit: Spiel es heute aus
Alt-Text ist eine der wirkungsvollsten Korrekturen auf jeder Site. Er kostet Minuten pro Bild, hilft echten Nutzern täglich und gibt der Bildsuche einen leisen Schub.
Die Kurzversion:
- Beschreib das Bild spezifisch und im Kontext.
- Spar dir "Bild von".
- Rund 125 Zeichen.
- Dekorative Bilder bekommen
alt="". - Funktionale Bilder beschreiben die Funktion.
- Teste mit einem echten Screenreader, nicht nur mit einem Tool.
Wenn du Screenshots beruflich schreibst — Doku, Tutorials, Marketing — paar guten Alt mit guten Capture- und Annotations-Tools. ScreenSnap Pro ist unsere Screenshot- und Recording-App für 29 $ einmalig für Mac und Windows. Die 15-Tools-Annotation-Schicht macht Alt leichter zu schreiben, weil du schon beschriftet hast, was wichtig ist. Für Capture-Qualität schau dir unseren Leitfaden zu hochwertigen Screenshots auf dem Mac an.
Morgan
Indie DeveloperIndie developer, founder of ScreenSnap Pro. A decade of shipping consumer Mac apps and developer tools. Read full bio
@m_0_r_g_a_n_
