Logo von Einfach-sichtbar.online – Webdesign Agentur für Konstanz und Bodensee
  • Konstanz & Bodensee
Kontakt

Alt-Texte für Bilder: SEO und Barrierefreiheit richtig umsetzen

Ein Alt-Text ist die programmgesteuerte Bildbeschreibung im alt-Attribut eines <img>-Elements. Drei Regeln gelten sofort:

Warum das zählt: Screenreader lesen Alt-Texte vor. Google nutzt sie als semantisches Signal für die Bildindexierung. Und die BITV sowie die WCAG machen korrekte Alt-Texte zur Compliance-Pflicht.

Wichtige Erkenntnisse

Korrekte Alt-Texte verbessern gleichzeitig die Barrierefreiheit für sehbehinderte Nutzer und die Sichtbarkeit von Bildern in der Google-Suche, ohne dass dafür zwei getrennte Workflows nötig sind.

Thema Details
Alt-Text-Grundregel Beschreibend, kontextbezogen, maximal 60–100 Zeichen für einfache Bilder.
Dekorative Bilder Immer alt="" setzen, damit Screenreader die Grafik überspringen.
Dateinamen und Kontext Sprechende Dateinamen wie produkt-blau.webp stärken das Bildsignal für Google.
Technische Performance WebP-Format, srcset und korrekte width/height-Angaben verhindern schlechte Core Web Vitals.
Einfach-sichtbar Bietet Accessibility-Audits und barrierefreie Website-Erstellung für Unternehmen in der Bodenseeregion.

Inhaltsverzeichnis

Warum Alt-Texte für SEO und Barrierefreiheit so wichtig sind

Alt-Texte erfüllen drei Funktionen gleichzeitig, und das ist ihr eigentlicher Wert.

Erstens: Zugänglichkeit. Blinde und sehbehinderte Menschen nutzen Screenreader wie JAWS oder NVDA, die Alt-Texte vorlesen. Fehlt der Text oder ist er nichtssagend, geht Information verloren. Das ist kein Komfortproblem, sondern ein Ausschlussproblem.

Zweitens: Suchmaschinen. Google empfiehlt beschreibende Alt-Texte ausdrücklich als wichtigstes Attribut für semantische Bildinformationen. Google kombiniert Alt-Text mit Computer Vision und dem umgebenden Seitentext. Ein Bild ohne Alt-Text ist für den Algorithmus weitgehend unsichtbar.

Drittens: Fallback. Lädt ein Bild nicht, zeigt der Browser den Alt-Text an. Gerade auf mobilen Verbindungen oder bei Bildladefehlern ist das der einzige Inhalt, den der Nutzer sieht.

Hinweis: Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) gelten Barrierefreiheitspflichten ab Juni 2025 auch für viele private Anbieter digitaler Produkte und Dienstleistungen in Deutschland.

Wie schreibt man gute Alt-Texte für Bilder?

Die Bundesfachstelle Barrierefreiheit bringt es auf den Punkt: „So ausführlich wie nötig, so wenig wie möglich.“ Das ist keine Floskel, sondern eine Arbeitsanweisung.

Konkret bedeutet das: Beschreibe zuerst, was das Bild im Kontext der Seite leistet, dann erst Details. Ein Produktfoto auf einer Verkaufsseite braucht andere Informationen als dasselbe Foto in einem Blogbeitrag über Materialien.

Formale Regeln:

Do/Don’t-Beispiele:

Bildtyp ✗ Schlecht ✓ Gut
Produktfoto alt="Tasse" alt="Handgemachte Keramiktasse in Dunkelblau, 300 ml"
Teamfoto alt="Bild" alt="Das Einfach-sichtbar-Team beim Kundengespräch in Konstanz"
Screenshot alt="Screenshot" alt="Google Search Console: Klickrate nach Seitentyp gefiltert"
Infografik alt="Infografik SEO" alt="Infografik: Fünf Schritte zur Bildoptimierung für Suchmaschinen"

Bei verlinkten Bildern beschreibt der Alt-Text das Ziel des Links, nicht das Bild selbst. Ein Logo, das zur Startseite führt: alt="Zur Startseite von Einfach-sichtbar".

Profi-Tipp: Schreib den Alt-Text, bevor du das Bild hochlädst. Wer erst im Nachhinein beschriftet, tendiert zu Kurzform-Texten wie „Bild1“. Wer beim Einfügen beschriftet, denkt noch im Kontext der Seite.

Wann sollte der Alt-Text leer bleiben?

Nicht jedes Bild braucht einen Alt-Text. Das ist eine häufige Fehlannahme, die zu Screenreader-Lärm führt: Wenn ein Screenreader jede dekorative Linie, jeden Hintergrundverlauf und jede Trennlinie vorliest, verliert der Nutzer den roten Faden.

Die Unterscheidung ist einfach:

Wichtig: Das alt-Attribut muss trotzdem vorhanden sein. <img src="linie.svg"> ohne alt ist ein Fehler. <img src="linie.svg" alt=""> ist korrekt.

Praktische Prüfregel vor dem Einfügen:

Laut BIK Für Alle werden dekorative Grafiken mit leerem alt-Attribut von Screenreadern korrekt übersprungen, was die Nutzererfahrung für sehbehinderte Menschen deutlich verbessert.

Spezialfälle: Logos, Buttons, Icons und komplexe Grafiken

Logos und Markenzeichen

Ein Logo, das nur zur Dekoration dient: alt="". Ein Logo, das zur Startseite verlinkt: alt="Startseite [Markenname]". Ein Logo in einem Artikel über das Unternehmen: alt="Logo von [Markenname]". Der Kontext entscheidet.

Buttons und Icons

Der Alt-Text beschreibt die Aktion, nicht das Symbol. Ein Lupen-Icon in einem Suchfeld: alt="Suchen". Ein Play-Button: alt="Video abspielen". Ein Schließen-Button: alt="Schließen". Nie: alt="Lupe" oder alt="Dreieck".

Diagramme und Charts

Kurzer Alt-Text im alt-Attribut, ausführliche Beschreibung im umgebenden Text oder als separate Langbeschreibung. Die W3C Alt-Techniques empfehlen für komplexe Grafiken ergänzende Langbeschreibungen, wenn der Alt-Text allein nicht ausreicht.

Beispiel:

<figure>
  <img src="umsatz-2025.png" 
       alt="Balkendiagramm: Umsatzentwicklung Q1–Q4 2025">
  <figcaption>
    Umsatz 2025: Q1 42.000 €, Q2 55.000 €, Q3 61.000 €, Q4 78.000 €.
  </figcaption>
</figure>

Karten

alt="Karte: Standort Einfach-sichtbar, Konstanz am Bodensee" reicht als Alt-Text. Die eigentliche Wegbeschreibung gehört als Text auf die Seite, nicht in den Alt-Text.

Profi-Tipp: Bei Infografiken, die viele Daten enthalten, ist eine aufklappbare Textalternative (etwa per <details>-Element) oft die sauberste Lösung. Sie ist barrierefrei, schadet der Optik nicht und gibt Google zusätzlichen Textinhalt.

Dateinamen, Bildtitel, Bildunterschriften und strukturierte Daten

Dateinamen sind das erste Signal, das Google beim Crawlen eines Bildes liest, noch vor dem Alt-Text. Laut Google Search Central und intenSEO ist ein sprechender Dateiname wie keramiktasse-dunkelblau-300ml.jpg deutlich wertvoller als IMG00023.JPG.

Regeln für Dateinamen:

Element Funktion Ersetzt Alt-Text?
alt-Attribut Textalternative für Screenreader und Suchmaschinen Ist der Alt-Text
title-Attribut Tooltip beim Hover, kaum SEO-Relevanz Nein
figcaption Sichtbare Bildunterschrift für alle Nutzer Nein, ergänzt ihn
Dateiname Erstes Crawling-Signal für Suchmaschinen Nein, ergänzt ihn

Das title-Attribut wird von Screenreadern unterschiedlich behandelt und sollte nicht als Ersatz für alt verwendet werden. figcaption hingegen ist sichtbar für alle und kann Copyright-Angaben, Quellen oder ergänzende Informationen enthalten.

Schema.org ImageObject lohnt sich vor allem für Produktbilder, Rezeptfotos und redaktionelle Bilder, die in der Google-Bildersuche prominent erscheinen sollen. Wer strukturierte Daten konsequent pflegt, gibt Google zusätzlichen Kontext, der über den Alt-Text hinausgeht.

Bildformate, Komprimierung und Performance: Was hat das mit Alt-Texten zu tun?

Direkt: nichts. Indirekt: alles. Ein perfekter Alt-Text nützt wenig, wenn das Bild drei Sekunden zum Laden braucht und Google die Seite wegen schlechter Core Web Vitals zurückstuft. Laut ImageSEO sind Alt-Texte das wichtigste semantische Signal, aber technische Performance ist gleichwertig relevant.

Formatempfehlungen:

Responsive Bilder und Lazy-Loading:

<img 
  src="produkt-klein.webp"
  srcset="produkt-klein.webp 480w, produkt-gross.webp 1200w"
  sizes="(max-width: 600px) 480px, 1200px"
  alt="Handgemachte Keramiktasse in Dunkelblau, 300 ml"
  loading="lazy"
  width="1200"
  height="800">

loading="lazy" verzögert das Laden von Bildern außerhalb des sichtbaren Bereichs. Bilder, die beim ersten Seitenaufruf sofort sichtbar sind (Above the Fold), sollten loading="eager" erhalten oder das Attribut ganz weglassen, da Lazy-Loading dort den Largest Contentful Paint (LCP) verschlechtert.

width und height direkt im <img>-Tag verhindern Layout-Verschiebungen (Cumulative Layout Shift, CLS), einen weiteren Core-Web-Vitals-Faktor.

Wie prüft und pflegt man Alt-Texte siteweit?

Einzelne Bilder zu beschriften ist einfach. Hunderte Bilder auf einer gewachsenen Website systematisch zu prüfen, ist eine andere Aufgabe. Hier hilft ein strukturierter Workflow.

Schrittweise Checkliste:

  1. Inventarisieren: Alle Bilder der Website erfassen. Tools wie Screaming Frog SEO Spider oder Sitebulb exportieren eine vollständige Liste aller <img>-Elemente mit ihren Alt-Attributen.
  2. Priorisieren: Seiten mit hohem Traffic zuerst. Produktseiten, Startseite und Landingpages haben den größten Hebel.
  3. Templates erstellen: Für wiederkehrende Bildtypen (Teamfotos, Produktbilder, Screenshots) Formulierungsvorlagen anlegen.
  4. Redaktionelle Regeln einführen: Alt-Text-Pflicht als festen Schritt im Veröffentlichungsprozess verankern, nicht als nachträgliche Aufgabe.
  5. QA-Tests: Screenreader-Test mit NVDA (Windows, kostenlos) oder VoiceOver (macOS/iOS, integriert). Automatisierte Prüfung mit axe DevTools oder WAVE.

WordPress-Praxis:

In WordPress trägt man Alt-Texte direkt in der Mediathek ein, im Feld „Alternativtext“. Beim Einfügen eines Bildes in den Editor erscheint dasselbe Feld im Block-Panel rechts. Plugins wie Yoast SEO oder Rank Math warnen, wenn Bilder ohne Alt-Text veröffentlicht werden. Für Massenbearbeitung gibt es Plugins wie „Bulk Auto Image Alt Text“, die fehlende Alt-Texte seitenübergreifend anzeigen und bearbeiten lassen.

Hände bearbeiten das Alt-Text-Feld auf einem Tablet

Profi-Tipp: Ein einfacher Screaming-Frog-Export nach Excel, gefiltert nach leeren Alt-Attributen auf informativen Bildern, gibt dir in 20 Minuten eine priorisierte Aufgabenliste für die gesamte Website. Kombiniere das mit dem Traffic-Bericht aus der Google Search Console, um die wichtigsten Seiten zuerst zu bearbeiten.

Wer einen Website-Relaunch plant, sollte Alt-Texte von Anfang an in die Migrationscheckliste aufnehmen, nicht als letzten Punkt.

Wie Einfach-sichtbar Alt-Texte in Projekte integriert

Alt-Texte sind bei Einfach-sichtbar kein Nachgedanke. Bei jedem Website-Projekt wird die Alt-Text-Pflege als fester Bestandteil des Abnahme-Prozesses behandelt: Kein Bild geht ohne beschreibenden Alt-Text live, dekorative Grafiken erhalten konsequent alt="", und für komplexe Infografiken wird eine Textalternative direkt im Seitentext eingeplant.

Was in der Praxis häufig fehlt, ist nicht das Wissen, sondern die Routine. Redaktionsteams, die unter Zeitdruck arbeiten, überspringen Alt-Texte, weil sie nicht im Workflow verankert sind. Einfach-sichtbar löst das durch klare Übergabe-Dokumentation und, wo gewünscht, durch Schulung des Kundenteams direkt im CMS.

Für Bestandswebsites bietet die Agentur schnelle Audits an: Inventarisierung aller Bilder, Priorisierung nach Traffic und Seitentyp, Umsetzung der fehlenden Alt-Texte. Das ist kein monatelanger Prozess, sondern oft in wenigen Tagen erledigt.

Barrierefreie, SEO-optimierte Webseiten aus einer Hand

Wer Alt-Texte, Bildformate, Core Web Vitals und Barrierefreiheit einzeln angeht, verliert viel Zeit. Einfach-sichtbar bündelt all das in einem Workflow: von der ersten Konzeption bis zur laufenden Pflege.

Einfach-sichtbar

Für kleine Unternehmen, Freiberufler und lokale Geschäfte in Konstanz und der Bodenseeregion bedeutet das: eine Website, die von Anfang an technisch sauber, barrierefrei und für Google sichtbar ist, ohne dass Sie sich durch Dutzende Einzelthemen arbeiten müssen. Die Pakete sind flexibel, die Betreuung persönlich.

Konkret buchbar: ein Accessibility- und SEO-Audit Ihrer bestehenden Website, die vollständige Überarbeitung von Bildstruktur und Alt-Texten oder ein kompletter Website-Relaunch mit sauberem technischem Fundament. Schreiben Sie uns direkt über Einfach-sichtbar und schildern Sie Ihre Situation.

Quellen

Empfehlung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert