Grafische Elemente

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

Siehe auch: Layoutgrafik

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.

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

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.

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)

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

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)). 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), Images Tutorial | Web Accessibility Initiative (WAI) | W3C

Synonyme: Schmuckgrafik, dekorative Grafik, nicht-inhaltstragende Grafik, ggf. auch Hintergrundgrafik, Decorative Graphic

Siehe auch: Grafik

Layoutgrafiken dienen der visuellen Gestaltung der Anwendung, ohne jedoch Informationen zu übermitteln. Layoutgrafiken können z. B. rein dekorativ sein oder parallel zu einer Information in Textform angezeigt werden, ohne jedoch zusätzlich zum Text eine Information zu übermitteln.

Keine

Die Auszeichnung der Layoutgrafiken hängt von der verwendeten Methode zur Darstellung der Grafik ab:

• Grafiken, die mit dem <img>-Element ausgezeichnet sind, sollten mit einem leeren Alternativtext als Layoutgrafik ausgezeichnet werden (<img src=… alt="">).
• Grafiken, die mit dem <svg>-Element ausgezeichnet sind, sollten mit aria-hidden als Layoutgrafik ausgezeichnet werden (<svg aria-hidden=true>).
• Grafiken, die mit dem <canvas>-Element ausgezeichnet sind, sollten mit aria-hidden als Layoutgrafik ausgezeichnet werden (<canvas aria-hidden=true>).
• Schriftzeichen, die rein dekorativ verwendet werden, sollten mit aria-hidden als Layoutgrafik ausgezeichnet werden (<span aria-hidden=true>~~~</span>).
• Font-Icons oder Grafiken, die über die CSS-Selektoren before oder after als Pseudoelemente dargestellt werden, sollten mit aria-hidden als Layoutgrafik ausgezeichnet werden (<span class=… aria-hidden=true></span>). Zukünftig können diese Pseudoelemente auch direkt im CSS als Layoutgrafiken ausgezeichnet werden (1.2. Alternative Text for Accessibility - CSS Generated Content Module Level 3 (w3.org)). Dies wird derzeit aber noch nicht zuverlässig von den Assistenztechnologien unterstützt.
• Font-Icons sollten mit aria-hidden als Layoutgrafik ausgezeichnet werden (<span aria-hidden=true>i</span>).
• 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.
• CSS-Hintergrundgrafiken (background-image) sind automatisch Layoutgrafiken.
• Sonstige CSS-Grafiken (die z. B. mit border erstellt werden) sind automatisch Layoutgrafiken.

Layoutgrafiken dürften nicht den Tastaturfokus erhalten, d. h. die Grafik selbst oder deren Nachfahrenelemente dürfen nicht mit tabindex bzw. als Bedienelemente (z. B. <button>) ausgezeichnet sein.

Weitere Informationen: Decorative Images | Web Accessibility Initiative (WAI) | W3C

Synonyme: Verlaufsanzeige, Fortschrittsbalken, Progressbar

Siehe auch: Schieberegler, Grafik

Eine Fortschrittsanzeige dient der Anzeige, wie weit ein Prozess fortgeschritten ist (siehe DIN EN ISO 9241-161: 8.30). Der Fortschritt kann in Textform, grafisch (z. B. Fortschrittsbalken) oder aus einer Kombination von Grafik und Text angezeigt werden. Die Darstellung der Fortschrittsanzeige ändert sich automatisch, bis der Prozess abgeschlossen ist.

Hinweis: Die folgende Tabelle gilt nur, wenn die Fortschrittsanzeige mit der Tastatur erreichbar sein muss (siehe oben).

Fortschrittsanzeige mit Wert:

• JAWS: [Beschriftung] Fortschrittsanzeige [Wert] Prozent
• NVDA: [Beschriftung] Fortschrittsbalken [Wert]
• Windows Sprachausgabe: [Beschriftung] [Wert in %] Prozent Statusleiste Aktueller Wert [Wert] Mindestwert [minimaler Wert] Höchstwert [maximaler Wert]

Fortschrittsanzeige ohne Wert:

• JAWS: [Beschriftung] Fortschrittsanzeige 0 Prozent
• NVDA: [Beschriftung] Beschäftigt-Status
• Windows Sprachausgabe: [Beschriftung] 0 Prozent Statusleiste Aktueller Wert 0 Mindestwert [minimaler Wert] Höchstwert [maximaler Wert]

Hinweise:

• JAWS gibt den Wert irreführend mit dem Zusatz „Prozent“ aus, ohne diesen in einen Prozentwert umzurechnen.
• Die Aktualisierung der Fortschrittsanzeige ist mit JAWS und der Windows Sprachausgabe nicht automatisch wahrnehmbar.
• NVDA gibt die Aktualisierung der Fortschrittsanzeige unabhängig von der Fokusposition automatisch mit kurzen Pieptönen aus, deren Tonhöhe die Höhe des Werts repräsentiert.

Die Fortschrittsanzeige sollte mit dem HTML-Element <progress> umgesetzt werden.

Der aktuelle Wert wird mit dem value-Attribut gesetzt. Wird kein value-Attribut angegeben, handelt es sich um eine unbestimmte Fortschrittsanzeige, die lediglich anzeigt, dass ein Fortschritt passiert, ohne angeben zu können, wie weit dieser vorangeschritten ist.

Der maximale Wert wird mit dem max-Attribut gesetzt. Es sollte beachtet werden, dass dieser Wert mit vielen Assistenztechnologien nicht wahrnehmbar ist. Der minimale Wert ist immer 0.

Die Beschriftung sollte mit dem Element <label for=ID> mit der Fortschrittsanzeige verknüpft werden.

Das <progress>-Element kann gemäß HTML-Spezifikation unterschiedliche Kindelemente enthalten. Diese sind jedoch weder visuell wahrnehmbar noch werden sie von den Assistenztechnologien ausgegeben.

Weitere Informationen: 4.10.13 The progress element - HTML Standard (whatwg.org)

Wird die Fortschrittsanzeige nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle wird mit role=progressbar übermittelt.
• Der aktuelle Wert kann mit aria-valuenow angegeben werden. Wird der Wert nicht angegeben, handelt es sich um eine unbestimmte Fortschrittsanzeige.
• Mit aria-valuetext kann zusätzlich ein Wert in Textform angegeben werden, der dann von der Assistenztechnologie anstelle des Werts im aria-valuenow ausgegeben werden soll.
• Der minimale und der maximale Wert können mit aria-valuemin und aria-valuemax angegeben werden.
• Die Beschriftung kann per aria-label oder aria-labelledby erfolgen.
• Die Darstellung der Fortschrittsanzeige sollte im Hochkontrast-Modus von Windows überprüft werden.

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

Informationen zu diesem Artikel

Datum:

15.05.2023

Lizenz:

CC-BY-SA 4.0