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?

Bedienelemente, die ohne Text auskommen, wie klickbare Icons oder andere klickbare Bilder, benötigen eine Textalternative, damit sie von Screenreader ausgelesen werden können. Zum Beispiel sollte ein Pfeil-Icon, das auf die Seite davor verlinkt, mit „Zurück“ beschrieben sein und nicht mit „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
Alternativen für Bedienelemente kann man auf verschiedene Arten und Weisen geben, je nachdem, was man als Bedienelement einsetzt.
1. Einfaches Bild: Bei einem einfachen Bild (<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.”
2. SVG-Grafik oder Icon-Fonts: Wenn eine Grafik kein einfaches Bild (<img>) ist, sondern zum Beispiel ü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
Sind bei einem Bild mehrere Bildbereiche (area-Elemente) klickbar? Dann muss die gesamte Image-Map eine beschreibende Textalternative haben und jedes einzelne klickbare Element in der Map braucht ebenfalls eine Textalternative, die das Bild und/oder das Linkziel beschreibt.

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
Inputfelder (input) haben von sich aus keinen Namen. Darum wird einem Screenreader-User nur »Eingabefeld« vorgelesen, wenn das Input keine Beschriftung hat.

Um dem Input 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
Verlinkt das Logo zur Startseite? Dann empfehlen wir, dass in der Textalternative sowohl die Firma genannt wird als auch das Ziel des Links. Beispiel: „Logo Gehirngerecht, verlinkt zur Startseite.“

In der Barrierefreiheits-Szene hat man sich allerdings großteils darauf geeinigt, dass das Muster (Logo verlinkt zur Startseite) schon so bekannt ist, dass auch nur „Logo Gehirngerecht“ als Alt-Text ausreichen würde.

Hinweis: Richtiger Umgang mit SVGs
Einem SVG, das als Bedienelement eingebunden ist, kann man auch mit einem title-Tag einen Namen geben.

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

Hinweis: Textalternativen für verlinkte Bilder
Bei verlinkten Bildern stellt sich generell oft die Frage, was genau alles in der Textalternative beschrieben werden muss. Beantworte dir dafür folgende Fragen:
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 nur das Ziel des Links wichtig? Dann reicht es, wenn du nur das Linkziel beschreibst. Das ist oft bei Social-Media-Icons der Fall, die zu Plattformen wie Facebook oder Instagram führen.
3. Ist das Bild und der Link wichtig? Dann muss auch beides in der Textalternative beschrieben sein. Ein Beispiel hierfür ist ein Bild, das gleichzeitig als Lupenfunktion dient. Das Bild wird also vergrößert, wenn man darauf klickt. Wenn das Bild zusätzlich diese Funktion hat, muss die Textalternative das Bild und die Funktion beschreiben. (Ob es allerdings gute Bedienbarkeit ist, diese Funktion in dem Bild zu haben, ist eine ganze andere Frage!)