Alternativtexte für visuelle Inhalte

Bevor Sie alternativen Text über ein unsichtbares alt-Attribut hinzufügen, das nur einen Bruchteil der Nutzenden erreicht, sollten Sie überlegen, ob der hinzugefügte Text nicht für alle Nutzenden hilfreich wäre. Wenn die Antwort „Ja“ lautet, dann sollten Sie stattdessen eine sichtbare Bildbeschriftung verwenden, z. B. via <figure> <figcaption>.

• Enthält das Bild Text?
  • Ja:
    • … und der Text ist auch als echter HTML-Text in der Nähe vorhanden. → Verwenden Sie ein leeres alt-Attribut.
    • … und der Text wird nur für visuelle Effekte oder zufällig angezeigt. → Verwenden Sie ein leeres alt-Attribut.
    • … und der Text hat eine spezifische Funktion, zum Beispiel ein Icon. → Verwenden Sie das alt-Attribut, um die Funktion des Bildes zu vermitteln.
    • … und der funktionale Text im Bild ist sonst nicht vorhanden. → Verwenden Sie das alt-Attribut, um den sichtbaren Bildtext einzufügen.
  • Nein:
    • Weiter
• Wird das Bild in einem Link oder einem Button verwendet, und wäre es nicht oder kaum zu verstehen was der Link oder der Button auslöst, wenn das Bild nicht vorhanden ist?
  • Ja:
    • → Verwenden Sie das alt-Attribut, um das Ziel des Links oder der Aktion mitzuteilen. Beispiel: alt="Name des Anbieters" auf einem verlinkten Logo wird als „Link Name des Anbieters“ vorgelesen, d. h. Screenreader fügen „Link“ selbst hinzu und ein Link im alt="" ist somit unnötig redundant.
  • Nein:
    • Weiter
• Wird das Bild in einem Link oder einem Button verwendet, und wäre es nicht zu verstehen was der Link oder der Button auslöst, wenn das Bild nicht vorhanden ist?
  • Ja:
    • → Verwenden Sie das alt-Attribut, um das Ziel des Links oder der Aktion mitzuteilen.
    • Nein, aber hat das Bild eine Bedeutung für die aktuelle Seite oder den aktuellen Kontext?
    • Ja, und es ist eine einfache Grafik oder ein Foto. → Verwenden Sie eine kurze Beschreibung des Bildes auf eine Weise, die diese Bedeutung im alt-Attribut angibt und die mit einem Punkt endet.
    • … oder es ist ein Schaubild oder eine komplexe Information? → Fügen Sie die im Bild enthaltenen Informationen an anderer Stelle auf der Seite ein.
    • … oder es zeigt Inhalte, die durch echten Text in der Nähe überflüssig sind? → Verwenden Sie ein leeres alt-Attribut.
    • Ist das Bild rein dekorativ oder nicht für die Nutzenden gedacht? → Wenn als HTML <img> implementiert (incl. SVG): Verwenden Sie ein leeres alt-Attribut. → Wenn als CSS background-image implementiert: Keine Aktion erforderlich, Bild wird vom Screenreader ignoriert.
  • Nein:
    • Weiter
• Ist der Anwendungsfall des Bildes oben nicht aufgeführt oder ist es unklar, welchen alternativen Text Sie bereitstellen möchten?
  • Dieser Entscheidungsbaum deckt noch nicht alle möglichen Fälle ab. Bitte stellen Sie uns Anwendungsfälle zur Verfügung, die nicht von den oben genannten abgedeckt sind, und wir werden diese im Design System spezifizieren.

Sonderfall SVG

Wenn das SVG über das <img>-Element eingebettet ist

→ Benutzen Sie ein herkömmliches alt="Alternativtext" und folgen Sie der obigen Anleitung

Wenn das SVG als <svg>-Element implementiert ist

→ Stellen Sie sicher, dass das SVG ein adäquates <title>-Element enthält

→ Alternativ: Benutzen Sie role="img" und aria-label="Alternativtext"

Potenzielle Fehler bei der Vergabe von Alternativtexten

• Lassen Sie das alt-Attribut nicht aus
  Screenreader werden versuchen, diesen Fehler zu beheben und den Dateinamen einschließlich seiner vollständigen URL vorlesen.
• Verwenden Sie keinen alternativen Text für Black Hat SEO
  Keyword-Stuffing zum Zwecke der Suchmaschinenoptimierung ist nicht erlaubt.
• Übertreiben Sie nicht
  Es ist nicht nötig, jedem Alternativtext ein "Bild: " oder "Das Bild zeigt …" voranzustellen, da dies zu unnötiger Redundanz führt – Screenreader kündigen das Vorhandensein eines Bildes von selbst an.
  Es ist auch nicht nötig, jedem alt für ein Logo oder ein Icon ein "Icon: Beschreibung" oder "Logo von Anbieter XYZ" voranzustellen. Bei Logos reicht der Name des Anbieters, bei Icons die Beschreibung der dahinterliegenden Funktion, wenn diese den Inhalt eines Icon-Buttons bilden.
• Schreiben Sie nicht zu lange Alternativtexte
  Wenn Sie alt-Attribute für SEO verwenden sollten Sie beachten, dass Google nur die ersten 16 Wörter indexiert. Bedenken Sie auch, dass zu viel Alternativtext unnötigen „Lärm“ und damit unnötige kognitive Last für die Nutzenden von Screenreadern erzeugt. Daher sollten sie sich auf maximal 80 Zeichen beschränken.
• Wiederholen Sie sich nicht
  Die Wiederholung von Phrasen, die in unmittelbarer Nähe nochmals im HTML stehen erzeugt unnötige Redundanz und sollte vermieden werden.
• Verwenden Sie nicht das title-Attribut als Textalternative
  title ist kein Ersatz für einen echten Alternativtext. Screenreader lesen in der Regel entweder alt oder title, oder je nach Einstellung auch beide Werte. Daher ist dies ein unnötiger Aufwand und kann zu Verwirrung führen, wenn der Inhalt der beiden nicht übereinstimmt.
  Zulässige Ausnahme dieser Regel sind funktionale Icons, die einen Erklärungstext benötigen. Bedenken Sie bei der Gestaltung der Icons, dass title jedoch nicht für sehende Tastaturnutzer (z. B. bei motorischer Behinderung) zugänglich ist.
  • Benutzen Sie nie das title-Attribut bei Bilden mit leerem alt-Attribut.
  • Diese Vorgaben gelten sinngemäß auch für aria-label und ähnliche Hilfskonstrukte.
  • Verwenden Sie nicht das longdesc-Attribut. Falls ein komplexes Bild eine längere Beschreibung benötigt als im Alternativtext möglich, dann besteht die Chance, dass alle Nutzenden von diesem Text profitieren würden und nicht nur Blinde. Hier sollten Sie die Bereitstellung einer sichtbaren Textbeschreibung erwägen.