Dekorative Grafiken sind visuelle Elemente, die keine inhaltliche Information vermitteln, sondern rein der Gestaltung dienen. Im Kontext der Barrierefreiheit ist der richtige Umgang mit diesen Elementen entscheidend. Dekorative Grafiken müssen für assistive Technologien als nicht-relevant gekennzeichnet werden, damit Screenreader sie überspringen können. Dies erfolgt durch ein leeres alt-Attribut: <img src="deko.jpg" alt=""> oder das ARIA-Attribut aria-hidden="true".
Eine Grafik gilt als dekorativ, wenn:
sie rein schmückende Funktion hat (Hintergrundmuster, Trennlinien),
die Information bereits im Text enthalten ist,
sie keine zusätzliche Bedeutung transportiert und
sie nicht klickbar oder interaktiv ist.
Typische Beispiele sind:
Hintergrundmuster und -texturen
Schmucklinien zwischen Absätzen
Rahmenverzierungen
Stimmungsbilder ohne Informationsgehalt
Wiederholende Designelemente
Nicht dekorativ sind dagegen:
Logos und Markenzeichen
Informationsgrafiken und Diagramme
Produktbilder im Shop
Navigationselemente
Bilder mit ergänzenden Informationen zum Text
Die korrekte Kennzeichnung dekorativer Grafiken ist Teil der WCAG-Richtlinien (Erfolgskriterium 1.1.1). Sie vermeidet unnötige Unterbrechungen beim Vorlesen und verbessert die Nutzungserfahrung mit Screenreadern.
