Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken! veröffentlicht in 2012

Listenaufzählungszeichen als Alternative zu background

Grafiken, die im Web als Intern: Hintergrundgrafiken eingebunden werden, sind meist nicht barrierefrei. Sie können zwar Intern: für Screenreader zugänglich gemacht werden, aber im Kontrastmodus werden sie unsichtbar. Die einfachste Methode, Grafiken per CSS barrierefrei einzubinden, ist sicherlich der Einsatz von Grafiken als Aufzählungspunkten in Listen:

li.pdf{
  list-style-image: url(pdf.gif);
}

Diese Technik ist für Listen, insbesondere Linklisten zweckmäßig. Ausführliche Informationen zur Anreicherung von Linklisten mit Symbolen finden Sie in meinem Artikel Extern: Die etwas besseren Listen bei den Webkrauts. Dort gehe ich auch auf die weiteren Maßnahmen ein, die die Zugänglichkeit für Screenreader herstellen.

Die CSS-Eigenschaft list-style-image kann nicht nur für Listeneinträge verwendet werden, sondern für jedes blockbildende HTML-Element. So kann die Technik auch dafür eingesetzt werden, HTML-Strukturen oder wichtige Inhalte mit einem zusätzlichen Eye-Catcher zu versehen. Ein solcher Einsatz Extern, englischsprachig: verbessert die Orientierung innerhalb der Seite. Wenn zum Beispiel Überschriftenelemente visuell durch ein vorangestelltes Symbol hervorgehoben werden, dann können die Überschriften ebenfalls Aufzählungszeichen per CSS erhalten:

Im Kontrastmodus: Vier Überschriften mit unterschiedlichen vorangestellten Symbolen Bei invertierten Farben sind die Symbole immer noch erkennbar

Das CSS kann wie folgt aussehen:

h1, h2, h3, h4 {
  padding: 5px 0 5px 25px;
  display: list-item;
  margin-left : 20px;
}
h1 {
  list-style-image:url('h1.gif');
}
h2 {
  list-style-image:url('h2.gif');
}
h3 {
  list-style-image:url('h3.gif');
}
h4 {
  list-style-image:url('h4.gif');
}

Die Symbole werden zwar bei benutzerdefinierten Farben am Bildschirm dargestellt,aber ein Screenreadernutzer kriegt davon ebenso wenig mit wie bei Hintergrundgrafiken. Die Technik — wie alle reinen CSS-Techniken zur Einbindung von Grafiken — kann nur bei redundanten und dekorativen Grafiken barrierefrei eingesetzt werden.

Für Screenreadernutzer ist im Übrigen die Kennzeichnung einer Überschriftenebene in diesem Beispiel strukturell über die Elemente H1, H2, H3 oder H4 bereits im HTML berücksichtigt. Aufgrund der Struktur muss kein Intern: zusätzlicher Text berücksichtigt werden. In diesem Fall sind die Symbole redundant zu vorhandenen Strukturen im HTML.

Überschriftenliste im Screenreader JAWS Im Screenreader JAWS werden Überschriftentext und -ebene angezeigt.