Grafiken jeder Art benötigen eine Textalternative, die den Zweck der Grafik angibt. Grundsätzlich ist dabei zwischen funktionalen, identifizierenden, beschreibenden und leeren Textalternativen zu unterscheiden:
- Funktionale Textalternativen kommen für aktive Elemente wie Links oder Formularelemente, die eine Grafik enthalten, in Frage. Genauer gesagt muss der Name des aktiven Elements den Zweck des aktiven Elements angeben. Grafiken, die eine Kontextänderung oder einen Status anzeigen, benötigen dabei Textalternativen.
- Identifizierende Textalternativen geben in knappen Worten den Zweck einer Grafik wieder. Identifizierende Textalternativen kommen insbesondere für illustrierende Grafiken in Frage, die einen geringeren Informationsgehalt haben oder deren Informationsgehalt bereits im umgebenden Text beschrieben wurde.
- Beschreibende Textalternativen kommen für informative Grafiken in Frage, die – wenn sie nicht angezeigt werden – dazu führen, dass wesentliche Inhalte der Seite fehlen. Da eine beschreibende Textalternative nicht immer in knappen Worten (1-2 Sätzen) formuliert werden kann, müssen im Bedarfsfall kurze (identifizierende) Textalternativen mit langen Beschreibungen kombiniert werden.
- Schließlich können leere Alternativtexte für dekorative Grafiken eingesetzt werden, damit in Hilfsmitteln wie Screenreader die Grafiken ignoriert werden können. Alternativ zu einem leeren Alternativtext kommen auch CSS- oder ARIA-Techniken in Frage.
alt-Attribut mit Alternativtext ist eigentlich Pflicht
Techniken für Textalternativen gibt es viele. Die klassische und zuverlässigste Technik ist die Vergabe eines alt-Attributs und eines Alternativtexts für eine Grafik. Für eine HTML-Konformität kann auf das alt-Attribut generell nicht verzichtet werden, aber grundsätzlich wird die Textalternative aus verschiedenen Attributen ermittelt und vom Browser zusammengesetzt. Das bedeutet, dass trotz eines Alternativtexts die Textalternative anders lauten kann.
Dass eine Grafik eine Textalternative aufweist, der vom Alternativtext abweicht, wird oft durch den Einsatz von ARIA-Attributen wie aria-label verursacht. Neben der eigentlichen Beschriftung können weitere ARIA-Attribute die textliche Identifizierung einer Grafik beeinflussen, etwa aria-expanded. Die ARIA-Attribute sollten immer mit Bedacht eingesetzt werden, zumal sie eigentlich nur in einem Screenreader kontrolliert werden können. Sie sollten nur gezielt eingesetzt werden, um konkrete Probleme zu lösen.
Des Weiteren müssen auch dann die Anforderungen an Textalternativen berücksichtigt werden, wenn Grafiken nicht im HTML mit dem <img>-Element, sondern mit CSS eingebunden werden. Für dekorative Grafiken ist die Einbindung per CSS oft unproblematisch, denn solche Grafiken werden von Screenreadern ignoriert. Wenn aber identifizierende oder funktionale Textalternativen erforderlich sind, sollten sie doch im HTML stehen, um ein alt-Attribut und einen Alternativtext erhalten zu können.
ARIA nur im Notfall
Ein Link mit einem vorangestellten Icon könnte beispielsweise eine Textalternative für die Grafik benötigen, etwa wenn das Icon eine Kontextänderung oder den Status des Links anzeigt. In einem solchen Fall kann der Name des Links mit aria-label überschrieben werden:
<a href="/" class="pdf" aria-label="PDF: Download">Download</a>
Das aria-label-Attribut ersetzt in diesem Beispiel den Linktext vollständig. Deshalb muss der Linktext im aria-label mit aufgenommen werden. Es gibt eine andere Variante, um die Textalternative für das Icon zu berücksichtigen, die zudem die Redundanz vermeidet:
<a href="/" class="pdf" title ="PDF">Download</a>
Das title-Attribut wird von Browsern inzwischen als Link-Beschreibung in den Accessibility-Tree des Betriebssystems hineingeschrieben (von wo Screenreader die Information abholen). Screenreader wiederum identifizieren den Link mit Namen und Beschreibung, so dass dieses Beispiel nicht nur die Grafik mit Text ersetzt, sondern auch ohne ARIA auskommt.
Weitere Informationen
Die Anforderungen an Textalternativen sind vielfältig. Im letzten Jahr habe ich für die TU Chemnitz den Leitfaden Alternativtexte für Grafiken entwickelt, in der viele Szenarien und mögliche Lösungswege beschrieben werden. Wenn ich das heute lese, dann fallen mir natürlich Lücken auf, aber für den Einstieg in die Thematik ist der Leitfaden durchaus umfassend.