Ein Alternativtext, kurz Alt-Text, ist ein kurzer Text im alt-Attribut eines Bildes, der sagt, was das Bild an dieser Stelle bedeutet. Screenreader lesen ihn vor, und der Browser zeigt ihn an, wenn das Bild nicht lädt.
Stell dir vor, du telefonierst mit einer Freundin. Sie kann das Bild nicht sehen, du schon. Was sagst du? Sicher nicht „ein JPEG mit 1200 Pixeln“. Du sagst das, was für das Gespräch zählt. Genau das ist ein guter Alt-Text.
Der Alt-Text ist damit eine Entscheidung über den Zweck. Dasselbe Foto kann auf zwei Seiten zwei verschiedene Alt-Texte brauchen. Und manchmal ist die beste Antwort ein leeres alt-Attribut.
Ein Tag inhouse mit Roland Golla, offizieller Cypress Ambassador und seit über 20 Jahren in Testing und Refactoring zu Hause. Auf unserem YouTube Kanal zeigt er in über 70 Live Coding Tutorials, wie Cypress in echten Projekten läuft. Dazu kommt unser Open Source Plugin NCA TESTIFY: Basistests für jede Website, mit einer Zeile im CI/CD Setup. Im Workshop lernt euer Team Setup, stabile Selektoren, Custom Commands und Tests in der Pipeline.
Alt-Texte entstehen an zwei Orten: im Code und in der Redaktion. Wir bauen Frontends mit Astro, React und Vue und sorgen dafür, dass jede Bildkomponente ein alt-Attribut verlangt. Mit Cypress prüfen wir bei jedem Build, ob Bilder ohne Alt-Text, mit Dateinamen oder mit „Bild von“ durchrutschen. In Sulu richten wir die Felder so ein, dass Redakteure den Alt-Text dort pflegen, wo sie das Bild einsetzen.
Was ein Alt-Text leisten muss, regelt das Kriterium zu Nicht-Text-Inhalten in den WCAG. Wir prüfen bestehende Seiten in einem Accessibility Audit, sichern Regeln mit automatisierten Accessibility Tests ab und setzen Korrekturen im barrierefreien Webdesign um. Für Symbole ohne Text hilft die Seite zu barrierefreien Icons.
Nimm ein Foto von einem Team, das lachend vor einem Laptop sitzt. Auf der Startseite einer Agentur reicht vielleicht: „Das NCA Team bei der Arbeit“. Im Artikel über ein neues Büro geht es eher um den Raum. Auf einer Seite über Teamkultur zählt das Lachen. Das Bild bleibt gleich. Der Zweck ändert sich.
Darum hilft eine einfache Frage mehr als jede Checkliste: Was würde ich am Telefon sagen, wenn ich jemandem die Seite vorlese?
Niemand sagt am Telefon „Bild von“. Du sagst einfach, was zu sehen ist. Genau so klingt ein guter Alt-Text.
Die Bildtypen orientieren sich am Images Tutorial der W3C WAI. Für jeden Typ gilt eine eigene Regel:
Bilder mit Text sind ein Sonderfall: Steht wichtiger Text im Bild, gehört dieser Text in den Alt-Text.
Eine feste Zeichengrenze schreiben die WCAG nicht vor. Kurz ist trotzdem gut, weil Screenreader den Alt-Text am Stück vorlesen.
KI-Modelle können heute Bilder beschreiben. Das hilft als Startpunkt, vor allem bei großen Archiven. Die KI weiß aber nicht, warum das Bild auf deiner Seite steht. Sie beschreibt oft das Aussehen und trifft den Zweck nicht. Ein Mensch, der die Seite kennt, sollte jeden Vorschlag lesen und anpassen.
Alt-Texte werden besser, wenn Code, CMS und Redaktion zusammenspielen. Die Tabelle zeigt vier Stufen, vom Zufall bis zum festen Ablauf.
Vier Bildtypen im Markup. So sehen die Regeln im HTML aus. Achte beim Link auf die Funktion und beim Diagramm auf die Beschreibung im Text daneben.
<!-- Dekorativ: leeres alt, Screenreader überspringt das Bild -->
<img src="/img/welle.svg" alt="">
<!-- Informativ: die Aussage in einem Satz -->
<img src="/img/team.jpg" alt="Das NCA Team bespricht ein Projekt am Whiteboard">
<!-- Funktional: was passiert beim Klick -->
<a href="/de">
<img src="/img/logo.svg" alt="Never Code Alone Startseite">
</a>
<!-- Komplex: kurze Kernaussage, Details im Text daneben -->
<figure>
<img src="/img/besucher-2026.png" alt="Balkendiagramm der Besucher pro Monat, Details in der Tabelle darunter">
<figcaption>Besucher pro Monat, alle Werte in der Tabelle unten.</figcaption>
</figure>
Regeln mit Cypress absichern. Der Test prüft drei Dinge: Jedes Bild hat ein alt-Attribut. Kein Alt-Text ist ein Dateiname oder beginnt mit „Bild von“. Und axe meldet keine Fehler bei den Regeln image-alt und image-redundant-alt. Für den letzten Teil braucht ihr das Paket cypress-axe.
describe('Alt-Texte', () => {
beforeEach(() => {
cy.visit('/')
})
it('jedes Bild hat ein alt-Attribut', () => {
cy.get('img').each(($img) => {
expect($img).to.have.attr('alt')
})
})
it('kein Dateiname und kein "Bild von"', () => {
cy.get('img[alt]').each(($img) => {
const alt = $img.attr('alt').trim()
expect(alt, 'Dateiname').not.to.match(/\.(jpe?g|png|gif|webp|avif|svg)$/i)
expect(alt, 'Einleitung').not.to.match(/^(bild|foto|grafik) (von|eines|einer)/i)
})
})
it('axe findet keine Alt-Text Fehler', () => {
cy.injectAxe()
cy.checkA11y(null, { runOnly: ['image-alt', 'image-redundant-alt'] })
})
})
Screen readers and search engines already know that it’s an image
Nicht Text Inhalte 2026: Textalternativen für Bilder, SVG, Icons, Diagramme und Medien nach WCAG 1.1.1, mit Code Beispielen und Cypress Tests. Im NCA Glossar.
Mehr erfahrenEntwickler sorgen dafür, dass jedes Bild ein alt-Attribut bekommt und dekorative Bilder sauber leer bleiben. Die Redaktion entscheidet, was ein Bild an seiner Stelle bedeutet. Und Tests passen auf, dass nach dem nächsten Relaunch nicht alles wieder bei Stufe 1 landet. Fehlt eine dieser drei Rollen, merken es zuerst die Menschen, die auf Text to Speech und Screenreader angewiesen sind.
Alt-Texte hängen eng mit anderen Themen zusammen. Wer Bilder mit Text einsetzt, sollte auf Farben und Kontraste achten. Sauberes Semantic HTML mit figure und figcaption hilft bei komplexen Grafiken. Für SVGs und Bedienelemente greifen die Regeln zu ARIA. Und Bilder in Dokumenten brauchen ebenfalls Alternativtexte, wie die Seite zu PDF und Barrierefreiheit zeigt.
Welche Werkzeuge fehlende Alt-Texte finden, steht bei den Accessibility Testing Tools. Den rechtlichen Rahmen in Deutschland setzt das BFSG, in Europa der European Accessibility Act.
Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.
Leeres alt, Länge, Links, Diagramme und KI: die wichtigsten Antworten rund um den Alt-Text.
Ein Alt-Text ist ein kurzer Text im alt-Attribut eines Bildes. Er sagt, was das Bild an seiner Stelle auf der Seite bedeutet. Screenreader lesen ihn vor, und Browser zeigen ihn an, wenn das Bild nicht lädt. Auch 2026 ist er die wichtigste Grundlage, damit Bilder für blinde und sehbehinderte Menschen zugänglich sind.
Immer dann, wenn ein Bild nur schmückt oder nichts sagt, was nicht schon im Text daneben steht. Das alt-Attribut bleibt dabei im Code, aber ohne Inhalt. So überspringt der Screenreader das Bild. Lass das Attribut nie ganz weg, sonst lesen manche Screenreader den Dateinamen vor. Diese Regel gilt 2026 genauso wie vorher.
So kurz wie möglich, so lang wie nötig. Die WCAG nennen keine feste Zeichengrenze. Für die meisten Bilder reicht ein Satz, der die Aussage trifft. Screenreader lesen den Alt-Text am Stück vor, deshalb stören lange Texte beim Zuhören. Braucht ein Bild mehr Erklärung, gehört diese 2026 wie bisher in den Text auf der Seite.
Als Entwurf ja, als fertiger Text meist nicht. KI-Modelle beschreiben 2026 Bilder oft treffend, kennen aber den Zweck des Bildes auf deiner Seite nicht. Sie schreiben über das Aussehen und verfehlen die Aussage. Nutze KI deshalb für große Archive als Startpunkt und lass jeden Vorschlag von jemandem prüfen, der die Seite und ihr Ziel kennt.
Das Erfolgskriterium 1.1.1 Nicht-Text-Inhalt auf Stufe A. Es verlangt für Bilder und andere Inhalte ohne Text eine Alternative in Textform, die denselben Zweck erfüllt. Dekorative Bilder sollen so umgesetzt sein, dass assistive Technologien sie ignorieren können. Das Kriterium steht 2026 unverändert in den WCAG 2.2.
Weil der Screenreader schon ansagt, dass es sich um ein Bild handelt. Ein „Bild von“ oder „Foto von“ verdoppelt diese Information und kostet beim Zuhören Zeit. Beginne direkt mit der Aussage. Nur wenn die Art des Bildes selbst wichtig ist, etwa bei einem Gemälde oder Screenshot, darfst du sie nennen.
Die Funktion des Links, also wohin er führt oder was passiert. Ein Logo, das zur Startseite verlinkt, bekommt zum Beispiel „Startseite“ mit dem Namen der Firma. Eine Lupe im Suchfeld bekommt „Suche starten“. Wie das Symbol aussieht, ist für Screenreader Nutzer an dieser Stelle unwichtig.
In zwei Teilen. Der Alt-Text nennt kurz, um welches Diagramm es geht und wo die Details stehen. Die Daten selbst stehen ausführlich auf der Seite, etwa als Tabelle oder als Text unter der Grafik. So bekommen alle dieselben Informationen, und der Alt-Text bleibt kurz genug zum Zuhören.
Die Bildunterschrift sehen alle, den Alt-Text hören vor allem Screenreader Nutzer. Die Bildunterschrift ergänzt das Bild, etwa mit Ort oder Quelle. Der Alt-Text ersetzt das Bild für Menschen, die es nicht sehen. Schreibe in beide nicht denselben Satz, sonst hören Nutzer ihn doppelt.
Ja, ein guter Alt-Text hilft Suchmaschinen, ein Bild einzuordnen. Google nennt den Alt-Text in seinen Richtlinien zur Bildersuche ausdrücklich. Wichtig ist aber die Reihenfolge: Schreibe zuerst für Menschen. Ein Alt-Text voller Suchbegriffe ist für Screenreader Nutzer unbrauchbar, und Google rät selbst davon ab.
Ja, wenn sie eine Aussage oder Funktion haben. Bei einer SVG im img Element nutzt du einfach das alt-Attribut. Bei einer SVG direkt im Code helfen role="img" und ein title Element oder aria-label. Rein dekorative Icons neben einem Text versteckst du mit aria-hidden="true" vor Screenreadern.
Werkzeuge wie axe finden fehlende Alt-Texte mit der Regel image-alt und doppelte Texte mit image-redundant-alt. Mit Cypress und cypress-axe lassen sich diese Prüfungen in jeden Build einbauen. Ob ein Alt-Text den Zweck trifft, kann aber kein Tool entscheiden. Dafür braucht es einen Menschen, der die Seite kennt.
