Die WCAG-Kriterien

WCAG 1.1.1: Nicht-Text-Inhalt von Bedienelementen

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

Komplexität:Einfach
Dauer:Schnell

Wichtig für Rolle:

Entwicklung

Zum WCAG-Kriterium:

Nicht-Text-Inhalt (englisch)

Worum gehts?

Grafische Bedienelemente, wie klickbare Icons oder klickbare Bilder, benötigen einen Namen, damit auch Screenreader-User die Funktion der Grafik verstehen.

Zum Beispiel sollte ein Pfeil-Icon, das auf die Seite davor verlinkt, mit der Funktion „Zurück“ beschrieben sein und nicht mit seinem Aussehen „Pfeil nach links“.

Zwei Pfeile. Einer hat kein Aria-Label. Das Zweite hat eins, in dem s steht die Funktion: Zurück.

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

Grafischen Bedienelementen Textalternativen geben
Es gibt unterschiedliche Arten von grafischen Bedienelementen und unterschiedliche Wege, ihnen eine Textalternative zu geben:
- Pixelgrafik: Bei einer Pixelgrafik(<img>) kann das alt-Attribut verwendet werden, um das Bild und die Funktion des Bildes zu beschreiben. Beispiel: alt="Ein Mann steht vor einem Publikum und hält eine Rede. Verlinkt zu unseren Vorträgen."
- SVG-Grafik oder Icon-Fonts: Wenn eine Grafik über ein SVG (<svg>) oder als Icon-Font (<i>) eingebunden wird, dann haben diese Elemente kein alt-Attribut. Hier muss dann eventuell auf ein aria-label, aria-labelledby oder sonstige Methoden zurückgegriffen werden, um das grafische Element zu benennen.
WCAG-Technik(en) in Englisch:

Image-Maps Textalternativen geben
Dieses HTML-Element ist etwas veraltet, aber eventuell kommst du mal in die Versuchung, eine Image-Map auf einer Website einzusetzen. Image-Maps sind Bilder, bei denen mehrere Bereiche des Bildes klickbar sind.

Image-Maps brauchen eine Textalternative für die komplette Map und eine für jedes einzelne klickbare Element in der Map. Die Textalternative der Map beschreibt nur das Bild. Die Textalternative jedes klickbaren Elements beschreibt dann das Bild und/oder das Linkziel.

Hier ist ein Beispiel einer Image-Map mit Alternativ-Texten.
WCAG-Technik(en) in Englisch:
- H24: Bereitstellung von Textalternativen für Image Maps

Beschriftungen für Formularfelder hinzufügen
Formularfelder (<input>) sind eigentlich nur grafische Rechtecke und haben von sich aus keinen Namen. Darum wird einem Screenreader-User nur »Eingabefeld« vorgelesen, wenn das Formularfeld keine Beschriftung hat.

Um dem Formularfeld einen Namen zu geben, empfehlen wir, ein <label> zu nutzen und das Label per for-Attribut mit dem Feld zu verknüpfen. Dadurch bekommt das Formularfeld einen sichtbaren Namen, der auch für Screenreader programmatisch ermittelbar ist. Das hilft auch bei dem Kriterium: 1.3.1 Info und Beziehungen (Beschriftungen von Formularelementen)
WCAG-Technik(en) in Englisch:
- H44: Nutze Labels, um Inputfeldern eine Beschriftung zu geben

Anmerkungen

Hinweis: Logos als Bedienelemente
Wenn das Logo zur Startseite verlinkt, dann empfehlen wir, dass in der Textalternative sowohl die Firma als auch das Ziel des Links genannt wird.

Beispiel: „Logo Gehirngerecht. Verlinkt zur Startseite.“

Da das Muster (Logo verlinkt zur Startseite) allerdings schon so bekannt ist, lässt man auch nur „Logo Gehirngerecht“ als ausreichenden Alt-Text durchgehen.

Hinweis: Richtiger Umgang mit SVGs
Einem SVG, das als Bedienelement eingebunden ist, kann man auch über das SVG-Titel-Tag (<title>) einen Namen geben.

Aufgrund von teilweise schlechtem Screenreader-Support des title-Tag, sollte der Titel aber zusätzlich noch mit aria-labelledby mit dem SVG verbunden sein. Außerdem sollte das SVG noch das Attribut role=”img” bekommen.

Beispiel:

<svg role="img" aria-labelledby=”titel1”...> <title id="titel1">Eine rote,...</title> </svg>

Hinweis: Textalternativen für bedienbare Bilder
Bei bedienbaren Bildern stellt sich die Frage, was genau alles in der Textalternative beschrieben werden muss:
1. Ist nur das Bild wichtig? Dann ist es okay, wenn nur das Bild beschrieben wird, solange sich das Linkziel aus dem Kontext ergibt (Beispiel: Logo).
2. Ist die Funktion wichtig? Dann muss nur die Funktion beschrieben werden. Beispiel: Social-Media-Icons, die zu Plattformen wie Facebook oder Instagram führen.
3. Ist das Bild und der Link wichtig? Dann muss beides beschrieben sein. Beispiel: Ein Bild hat eine Zoom-Funktion und vergrößert sich, wenn man darauf klickt. Dann muss die Textalternative das Bild und die Funktion beschreiben. (Ob so eine Zoom-Funktion im Bild gute Usability ist, ist eine ganze andere Frage!)

So testest dU:

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren