Grafik - Barrierefreie Gestaltung von User Interface-Elementen

Synonyme: Grafisches Element, Icon, Bild, Abbildung, inhaltstragende Grafik, Pixelgrafik, Vektorgrafik, Graphic, Image

Grafiken dienen der visuellen, nicht-textlichen Vermittlung von Informationen.

Hinweis: Zusätzliche Anforderungen an Grafiken, die den Status, den Wert, die Rolle oder Beschriftung eines Elements übermitteln, werden beim jeweiligen Element bzw. in den entsprechenden Abschnitten (z. B. Elementstatus, Beschriftung) beschrieben.

Darstellung

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
295	Kontrast	Alle grafischen Inhalte müssen ein Kontrastverhältnis von mindestens 3:1 aufweisen. Dies gilt für den Kontrast der Grafik zum Hintergrund sowie für die Kontraste innerhalb der Grafik (zwischen benachbarten Flächen), sofern diese für die Vermittlung der Information relevant sind. Ausnahmen: deaktivierte Elemente, Grafiken, die nicht verändert werden können, ohne sie zu verfälschen, wie z. B. Logos, Fahnen, Screenshots, Heat Maps oder medizinische Schautafeln, Grafiken, die eine sichtbare und äquivalente Textalternative besitzen. Hinweis: Wenn Grafiken keine ausreichenden Kontraste besitzen und unter eine der Ausnahmen fallen, dürfen sie nicht als Beschriftung von Bedienelementen verwendet werden oder keine relevanten Informationen vermitteln.	Muss	EN 301 549: 9.1.4.11, 11.1.4.11
296	Farbkodierung	Wenn über die Verwendung unterschiedlicher Farben innerhalb einer Grafik oder zwischen verschiedenen Grafiken eine Information vermittelt wird, dann müssen alle Farben (jeweils untereinander) ein Kontrastverhältnis von mindestens 3:1 aufweisen (siehe Praxistipp Farbkodierung). Hinweis: Dies gilt, wenn die Farben an sich keine Bedeutung besitzen, sondern nur der Farbunterschied.	Soll	EN 301 549: 9.1.4.1, 11.1.4.1
297	Farbkodierung	Wenn über die Verwendung einer bestimmten Farbe innerhalb einer Grafik eine Information vermittelt wird, muss diese Information zusätzlich auf andere Weise vermittelt werden (siehe Praxistipp Farbkodierung). Hinweis: Dies gilt, wenn die Farbe an sich eine Bedeutung besitzt, wie „grün“ für korrekt und „rot“ für falsch.	Soll	EN 301 549: 9.1.4.1, 11.1.4.1
298	Kontrast	Grafiken sollen bei Verwendung der Windows-Kontrastanpassung gut sichtbar sein (siehe Praxistipp Kontrastanpassung).	Soll	EN 301 549: 11.7
299	Kontrast	Grafiken sollen nicht als Hintergrundgrafiken für Text verwendet werden, weil dies die Lesbarkeit beeinträchtigt. Hinweis: Dies kann besonders dann zu nicht ausreichenden Kontrasten führen, wenn Benutzende die Textfarbe oder Schriftgröße an ihre Bedürfnisse anpassen.	Soll	EN 301 549: 11.7
300	Text	Schriftgrafiken dürfen nicht verwendet werden, außer deren Textinhalt ist an Nutzungsbedürfnisse anpassbar (Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe). Ausnahme: Logos	Muss	EN 301 549: 9.1.4.5, 11.1.4.5.1.1
301	Alternativtext	Komplexe Grafiken müssen eine ausführliche Beschreibung in Textform besitzen. Hinweis 1. Die ausführliche Beschreibung soll bei der Grafik angezeigt werden oder über ein Bedienelement bei der Grafik eingeblendet oder aufgerufen werden können. Hinweis 2: Die komplexe Grafik selbst müss einen knappen Alternativtext besitzen. Es wird empfohlen, dass dieser auf die ausführliche Beschreibung verweist.	Muss	EN 301 549: 9.1.1.1, 11.1.1.1
302	Animation	Die Grafik darf nicht blitzen, blinken oder auf eine andere Art und Weise visuell verändert werden (siehe Animation).	Muss	EN 301 549: 11.2.3.1, 9.2.2.2, 11.2.2.2
303	Fokussichtbarkeit	Erhält die Grafik den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator).	Muss	EN 301 549: 9.2.4.7, 11.2.4.7

Bedienung

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
304	Tastaturbedienung	In Anwendungen, die den virtuellen Cursor nicht unterstützen, muss die Grafik mit Tastatur erreicht und verlassen werden können (siehe folgende Tabelle Tastaturbedienung). Ausnahme: Sofern die Grafik als Beschriftung eines Bedienelements dient oder dessen Rolle, Status oder Wert vermittelt, soll das Bedienelement und nicht die Grafik den Tastaturfokus erhalten. Hinweis: Wenn die Anwendung viele Grafiken enthält, soll es einen Bedienmodus geben, bei dem nur interaktive Elemente den Fokus erhalten, um unnötige Navigationsschritte für sehende Tastaturnutzende zu vermeiden.	Muss	EN 301 549: 11.1.1.1

Tastaturbedienung Grafik

Hinweis: Die folgenden Anforderungen gelten nur, wenn die Grafik mit der Tastatur erreichbar sein muss (siehe oben).

Aktion	Taste	Klassifizierung
Grafik fokussieren	TAB	Erforderlich
Grafik verlassen	TAB	Erforderlich

Zeigeinstrumentbedienung Grafik

Aktion	Taste	Klassifizierung
Einblenden des Tooltips	Hover	Empfohlen

Programmierung/Schnittstellen

Nr.	Eigenschaft	Beschreibung	Klassifizierung	Referenz
305	Rolle	Die Rolle „Grafik“ muss an die Accessibility API übermittelt werden (siehe Accessibility API).	Muss	EN 301 549: 11.5.2.5
306	Name	Die Grafik muss einen knappen und aussagekräftigen Alternativtext besitzen, der als Accessible Name an die Accessibility API übermittelt wird.	Muss	EN 301 549: 9.1.1.1, 11.1.1.1
307	Beschreibung	Komplexe Grafiken müssen mit einer ausführlichen Textalternative versehen werden, die alle relevanten grafischen Inhalte vollständig beschreibt.	Muss	EN 301 549: 9.1.1.1, 11.1.1.1
308	Bedienung	In Anwendungen, die den virtuellen Cursor nicht unterstützen, muss die Grafik mit Assistenztechnologie erreicht und verlassen werden können.	Muss	EN 301 549: 9.1.1.1, 11.1.1.1
309	Desktop: Position	Größe und Position der Grafik müssen an die Accessibility API übermittelt werden (siehe Fokussichtbarkeit).	Muss	EN 301 549: 11.5.2.5, 11.5.2.13

Praxistipp Grafiken in Web-Anwendungen, die Rolle, Status oder Wert übermitteln

HTML

Bei den HTML-Standardelementen muss bezüglich der Grafiken, die Informationen zu Rolle, Status oder Wert übermitteln, nichts beachtet werden, weil die entsprechenden Informationen automatisch vom Browser korrekt an die Accessibility API übermittelt werden.

ARIA

Bei benutzerdefinierten Elementen, die mit ARIA-Rollen und ARIA-Attributen umgesetzt werden, sollten die Grafiken, die Informationen zu Rolle, Status oder Wert übermitteln, als Layoutgrafiken ausgezeichnet werden. Die Informationen sollten stattdessen programmatisch übermittelt werden, z. B. mit folgenden Attributen:

role für die Rolle,
aria-valuenow und aria-valuetext für den Wert,
aria-required für Pflichtfelder,
aria-invalid für fehlerhafte Formularfelder,
aria-checked bzw. aria-selected für den Status „ausgewählt“,
aria-disabled für deaktivierte Bedienelemente,
aria-pressed für den Status „gedrückt“ bzw. „nicht gedrückt“,
aria-expanded für den Status „reduziert“/“ausgeblendet“ bzw. „erweitert“/„eingeblendet“
aria-haspopup für Elemente, bei deren Aktivierung ein Menü, eine Auswahlliste, eine Baumstruktur, eine Tabelle oder ein Dialog eingeblendet wird,
aria-sort für die Sortierrichtung,
aria-current für die Kennzeichnung des aktuellen Elements.

Sofern für die entsprechende Information kein ARIA-Attribut existiert, sollte die Information in Textform als Teil der Beschriftung oder Beschreibung des Elements übermittelt werden.

Weitere Informationen: Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link)

Praxistipp Grafiken in Web-Anwendungen

Screenreader-Ausgabe

JAWS: [Alternativtext] Grafik
NVDA: Grafik [Alternativtext]
Windows Sprachausgabe: [Alternativtext] Bild

HTML und ARIA

Die Auszeichnung und Beschriftung der Grafiken hängt von der verwendeten Methode zur Darstellung der Grafik ab:

Grafiken, die mit dem <img>-Element ausgezeichnet sind, werden mit dem alt-Attribut beschriftet.
Schalter mit grafischer Beschriftung, die mit dem <input type=image>-Element ausgezeichnet sind, werden ebenfalls mit dem alt-Attribut beschriftet.
Alle anderen Grafiken sollten mit role=img ausgezeichnet und explizit mit aria-label oder aria-labelledby beschriftet werden. Dies gilt z. B. für die Elemente <svg> und <canvas>., CSS-Hintergrundgrafiken, Font-Icons und Buchstaben, die in einem grafischen Kontext verwendet werden (z. B. „x“ für „gelöscht“).
Grafiken für Listenzeichen (list-style-image) können weder mit einem Alternativtext versehen noch als Layoutgrafik ausgezeichnet werden und sollten deshalb nicht verwendet werden.

Dabei gelten folgende Ausnahmen:

Grafiken, die zur Beschriftung von Bedienelementen dienen, können als Layoutgrafik ausgezeichnet werden. Stattdessen wird das Bedienelement aussagekräftig beschriftet (z. B. <button title=Löschen><img src=… alt></button>, <button aria-label=Löschen><img src=…></button>). Sofern das Bedienelement per aria-label oder aria-labelledby beschriftet wird, wird die enthaltene Grafik automatisch zur Layoutgrafik und muss nicht separat als solche ausgezeichnet werden.
Die Screenreader geben die relevanten Informationen der Elemente (Beschriftung, Rolle, Status, Wert), die sich innerhalb von <svg> und <canvas> befinden, aus, wenn das jeweilige <svg>- bzw. <canvas>-Element nicht als Grafik ausgezeichnet ist. So kann z. B. das <svg>- bzw. <canvas>-Element mit role=group als Gruppe ausgezeichnet und mit aria-label oder aria-labelledby beschriftet werden. Mit dem Screenreader ist dann nicht direkt wahrnehmbar, dass es sich um eine Grafik handelt (diese Information kann jedoch indirekt über die Beschriftung der Gruppe übermittelt werden), aber es besteht die Möglichkeit, ausführliche und strukturierte Textalternativen innerhalb der grafischen Elemente zu übermitteln, z. B. bei Diagrammen.
Font-Icons oder Grafiken, die über die CSS-Selektoren before oder after als Pseudoelemente dargestellt werden, können zukünftig auch direkt im CSS mit einem Alternativtext versehen werden ( 1.2. Alternative Text for Accessibility - CSS Generated Content Module Level 3 (w3.org) (Externer Link)). Dies wird derzeit aber noch nicht zuverlässig von den Assistenztechnologien unterstützt.

Weitere Informationen: 4.8.3 The img element - HTML Standard (whatwg.org) (Externer Link), Images Tutorial | Web Accessibility Initiative (WAI) | W3C

Datum:: 5.10.2023
Lizenz:: CC-BY-SA 4.0
Version:: 0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!