🧾 SOP 18: Schreibe Alternativtexte für deine Bilder

Wie du Bilder wirklich für alle sichtbar machst – auch jene, die sie nicht gut sehen können
📄 SOP als PDF downloaden ⚡ Quick Card downloaden 📚 Zum Inhaltsverzeichnis

Wer sollte diese SOP lesen?

👨‍💻 Entwickler | ✍️ Content | 👩‍🎨 Design | 🧑‍⚖️ Recht | 📊 Projektleitung | 👔 Geschäftsführung | 🖥️ IT | 🎯 UX

Überblick zu SOP 18

📌 Was du hier machstDu lernst, wie du aussagekräftige und barrierefreie Alternativtexte (Alt-Texte) für Bilder verfasst – je nach Bildtyp und Zweck.
🧠 VoraussetzungDu arbeitest mit Bildern – sei es in Content, Design, UX oder CMS – und möchtest sicherstellen, dass sie barrierefrei und verständlich sind.
⏱️ DauerVariiert je nach Anzahl und Art der Bilder. In der Regel: 30 bis 60Sekunden pro Bild bei geübter Anwendung.
🎨 Gilt fürAlle digitalen Produkte mit Bildern (Websites, PDFs, Software, E-Mails, Shop-Systeme etc.).
🧷 Gesetzlich verpflichtend?✅ Ja – laut EAA, WCAG und DSGVO.
📍 Nächster SchrittSOP 19: Stelle Farbkontraste sicher

Am Ende hast du einen klaren und einheitlichen Prozess, um alle informativen Bilder auf deiner Website mit sinnvollen Alternativtexten zu versehen. Du kannst zwischen verschiedenen Bildtypen unterscheiden und stellst sicher, dass deine visuellen Inhalte für alle Menschen und auch für Suchmaschinen verständlich sind.

Deine

• Das hängt davon ab, wieviele Bilder du bearbeiten musst. In der Regel empfiehlt es sich dabei, mindestens 30 Sekunden bis 1 Minute pro Bild einzurechnen.

  • Content: Verfasst den Alternativtext beim Hochladen oder Erstellen des Bildes.
  • Design / UX: Kennzeichnet den Typ und den Zweck eines Bildes.
  • Dev / CMS: Stellt sicher, dass die Alt-Attribute technisch korrekt im HTML-Code eingebunden werden.

🕓 Wann musst du das machen?

Bei allen Bildern, die Informationen vermitteln. Insbesondere bei:

  • Produktbildern, Grafiken und Icons
  • Infografiken, Screenshots und Logos
  • Buttons und klickbaren Elementen, die nur ein Bildsymbol enthalten

⚖️ Welches Gesetz verlangt das?

  • BFSG & EAA: Fordern eine barrierefreie Kommunikation.
  • WCAG 2.1: Insbesondere das Erfolgskriterium 1.1.1 (Non-text Content).
  • DSGVO Art. 12: Fordert eine verständliche Information für alle Nutzer:innen, wozu auch die Beschreibung von Bildern gehört. 🧭 Der Prozess im Detail

🧭 Der Prozess im Detail

0 von 5 Schritten erledigt0 %
🟥 Schritt 1: Identifiziere den Bildtyp und entscheide, was du machst

Nicht jedes Bild braucht dieselbe Art von Alt-Text. Und manche brauchen gar kein Alt-Tag.

Darum musst du zuerst den Zweck des Bildes im Kontext der Seite verstehen:

  • Ist es ein informatives Bild (z.B. Grafik, Produktfoto)? Dann Braucht eine Beschreibung des Inhalts.
  • Ist es ein funktionales Bild (z.B. Icon in einem Button)? Das benötigt eine Beschreibung der Funktion, nicht des Icons selbst.
  • Ist es ein dekoratives Bild? Wenn ein Bild rein zur Zierde dient und keine Information trägt, bekommt es ein leeres Alt-Attribut (alt=““), damit Screenreader es ignorieren.
  • Ist es ein Logo? Dann sollte der Name des Unternehmens im Alt-Text stehen.
  • Ist es ein Screenshot? Beschreibe kurz den Inhalt oder den Zweck des Screenshots.
🟧 Schritt 2: Kenne und beachte die Regeln für gute Alternativtexte

Ein guter Alt-Text ist kurz, präzise und auf den Punkt gebracht. Und das heißt:

  • Fange nicht mit „Bild von…“ an: Der Screenreader kündigt bereits an, dass es sich um ein Bild handelt.
  • Fasse dich kurz und sei präzise: In der Regel reichen 100 Zeichen.
  • Berücksichtige den Kontext : Beschreibe nur, was für das Verständnis an dieser Stelle der Seite wichtig ist.
  • Bitte Kein SEO-Keyword-Spamming: Auch wenn Alt-Texte wichtig für SEO sind: Der Text muss für Menschen geschrieben sein, nicht für Suchmaschinen-Crawler.
  • Bleibe tunlichst sachlich und neutral: Beschreibe, was zu sehen ist, nicht, was du interpretierst! Beispiel: Statt„Mann lächelt freundlich“ schreibe lieber „Mann mit Brille am Schreibtisch“).
🟨Schritt 3: Formuliere jetzt den Alt-Text

Um einen effektiven Alternativtext zu schreiben, stelle dir einfach immer folgende Frage: Was ist der Zweck des Bildes im Kontext der Seite?

Die Frage ist also nicht: „ Was sieht man? “ Sondern: „ Was soll die Person daraus mitnehmen?“

Anders gesagt:

🎯 Informiert das Bild? → Dann beschreibe den Inhalt.

🛠 Hat das Bild eine Funktion? → Dann beschreibe die Aktion oder Zielseite.

Hier ein paar Beispiele:

  • Ein Bild mit Einkaufstaschen-Icon, um etwas zum Warenkorb hinzuzufügen:

alt=“In den Warenkorb legen“ (nicht: „Einkaufstasche“ – die Funktion zählt)

  • Dein Firmen logo in der Hauptnavigation

alt=“Zur Startseite“ (optional: „Firmenname – Zur Startseite“, aber bitte kurz halten). Natürlich könntest du hier sagen: „Aber das Bild informiert doch über die Betreiber der Seite!“ Und das ist auch richtig. Aber da eine Funktion unterlegt ist (nämlich Link zur Startseite), hat das hier die größere Bedeutung.

  • Infografik zu einem Zeitplan

alt=“Zeitplan zur Umsetzung des EAA bis Juni 2025″ (inhaltliche Aussage klar zusammenfassen)

  • Bild einer Ärztin mit Formular

alt=“Ärztin füllt Patienteninformationsbogen aus“

(visuelle Szene beschreiben, wenn sie für das Verständnis relevant ist)

🟩 Schritt 4: Binde die Alt Tags technisch korrekt in deine Webseite ein

Wann immer du Alt-Tags schreibst, musst du natürlich sicherstellen , dass du das auch an der technisch korrekten Stelle machst. Du musst also zunächst einmal herausfinden, wo in deiner Technologie der richtige, dafür vorgesehene Platz ist. Hier die wichtigsten Technologien:

  • CMS (WordPress, Shopify etc.): Nutze das dafür vorgesehene „alt“-Feld beim Bildupload.
  • Adobe Acrobat Pro: Hinterlege Alt-Texte für Bilder in PDF-Dokumenten.
  • HTML: Wenn du direkt im Code arbeitest, füge das Attribut so ein: <img src=“bild.jpg“ alt=“Hier dein Alt-Tag“>.
🟦 Schritt 5: Teste und überprüfe

Du bist natürlich auch bei Alt Tags nicht fertig, solange du nicht deine Arbeit kontrolliert und sichergestellt hast,  dass sie den gewünschten Effekt hat.

Wie du das machst? Durch folgende Techniken, die dir bereits aus anderen SOP´s bekannt vorkommen dürften:

  • Screenreader-Test: Höre dir die Seite mit NVDA oder VoiceOver an. Wird das Bild korrekt und verständlich beschrieben?
  • Developer Tools: Blende die Bilder im Browser aus. Fehlt eine wichtige Information, wenn der Alt-Text als Ersatz angezeigt wird?
  • Vier-Augen-Prinzip: Lass eine andere Person den Alt-Text lesen. Ist er klar und passend?

✅ Ergebnis

Am Ende dieser SOP hast du:

  • Einen einheitlichen Prozess zur Erstellung barrierefreier Bilder.
  • Alle relevanten Bilder mit sinnvollen Alternativtexten versehen.
  • Dekorative Bilder technisch korrekt für Screenreader ausgeschlossen.
  • Ein System etabliert, das sich mit SEO, UX und rechtlichen Anforderungen verzahnt.

💬 Copy-Paste-Baustein

Leitfaden für die Nutzung von Alternativtexten

Hier ist ein Vorschlag für eine E-Mail oder ein internes Memo, das du an die beteiligten Abteilungen (Content, Design/UX, Dev/CMS) schicken könntest. Es fasst die wichtigsten Punkte prägnant zusammen und betont die gemeinsame Verantwortung:

Betreff: So sorgen wir gemeinsam für barrierefreie Bilder auf unserer Website!

Hallo zusammen, da wir alle gemeinsam für eine barrierefreie und nutzerfreundliche Website verantwortlich sind, möchte ich euch kurz an ein entscheidendes Element erinnern: Alternativtexte für Bilder (Alt-Texte) . Unsere kürzlich erstellte SOP 15: Alternativtexte für Bilder (findet ihr hier: [Link zu deiner SOP 15 einfügen]) gibt uns einen klaren Leitfaden an die Hand. Damit wir alle am gleichen Strang ziehen und unsere Bilder für alle Nutzer sichtbar machen – ob mit oder ohne Screenreader, und auch für Suchmaschinen –, hier die wichtigsten Punkte auf einen Blick: Warum Alt-Texte? Die Kurzfassung: • Für Menschen: Bilder sind für Screenreader-Nutzer*innen unsichtbar. Alt-Texte beschreiben, was auf dem Bild zu sehen ist oder welche Funktion es hat, und machen Inhalte so verständlich. • Für Suchmaschinen: Google & Co. nutzen Alt-Texte, um den Inhalt unserer Bilder zu verstehen und sie korrekt zu indexieren. • Rechtliche Pflicht: Fehlende oder schlechte Alt-Texte sind ein Verstoß gegen Standards wie WCAG und Gesetze wie das BFSG/EAA. Deine Rolle bei der Alt-Text-Erstellung: Jede Abteilung hat eine Schlüsselrolle, damit unsere Bilder optimal aufbereitet sind: ✍️ Content-Team: • Deine Aufgabe: Du bist verantwortlich für das Formulieren des Alt-Textes , wenn du Bilder hochlädst oder einbindest. • Faustregel: Überlege: „Was soll der Nutzer aus diesem Bild mitnehmen?“ • Informative Bilder (Produktbilder, Grafiken): Beschreibe präzise, was auf dem Bild zu sehen ist (max. ca. 100 Zeichen). Beginne nicht mit „Bild von…“. Bleib sachlich! • Beispiel: alt="Ärztin füllt Patienteninformationsbogen aus" • Funktionale Bilder (Icon in einem Button): Beschreibe die Funktion oder das Ziel, nicht das Bild selbst. • Beispiel: alt="In den Warenkorb legen" (nicht: „Einkaufstasche“) • Logos: Gib den Firmennamen an, evtl. kombiniert mit der Funktion, wenn es ein Link ist. • Beispiel: alt="Firmenname – Zur Startseite" 🎨 Design / UX-Team: • Deine Aufgabe: Du kennzeichnest idealerweise den Typ und Zweck eines Bildes (informativ, funktional, dekorativ), wenn es an Content oder Dev übergeben wird. Dies hilft uns allen bei der korrekten Einordnung. • Wichtig: Rein dekorative Bilder (ohne Informationsgehalt) müssen ein leeres Alt-Attribut erhalten: alt="" . Das sorgt dafür, dass Screenreader sie ignorieren. Bitte kommuniziert dies deutlich! 🌐 Dev / CMS-Team: • Deine Aufgabe: Du stellst sicher, dass die Alt-Attribute technisch korrekt im HTML-Code eingebunden werden, sei es über das CMS-Feld oder direkt im Code ( Dein Alt-Text ). Prüft bitte regelmäßig, ob das CMS die Alt-Texte korrekt ausgibt! Kurze Checkliste für den Alt-Text: • Typ identifiziert? (Informativ, Funktional, Dekorativ, Logo, Screenshot) • Kurz & präzise? (Max. 100 Zeichen, kein „Bild von…“, kein Keyword-Spamming) • Kontext berücksichtigt? (Was ist der Zweck des Bildes an dieser Stelle?) • Technisch korrekt eingebunden? (Im CMS-Feld oder HTML) • Getestet? (Hört sich der Alt-Text mit einem Screenreader sinnvoll an?) Vielen Dank für eure Mithilfe! Lasst uns gemeinsam dafür sorgen, dass unsere Website für wirklich alle zugänglich ist. Bei Fragen schaut in die SOP oder meldet euch gerne bei mir. Beste Grüße, [Dein Name] Fragen und Antworten (FAQ ) zu dieser SOP

Zu SOP 19 → 📚 Zurück zum Inhaltsverzeichnis

Fragen und Antworten (FAQ) zu dieser SOP

Muss ich wirklich jedem Bild einen Alt-Text geben, auch wenn es ein %22Spacer-Bild%22 oder ein rein grafisches Element ist, das nur zur Aufteilung dient?

Nein, und das ist ein ganz wichtiger Punkt! Rein dekorative Bilder – also solche, die keine Informationen vermitteln oder nur zur Layoutgestaltung dienen (wie z.B. transparente Pixel, grafische Trennlinien, oder schmückende Icons ohne Funktion) – sollten ein leeres alt -Attribut ( alt="" ) erhalten. Das signalisiert Screenreadern, dass sie dieses Bild ignorieren sollen, was die User Experience für sehbehinderte Nutzer erheblich verbessert, da sie nicht mit irrelevanten Beschreibungen bombardiert werden.

Was ist der Unterschied zwischen dem Alt-Text und dem title-Attribut eines Bildes? Sollte ich beides verwenden?

Das ist eine häufige Verwechslung!

• Der alt -Text ( alt="Beschreibung" ) ist die alternative Textbeschreibung des Bildes. Er wird angezeigt, wenn das Bild nicht geladen werden kann, und von Screenreadern vorgelesen. Er ist essentiell für Barrierefreiheit und SEO .

• Das title -Attribut ( title="Zusätzliche Information" ) ist eine zusätzliche Information , die als Tooltip angezeigt wird, wenn der Mauszeiger über das Bild bewegt wird. Es ist nicht für die Barrierefreiheit relevant und sollte nur verwendet werden, wenn wirklich ergänzende, nicht-essentielle Informationen notwendig sind. Wenn der title -Text die gleiche Information wie der alt -Text enthält, ist er redundant und kann sogar störend wirken. Im Zweifel lieber nur den Alt-Text nutzen!

Was ist, wenn ein Bild Text enthält? Soll ich den Text im Alt-Attribut wiederholen?

Ja, unbedingt! Wenn ein Bild Text enthält, der nicht im normalen Fließtext der Seite wiederholt wird (z.B. bei einem Screenshot einer Fehlermeldung oder einer Infografik mit kurzen Text-Labels), dann muss dieser Text im Alt-Attribut wiederholt werden . Screenreader können den Text in Bildern nicht „lesen“. Stelle sicher, dass du den Text genau wiedergibst und gegebenenfalls den Kontext oder zusätzliche visuelle Informationen hinzufügst, die für das Verständnis des Bildes wichtig sind.

Meine Seite hat viele kleine Icons, die alle auf etwas klicken oder eine Funktion auslösen (z.B. %22Bearbeiten%22, %22Löschen%22, %22Teilen%22). Muss jedes dieser Icons einen Alt-Text haben?

Ja, jedes funktionale Bild – und dazu gehören auch Icons, die eine Aktion auslösen – braucht einen Alt-Text. Dieser Alt-Text sollte die Funktion des Icons beschreiben.

• Richtig: alt="Element löschen" (wenn das Icon ein Mülleimer ist)

• Falsch: alt="Mülleimer Icon" (da es nicht um den Mülleimer geht, sondern um die Aktion)

Wichtig ist, dass der Alt-Text dem Nutzer sofort klar macht, was passiert, wenn er auf das Icon klickt oder damit interagiert. Wenn das Icon Teil eines Buttons ist, der bereits einen sichtbaren Text hat (z.B. ein „Löschen“-Button, der ein Mülleimer-Icon enthält), kann der Alt-Text des Icons auch leer sein ( alt="" ), da der Button-Text die Funktion bereits kommuniziert.

Wie lang sollte ein Alt-Text maximal sein und was passiert, wenn ich ihn zu lang mache?

Eine genaue Zeichenbegrenzung gibt es technisch nicht, aber die Faustregel von etwa 100-125 Zeichen hat sich etabliert. Warum?

• Screenreader-Verhalten: Viele Screenreader schneiden längere Alt-Texte ab oder lesen sie in einer Weise vor, die das Verständnis erschwert.

• Fokus und Präzision: Ein kurzer Alt-Text zwingt dich, präzise und auf den Punkt zu kommen. Lange Beschreibungen ermüden Nutzer und können dazu führen, dass wichtige Informationen im „Rauschen“ untergehen.

Wenn ein Bild wirklich komplexe Informationen enthält, die unmöglich in 100-125 Zeichen zusammenzufassen sind (z.B. eine detaillierte Infografik), dann solltest du:

• Einen kurzen, prägnanten Alt-Text verwenden, der das Bild zusammenfasst und seinen Zweck angibt (z.B. alt="Infografik zur Bevölkerungsentwicklung in Europa 2000-2020" ).

• Eine längere Beschreibung direkt auf der Seite im Fließtext daneben platzieren oder über einen Link ( Längere Beschreibung ) zugänglich machen, der zu einem separaten, detaillierten Textabschnitt führt. Das longdesc -Attribut wurde in HTML5 als veraltet erklärt und sollte nicht mehr verwendet werden.