Dekorative Grafiken sind visuelle Elemente, die keine inhaltliche Information vermitteln, sondern rein der Gestaltung dienen. Typische Beispiele sind Hintergrundmuster und -texturen, Schmucklinien zwischen Absätzen, Rahmenverzierungen, Stimmungsbilder ohne Informationsgehalt und wiederholende Designelemente.
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". Fehlt das Alt-Attribut, wird je nach Screenreader leider der Dateiname vorgelesen, was als störend empfunden wird.
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.
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.
