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.

Darstellung

Permalink "Darstellung"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
310KontrastLayoutgrafiken 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.

SollEN 301 549: 9.1.4.3, 11.1.4.3, 11.7
311AnimationDie Layoutgrafik darf nicht blitzen, blinken oder auf eine andere Art und Weise visuell verändert werden (siehe Animation).MussEN 301 549:
9.2.3.1, 11.2.3.1, 9.2.2.2, 11.2.2.2

Bedienung

Permalink "Bedienung"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
312RolleLayoutgrafiken dürfen nicht den Fokus erhalten.MussEN 301 549: 9.1.1.1, 11.1.1.1

Programmierung/Schnittstellen

Permalink "Programmierung/Schnittstellen"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
313RolleDie Rolle Layoutgrafik muss an die Accessibility API übermittelt werden. Alternativ soll die Layoutgrafik nicht an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549:
11.5.2.5

Praxistipp Layoutgrafiken in Web-Anwendungen

Permalink "Praxistipp Layoutgrafiken in Web-Anwendungen"

Screenreader-Ausgabe

Permalink "Screenreader-Ausgabe"

Keine

HTML und ARIA

Permalink "HTML und ARIA"

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

Informationen zu diesem Artikel

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!