Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Entscheidungsschema für den Alternativtext veröffentlicht in 2017

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 das aktive Element einen Intern: Namen hat. Grafiken benötigen einen funktionalen Alternativtext, der den Linkzweck bzw. die Funktion der Schaltfläche oder Komponente vorgibt, z.B.:

<button><img src="x.gif" alt="Modalfenster schließen"></button>

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

In beiden Fällen geht es im Wesentlichen 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.

Liste der Formularelemente auf einer Webseite

Abgrenzungen für funktionale Textalternativen

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

Suchfeld mit Lupensymbol als Schaltfläche

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":

<button>
    <img src="lupe.png" alt="Suchen">
</button>  

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

Suchfunktion mit Schaltfläche bestehend aus einer Lupe und dem Text 'Suchen'

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:

<button>
    <img src="lupe.png" alt=""> Suchen
</button>  

Ein weiterer typischer Fall, in dem die funktionale Textalternative abgegrenzt werden muss, ist der Einsatz von verlinkten Intern: 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.0 bzw. Barrierefreien Informationstechnik-Verordnung – BITV 2.0 weitere Aspekte berücksichtigt werden:

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 Extern, englischsprachig: 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:self.print();" title="Diese Seite drucken">
        <img src="drucken.png" alt="Drucken"> Drucken
    </a>

    Der Name dieses Links ist "Drucken Drucken", was aber durch die Beschreibung (title-Attribut) ergänzt wird zu "Drucken Drucken Diese Seite Drucken". Solche Bezeichnungen sind konform zu den WCAG 2.0, aber ein Verbesserungspotenzial ist deutlich erkennbar.

  2. Der Name eines aktiven Elements kann mit Extern: 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 Extern, englischsprachig: 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: