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:

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 Mobile Web Best Practices 1.0 aus 2008 wird in Erklärung 5.2.6 beschrieben:

• Links auf anderssprachige Sseiten sollten gekennzeichnet werden.
• Links auf Inhalte, die typischerweise in einer anderen (möglicherweise nicht installierten) Anwendung geöffnet werden, sollten gekennzeichnet werden. Hierzu zählen alle Formate bis auf HTML, JPEG und GIF.
• Die Größe einer verlinkten Datei sollte ebenfalls angegeben werden.

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 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.

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 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 list-style-image und eine andere die Eigenschaft content in Verbindung mit den Pseudoattributen :before und :after. Die gängige Technik mit background ist hingegen nicht barrierefrei.

IMG als die barrierefreie(re) Alternative

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

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

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 Alternativen mit HTML vorgestellt.

Was bleibt?

Viele Anforderungen der Barrierefreiheit lassen sich auf Symbole anwenden. Weitere Aspekte des barrierefreien Webdesigns wie 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 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.