Inhalt

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?

Informieren

Zwei Darstellung einer Kopfzeile; im Kontrastmodus ist "Baden Württemberg" nicht mehr zu sehen Wem gehört diese Website?

Navigieren

Standard- und Kontrastmodus bei Xing: Im Kontrastmodus verschwindet die Navigation Wo sind meine Kontakte, meine Nachrichten ... ?

Kaufen

Auf amazon.de ist der Einkaufswagen im Kontrastmodus nicht sichtbar Wie bestelle ich nun?

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:

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 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 list-style-image und eine andere die Eigenschaft Intern: 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

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

Übersicht: Grafiken mit CSS

Der Beitrag "Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken!" besteht aus folgenden einzelnen Dokumenten:

Hintergrundgrafiken und der Kontrastmodus: Bei benutzerdefinierten Bildschirmfarben werden keine Hintergrundgrafiken mehr am Bildschirm angezeigt.
Listenaufzählungszeichen als Alternative zu background: Eine Alternative zu Hintergrundbildern ist die CSS-Eigenschaft list-style-image.
Generierte Inhalte mit content: Die mächtige CSS-Eigenschaft content kann als barrierefreie Alternative zu Hintergrundgrafiken eingesetzt werden.
Alternative Lösungen mit HTML: Grafiken mit Informationsgehalt benötigen eine textliche Entsprechung im HTML.
Visuelle Aspekte: Kontraste, Skalierbarkeit und der sichtbare Fokus: Icons sollten für Sehbehinderte gut wahrnehmbar sein.
Alternativtexte und Kontext: Die Wahl des richtigen Alternativtextes für ein verlinktes Symbol kann tückisch sein. Einige Beispiele in Abhängigkeit des Kontextes werden vorgestellt.