Prüfschritt 11.1.1.1b Nicht-Text-Inhalt – Grafiken und Objekte

Was wird geprüft?

Informative Grafiken und Bilder müssen Alternativtexte haben. Die Alternativtexte ersetzen das Bild, sie sollen (soweit wie möglich) die gleiche Information vermitteln wie das Bild.

Bei eingebundenen Multimedia-Objekten (z.B Video- oder Audio-Dateien) soll die Textalternative zumindest eine beschreibende Identifizierung des Inhalts ermöglichen. Sind Grafiken lediglich dekorativ, sollten sie keinen Alternativtext haben, damit sie in assistiven Technologien nicht ausgegeben werden.

Warum wird das geprüft?

Für blinde Benutzer sind Grafiken und Bilder nicht zugänglich. Die Alternativtexte treten dann an die Stelle der Grafik, sie sollen die Grafik inhaltlich ersetzen können.

Wenn Objekte (etwa Video- oder Audio-Dateien) nicht angezeigt werden können, weil sie z.B. nicht geladen werden können, sollen kurze beschreibende Alternativtexte dem Nutzer eine Identifikation der Inhalte ermöglichen.

Wie wird das geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn informative Grafiken, Bilder, Video- / Audio-Dateien oder andere informative Multimedia-Objekte vorhanden sind.

Als informative Grafiken gelten:

  • Abbildungen, die zeigen sollen, wie ein Objekt oder eine Person aussieht

  • Illustrationen, die einen Gegenstand, ein Konzept oder einen Prozess vorstellen, verdeutlichen oder veranschaulichen sollen (etwa Diagramme)

  • Symbole

  • Schriftgrafiken

Dekorative Grafiken und Bilder sind Grenzfälle. Sie stellen (im Unterschied zu Layoutgrafiken) etwas dar, der dargestellte Gegenstand hat auch meist einen Bezug zum Thema der App-Ansicht. Ihr Informationsgehalt und ihr Nutzen für das Verständnis ist aber nicht klar. Sie können daher als dekorativ gekennzeichnet werden. Der Alternativtext sollte dann leer sein.

Wenn Logo-artige Elemente, in denen Grafik und Schrift verbunden sind, auftauchen, sind diese fast nie als bloße Schmuckgrafik anzusehen und brauchen deshalb einen Alternativtext. Dies ermöglicht blinden und sehenden Nutzern, sich gemeinsam auf diese Elemente zu beziehen. Der Alternativtext muss aber nicht expliziter sein als das, was für den sehenden Nutzer erkenntlich ist.

Darüber hinaus ist der Prüfschritt anwendbar, wenn informative Audio-Elemente vorhanden sind.

2. Prüfung

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

  2. Prüfen, ob unverlinkte Grafiken oder Multimedia-Inhalte vorhanden sind.

  3. Screenreader starten und Fokus auf jede informationstragende Grafik setzen.

  4. Prüfen, ob der Screenreader bei informationstragenden Grafiken einen aussagekräftigen Alternativtext ausgibt.

  5. Bei komplexen Grafiken prüfen, ob der Alternativtext den Inhalt knapp nennt und auf ausführliche Textalternativen im Kontext der Grafik verweist. Diese können etwa unterhalb der Grafik, in einem Ausklappbereich oder in einer verlinkten Ansicht vorgehalten werden.

  6. Prüfen, ob Schmuckgrafiken Alternativtexte tragen. Bei Grenzfällen (Grafiken haben einen beschreibbaren Inhalt mit Bezug zum Thema, sind aber zum Verständnis der Inhalte nicht wichtig) können sowohl Alternativtexte als auch leere Alternativtexte akzeptiert werden.

3. Hinweise

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.

Angemessene Alternativtexte

Entscheidend ist: Die App soll benutzbar sein, wenn für Grafiken oder Bilder die entsprechenden Alternativtexte vom Screenreader ausgegeben werden.

In der Regel bedeutet das:

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

  • Bei Symbolen oder Zeichen (Logos) soll der Alternativtext sagen, dass ein Symbol, Zeichen oder Logo abgebildet ist und die Bedeutung des Symbols oder Zeichens wiedergeben.

  • Bei Gruppen von zusammengehörigen Bildern kann auch eines der Bilder die Bedeutung der Gruppe wiedergeben, die anderen sollten als dekorativ gekennzeichnet werden.

  • Bei Fotos, Reproduktionen von Gemälden oder anderen Nicht-Text-Elementen, die eine spezifische Sinneserfahrung vermitteln, genügt in der Regel eine knappe Bezeichnung des abgebildeten Gegenstandes.

  • Bei Diagrammen oder technischen Zeichnungen sind unter Umständen ausführlichere Erläuterungen erforderlich. Alternativtexte sind dafür nicht geeignet, sie sollen in der Regel 80 Zeichen nicht überschreiten. Im Alternativtext steht dann nur, was dargestellt ist und wo (etwa: "Details im anschließenden Text"). Die ausführliche Textalternative soll sich in Kontext des Bildes befinden. Der Kontext kann zum Beispiel ein unmittelbar folgender Inhalt (Text oder Tabelle), ein Ausklappbereich oder auch ein Link zu einer Ansicht sein, die die ausführliche Alternative enthält.

  • Bei Objekten, die nicht angezeigt werden können, sollen die Textalternative oder Text im unmittelbaren Kontext des Objekts (etwa eine vorangehende Überschrift oder nachfolgende Legende) eine kurze Beschreibung oder Identifizierung bieten, und, falls vorhanden, auf eine Medienalternative verweisen.

  • Schmuckbilder sollten leere Alternativtexte haben, bei Android etwa über android:contentDescription="@null". Es ist außerdem sinnvoll, dass Schmuckbilder keinen Screenreader-Fokus erhalten (bei Android etwa über android:focusable="false").

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.

Angemessenheit von Alternativtexten im Kontext

Wenn ein Alternativtext kein angemessener Ersatz für die Grafik oder das Bild sein kann, muss geprüft werden, ob die über das Bild vermittelte Information im Kontext als Text zur Verfügung steht. Das betrifft zum Beispiel:

  • Diagramme

  • technische Zeichnungen

  • Anfahrtspläne

Zum Kontext einer Grafik oder eines Bildes gehört: der dazugehörige (vorangehende, folgende) Text und eine im unmittelbaren Kontext des Bildes angebotene verlinkte und klar benannte ausführliche Textalternative. Nicht alle Informationen können in jedem Fall im Text wiedergegeben werden. So sind in einer Karte, die die Umgebung eines Standortes zeigt, oft mehr Information enthalten als in einer Auflistung der Anfahrtswege einschließlich Infos zum öffentlichen Nahverkehr. Dennoch ist so eine Auflistung als Textalternative für die Karte eines Anfahrtsweges akzeptabel.

Für technische Zeichnungen, Grundrisse, Katasteramtskarten u.ä. sind detaillierte Alternativtexte oft nicht möglich bzw. sinnvoll, das Bild selbst sollte aber so benannt sein, dass Art des Bildes und Gegenstand genannt sind, einschließlich Informationen für die Bezugnahme auf das jeweilige Dokument (Codes, Nummern, technische Bezeichnungen usw).

Ein kurzer Alternativtext mit Bezeichnung der Grafik ist auch bei Nutzung von Textalternativen im Kontext erforderlich. Der Alternativtext sagt, dass an dieser Stelle etwas Bestimmtes abgebildet ist. Sie macht klar, worauf sich die Erläuterung im Kontext bezieht.

Beurteilung der Angemessenheit

Um die Angemessenheit einer ausführlichen Textalternative einschätzen zu können, muss die Textalternative auf die Grafik beziehungsweise das Objekt bezogen werden, zu dem sie gehört. Erforderlich ist also die wechselnde Betrachtung von Grafik/Objekt und zugehörige Textalternative.

Quellen

Allgemein

iOS

Android

Einordnung des Prüfschritts

Abgrenzung zu anderen Prüfschritten

  • Textalternativen für verlinkte Grafiken (z.B. Bedienelemente oder Vorschaubilder) werden in Prüfschritt 11.1.1.1a "Textalternativen für Bedienelemente" geprüft.

  • Einfache Animationen oder Videos ohne synchronisierungsbedürftige Tonspur werden in Prüfschritt 11.1.2.1a "Alternativen für Audiodateien und stumme Videos" geprüft.

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

Einordnung des Prüfschritts nach WCAG 2.1

Guideline

Success Criterion

Techniques

General Techniques
Failures