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

Kleine Symbole für Links, Texte für Schaltflächen und gar Logos und komplette Navigationsleisten werden im Web oft mit CSS eingebunden. Die Grafiken werden dabei gerne als Hintergrundgrafiken bestimmt,was durchaus ein Problem der Barrierefreiheit darstellt.

Tatsächlich verschwinden viele Inhalte, wenn Webseiten im Kontrastmodus angeschaut werden. Das passiert bei den unterschiedlichsten Aufgaben:

Zwei Darstellungen der gleichen Linkliste; bei Standardfarben sind vorangestellte PDF- und HTML-Symbole sichtbar und im Kontrastmodus nicht Welches ist ein PDF-Formular?

Der Fokus dieses Beitrags wird auf Symbole gelegt, aber das Prinzip ist überall gleich: Hintergrundgrafiken dürfen für informative Grafiken nicht eingesetzt werden!

Symbole und Barrierefreiheit

Es gehört nicht zu den Anforderungen der Barrierefreiheit, Symbole bei Links einzusetzen, aber dennoch gehört die Kennzeichnung von Links zu den Webstandards: In den Extern, englischsprachig: Mobile Web Best Practices 1.0 aus 2008 wird in Erklärung 5.2.6 beschrieben:

Symbole in Links oder Steuerelementen können und sollten ergänzend zu Text als Informationsträger eingesetzt werden. Sie tragen zur Orientierung im Webangebot bei. Auch können Nutzer mit verminderten Lesefähigkeiten davon in besonderem Maße profitieren. Vor allem Format- und Sprachwechsel sind Aspekte der Barrierefreiheit und finden sich in den Extern, englischsprachig: Best-Practice-Techniken der Web Content Accessibility Guidelines (WCAG) 2.0 wieder.

Grafiken mit CSS

Inhalte gehören ins HTML und nicht ins CSS. Sobald Grafiken bzw. Icons informativen oder funktionalen Charakter haben, kann es zu erheblichen Einschränkungen der Zugänglichkeit kommen, wenn die Informationen nicht im HTML stehen. Wenn hingegen Symbole redundante Informationen zu Text vermitteln oder wenn die Symbole dekorativ sind, dürfen sie mit CSS eingebunden werden.

Wenn Grafiken per CSS eingebunden werden, müssen insbesondere zwei Kriterien der Barrierefreiheit beachtet werden:

Kontrastmodus

Wenn benutzerdefinierte Bildschirmeinstellungen vom Nutzer eingestellt werden, müssen die durch diese Grafiken vermittelten Funktionen und Informationen nachwievor am Bildschirm wahrgenommen werden können. Aus diesem Grund müssen Hintergrundgrafiken vermieden werden, denn sie werden im Kontrastmodus nicht angezeigt.

Eingabehilfen im Internet Explorer 7, Farbangaben werden ignoriert

Textliche Alternativen

Wenn Symbole Informationen vermitteln, dann müssen Screenreader auch Zugang dazu haben, was die Berücksichtigung von Text im HTML bedeutet.

Screenreader ignorieren sämtliche Inhalte, die mit CSS-Eigenschaften dargestellt werden. Sobald Inhalte mit CSS Extern, englischsprachig: ohne Entsprechung auf der inhaltlichen Ebene eingebunden werden, kann die Seite nicht mehr mit den Web Content Accessibility Guidelines 2.0 resp. der Barrierefreien Informationstechnik-Verordnung (BITV) 2.0 konform sein.

Es gibt verschiedene Möglichkeiten, informative Grafiken per CSS einzubinden, ohne dass sie bei benutzerdefinierten Bildschirmfarben "verschwinden". Eine Möglichkeit ist die CSS-Eigenschaft Intern: list-style-image und eine andere die Eigenschaft Intern: content in Verbindung mit den Pseudoattributen :before und :after. Die gängige Technik mit Intern: background ist hingegen nicht barrierefrei.

IMG als die barrierefreie(re) Alternative

Vor allem der Sprach- und Formatwechsel wird oft mit Symbolen gekennzeichnet. Ein Link

<a href="doku.pdf" class="pdf">Dokumentation</a>

kann mit der CSS-Eigenschaft content ein vorangestelltes Symbol erhalten:

.pdf:before {
  content: url('pdf.png');
         }

Der Vorteil von content gegenüber CSS-Hintergrundgrafiken ist, dass das Symbol auch im Kontrastmodus sichtbar bleibt. Trotzdem ist die CSS-Technik mit content — wie alle CSS-Techniken zur Vermittlung von Informationen — nicht barrierefrei, außer es wird zusätzlicher Text im HTML berücksichtigt. Deswegen werden in diesem Beitrag auch Intern: Alternativen mit HTML vorgestellt.

Was bleibt?

Viele Anforderungen der Barrierefreiheit lassen sich auf Symbole anwenden. Weitere Aspekte des barrierefreien Webdesigns wie Intern: Kontraste, Skalierbarkeit oder der sichtbare Fokus spielen mit in die Thematik hinein. Vor allem wenn Symbole für sich alleine stehen müssen Aspekte der visuellen Wahrnehmung und der Verständlichkeit zusätzlich berücksichtigt werden.

Wenn Symbole bei Links als IMG-Elemente eingesetzt werden, dann benötigen sie ein Intern: alt-Attribut. Auch hierbei gibt es eine Menge Aspekte zu berücksichtigen. Es geht dabei nicht alleine um den Alternativtext, sondern auch um den Kontext des Icons.