Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

<p><a href="/"><img src="logo-meiner-organisation.png" alt="Startseite"></a></p>

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

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.

Liste der Formularelemente auf einer Webseite

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:

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

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

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:

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

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:

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