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 zu "Darstellung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 310 | Kontrast | Layoutgrafiken 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: 9.1.4.3, 11.1.4.3, 11.7 |
| 311 | Animation | Die Layoutgrafik darf nicht blitzen, blinken oder auf eine andere Art und Weise visuell verändert werden (siehe Animation). | Muss | EN 301 549: 9.2.3.1, 11.2.3.1, 9.2.2.2, 11.2.2.2 |
Bedienung
Permalink zu "Bedienung"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 312 | Rolle | Layoutgrafiken dürfen nicht den Fokus erhalten. | Muss | EN 301 549: 9.1.1.1, 11.1.1.1 |
Programmierung/Schnittstellen
Permalink zu "Programmierung/Schnittstellen"| Nr. | Eigenschaft | Beschreibung | Klassifizierung | Referenz |
|---|---|---|---|---|
| 313 | Rolle | Die Rolle Layoutgrafik muss an die Accessibility API übermittelt werden. Alternativ soll die Layoutgrafik nicht an die Accessibility API übermittelt werden (siehe Accessibility API). | Muss | EN 301 549: 11.5.2.5 |
Praxistipp Layoutgrafiken in Web-Anwendungen
Permalink zu "Praxistipp Layoutgrafiken in Web-Anwendungen"Screenreader-Ausgabe
Permalink zu "Screenreader-Ausgabe"Keine
HTML und ARIA
Permalink zu "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 mitaria-hiddenals Layoutgrafik ausgezeichnet werden (<svg aria-hidden=true>). - Grafiken, die mit dem
<canvas>-Element ausgezeichnet sind, sollten mitaria-hiddenals Layoutgrafik ausgezeichnet werden (<canvas aria-hidden=true>). - Schriftzeichen, die rein dekorativ verwendet werden, sollten mit
aria-hiddenals Layoutgrafik ausgezeichnet werden (<span aria-hidden=true>~~~</span>). - Font-Icons oder Grafiken, die über die CSS-Selektoren
beforeoderafterals Pseudoelemente dargestellt werden, sollten mitaria-hiddenals 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) (Externer Link)). Dies wird derzeit aber noch nicht zuverlässig von den Assistenztechnologien unterstützt. - Font-Icons sollten mit
aria-hiddenals 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
bordererstellt 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