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 wiederkehrende 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="">. 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 Web Content Accessibility Guidelines (Erfolgskriterium 1.1.1). Sie vermeidet unnötige Unterbrechungen beim Vorlesen und verbessert die Nutzungserfahrung mit Screenreadern.
