Entscheidungsschema für Alternativtexte veröffentlicht in 2017zuletzt bearbeitet in 2022

Grafiken als Teil eines aktiven Elements

Wenn eine Grafik Teil eines aktiven Elements (z.B. Links, Schaltflächen oder anderen Komponenten) ist, dann kommt es bei der Textalternative für die Grafik darauf an, dass der Zweck des aktiven Elements im Namen des aktiven Elements angegeben wird. Eine Möglichkeit, den Namen eines Links zu bestimmen, der nur aus einer Grafik besteht, ist mit dem Alternativtext der Grafik. Solche Grafiken benötigen einen funktionalen Alternativtext, z.B.:

Die Anforderungen für Linktexte weichen dabei leicht von den Anforderungen für sonstige Beschriftungen aktiver Elemente ab:

• Wenn das aktive Element ein Link ist, dann muss der Linkzweck entweder unter Berücksichtigung des Namens und des technischen Kontextes (Konformitätsstufe A) oder nur anhand des Namens (Konformitätsstufe AAA) bestimmt werden können.
• Wenn das aktive Element eine Schaltfläche oder eine andere Komponente ist, dann muss die Beschriftung beschreibend sein, d.h. jede Komponente muss eindeutig identifiziert werden können.

In beiden Fällen geht es darum, dass bei einer Auflistung von Links oder Formularelementen die ermittelten Namen nachvollziehbar sind. Im folgenden Screenshot wird eine Screenreader-Funktion aufgerufen, um die Formularelemente einer Kontaktseite aufzulisten. Auf der Seite befindet sich auch eine Suchfunktion.

Abgrenzungen für funktionale Textalternativen

Der Name eines aktiven Elements setzt sich aus dem im aktiven Element enthaltenen Text zusammen. So erhält der Alternativtext eines grafischen Buttons eine entscheidende Bedeutung bei der Bestimmung des Namens:

Da es sich bei diesem Button um ein Lupensymbol handelt, muss der Alternativtext für das Lupensymbol die Funktion beschreiben. In Frage kommen Alternativtexte wie "Suchen", "Finden" oder "Suche starten":

Wenn hingegen der Text "Suchen" zusammen mit einem Icon als Schaltfläche verwendet wird:

dann sollte die Grafik durch Vergabe eines leeren Alternativtexts vor Screenreadern verborgen werden, denn der Name der Schaltfläche ermittelt sich bereits aus dem sichtbaren Text:

Ein weiterer typischer Fall, in dem die funktionale Textalternative abgegrenzt werden muss, ist der Einsatz von verlinkten Teaser-Grafiken. In diesem Fall müssen funktionale Textalternativen nicht nur gegen leere Alternativtexte, sondern auch gegen identifizierende Textalternativen abgegrenzt werden.

Einige Besonderheiten

Bei aktiven Elementen, die Grafiken enthalten, müssen nach den Web Content Accessibility Guidelines (WCAG) 2.1 weitere Aspekte berücksichtigt werden:

• Wenn Grafiken eine Status- oder andere Information vermitteln,wird diese Information auch im Namen des aktiven Elements berücksichtigt?

  <nav>
  <ul>
    <li><a href="/">Startseite</a></li>
<li><a href="produkte.html"><img src="aktuell.png" alt="Aktuelle Seite: ">Produkte</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>  
</nav>


  Die Textalternative muss in solchen Situationen nicht zwingend mittels eines Alternativtextes bestimmt werden. Gerade bei Statusinformationen können verschiedene ARIA-Attribute nützlich sein, denn die ARIA-Attribute führen dazu, dass Screenreader den Namen eines aktiven Elements um passende Statusinformationen ergänzen. Statt mit einem Alternativtext "Aktuelle Seite: " für die Grafik kann der Link zur aktuellen Seite z.B. mit einem aria-current-Attribut ergänzt werden:

  <nav>
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="produkte.html" aria-current="page"><img src="aktuell.png" alt="">Produkte</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>  
</nav>


• Wenn eine Grafik mehrfach als aktives Element auf der gleichen Seite vorkommt aber unterschiedliche Funktionen auslöst,

  

  besteht der Name des aktiven Elements aus einem gemeinsamen Text (z.B. "Information zu") und einem funktionsbezogenen Text (z.B. "Postleitzahl" und "Ort")?

• Wenn Grafiken eine Kontextänderung signalisieren (z.B. neues Fenster, anderes Format, andere Anwendung), wird diese Information auch im Namen des aktiven Elements berücksichtigt?

  <a href="datei.pdf">
  <img src="pdf.gif" alt="PDF"> Download
</a>

Berechnung des Namens

Die Berechnung des Namens erfolgt durch den Browser, der die Informationen im sogenannten Accessibility-Tree des Betriebssystems ablegt; die Algorithmen werden in den HTML Accessibility API Mappings (HTML-AAM) spezifiziert.

Zwei Aspekte sollten dabei insbesondere berücksichtigt werden:

1. Aktive Elemente werden zwar durch den errechneten Namen bezeichnet, aber sie werden ggf. durch eine Beschreibung ergänzt. Das folgende Beispiel zeigt redundante Texte im Namen und in der Beschreibung:

   <a href="javascript:window.print();" title="Diese Seite drucken">
    <img src="drucken.png" alt="Drucken"> Drucken
</a>

   Der Name dieses Links ist "Drucken Drucken", was außerdem durch die Beschreibung (title-Attribut) ergänzt wird zu "Drucken Drucken Diese Seite Drucken". Solche Link-Namen sind konform zu den WCAG 2.1, aber ein Verbesserungspotenzial ist erkennbar.

2. Der Name eines aktiven Elements kann mit ARIA-Attributen überschrieben werden, d.h. wenn ein Link oder Button beispielsweise mit dem aria-label-Attribut beschriftet wird, dann werden sämtliche Texte innerhalb des Links oder Buttons ignoriert. Die wichtigste Regel beim Einsatz von ARIA lautet aber, wenn HTML-Techniken für die Herstellung der Barrierefreiheit verfügbar sind, dann ist auf ARIA zu verzichten.

Lese-Tipps

Zur Pflichtlektüre über Textalternativen gehören:

• Masterarbeit von Sarah Kitza: Gestaltung von Alternativtexten – eine empirische Studie aus Nutzerinnen- und Nutzersicht
• TU Chemnitz: Leitfaden: Alternativtexte für Grafiken