Jetzt Test anfragen
Jetzt Test anfragen
zum vorherigen Prüfschritt

Prüfschritt 11.1.1.1a Nicht-Text-Inhalt – Bedienelemente

zum nächsten Prüfschritt

Was wird geprüft?

Grafische Bedienelemente müssen Alternativtexte haben. Alternativtexte für Schaltflächen oder interaktive Vorschaubilder sollen deren Aktion bzw. Ziel bezeichnen.

Warum wird das geprüft?

Für Screenreader-Nutzende sind Grafiken nicht zugänglich. Der Alternativtext tritt dann an die Stelle der Grafik, sie soll die Grafik ersetzen und bei Bedienelementen das Linkziel bzw. die ausführbare Aktion bezeichnen.

Entwicklerinnen und Entwickler müssen Grafiken mit passenden Text ergänzen, damit Hilfsmittelsoftware den Text anstelle der Grafik z.B. in Braille und Sprache ausgeben kann. Für das Bedienelement wird dabei ein programmatisch zugänglicher Name als Alternativtext hinterlegt.

Ist eine Grafik in ein Bedienelement eingeschlossen, dessen Linktext bzw. dessen hinterlegte Beschriftung das Linkziel bzw. die Funktion bereits ausreichend beschreibt, sollte das Bild aus der programmatischen Ausgabe durch geeignete Mittel entfernt werden.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn Grafiken als Bedienelemente (z.B., Icons in Menüs oder Werkzeugleisten, Logos, Vorschaubilder) eingesetzt werden.

2. Prüfung

Falls ein Bedienelement aus einer (Symbol-)Grafik sowie einem Text besteht, der den Zweck des Bedienelements wiedergibt, dann gilt dieser Text als Alternative für die Grafik. Es ist dann ggf. sinnvoll, die Grafik selbst mit einer geeigneten Technik für Screenreader zu verstecken.

Handelt es sich dabei um eine Grafik ohne visuell sichtbaren Text (alleinstehendes Icon oder Symbol), so sollte ein Alternativtext vorhanden sein, der das Ziel bzw. die Aktion, die ausgeführt wird, beschreibt. In der Praxis ist dies Text, der über ein Accessibility-Label bereitgestellt wird.

2.1 Prüfung von Textalternativen

Für eine Prüfung mit VoiceOver / iOS müssen die AI/OCR-Erkennungsfunktionen ausgeschaltet sein (siehe 3. Hinweise).

  1. App mit zu prüfender Ansicht öffnen.

  2. Screenreader starten und Fokus mit Hilfe der horizontalen Wischgeste auf jedes grafische Bedienelement setzen.

  3. Prüfen, ob für jedes grafische Bedienelement ein Alternativtext ausgegeben wird und dieser das Ziel bzw. die Funktion des Bedienelements beschreibt.

  4. Falls die Grafik zusammen mit aussagekräftigem Text als Bedienelement auftaucht, prüfen, ob die Grafik vor dem Screenreader versteckt wird (keine unnötigen und redundanten Ausgaben durch den Screenreader aufgrund der Grafik).

  5. Bei aktivierbaren informationstragenden Grafiken wird der Inhalt benannt und Linkziel bzw. Aktion beschrieben (etwa: "Porträtfoto Helga Müller - öffnet vergrößerte Ansicht").

2.2 Gleichwertige (äquivalente) Alternativtexte

Entscheidend ist: die App soll benutzbar sein, wenn Grafiken, Bilder oder Objekte durch die entsprechenden Alternativtexte ersetzt sind.

In der Regel bedeutet das:

  • Bei Schriftgrafiken soll der Alternativtext den Text der Schriftgrafik wiederholen.

  • Bei Symbolen soll der Alternativtext das Symbol nicht beschreiben, sondern ersetzen. Also zum Beispiel den Alternativtext "Suchen" für ein Lupen-Symbol, das einen Dialog mit Sucheingabefeld öffnet.

Bei verlinkten Abbildungen gibt es folgende Möglichkeiten:

  • Der abgebildete Gegenstand wird im Alternativtext beschrieben (wenn der abgebildete Gegenstand wichtig ist und daraus das Linkziel hervorgeht, zum Beispiel Logo).

  • Das Ziel des Links wird über den Alternativtext vermittelt.

  • Der abgebildete Gegenstand und das Ziel des Links bzw. die Aktion werden über den Alternativtext vermittelt (wenn beides wichtig ist).

Generell gilt:

  • Alternativtexte sollen kurz sein.

  • Ausführliche Beschreibungen von Abbildungen sollen nicht im Alternativtext, sondern im Kontext der Abbildung zur Verfügung gestellt werden (etwa direkt darunter, in einem Ausklappbereich, oder auch in einem Link zu einer Ansicht, die die Alternative enthält).

3. Hinweise

3.1 Einstellungen für die Prüfung mit VoiceOver / iOS

Die AI/OCR-Erkennungsfunktionen von VoiceOver müssen ausgeschaltet sein:

  • iOS 14+: Einstellungen > Bedienungshilfen > VoiceOver > VoiceOver-Erkennung. (Diese Funktion wird nur auf iPhone XS/XR-Modellen und höher unterstützt). Hier Bildbeschreibungen, Bildschirmerkennnung und Texterkennung deaktivieren.

3.2 Hinweise für die Team-Prüfung

Bei Schriftgrafiken sollte die Assistenz darauf achten, dass sichtbarer Text und Alternativtext nicht voneinander abweichen. Dies ist auch wichtig für den Prüfschritt 11.2.5.3 Beschriftung im zugänglichen Namen.

4. Bewertung

Nicht voll erfüllt:

  • Textalternativen sind missverständlich, redundant, oder extrem lang.

Nicht erfüllt:

  • Die Textalternative für ein wichtiges Bedienelement fehlt oder er ist unbrauchbar.

Quellen

Allgemein

iOS

Android

Einordnung des Prüfschritts

Abgrenzung zu anderen Prüfschritten

Grafische Bedienelemente sind stets in diesem Prüfschritt zu bewerten. Das gilt auch dann, wenn die Grafiken neben der Information über das Linkziel auch noch eine andere Information vermitteln sollen.

  • Einzige Ausnahme: Grafik und danebenstehender Text sind ein zusammengehöriger Link (zusammengesetztes Bedienelement). Die Textalternative bezieht sich dann nur auf die Grafik, die Prüfkriterien 11.1.1.1b "Alternativtexte für Grafiken und Objekte" oder 11.1.1.1c "Leere alt-Attribute für Layoutgrafiken" sind anzuwenden.

  • Textalternativen für grafische Überschriften: siehe Prüfschritt 11.1.1.1b "Alternativtexte für Grafiken und Objekte".

  • CAPTCHAs werden im Prüfschritt 11.1.1.1c "Alternativen für CAPTCHAs" geprüft.

  • Linktexte sind auch in Prüfschritt 11.2.4.4 "Aussagekräftige Linktexte" Thema. Dort geht es um die allgemeine Aussagekraft, in diesem Prüfschritt 11.1.1.1a geht es dagegen nur um die Gleichwertigkeit von Textalternative und grafischem Link.

Einordnung des Prüfschritts nach WCAG 2.1

Guideline

Success Criterion

Techniques

General Techniques
Failures