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:
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 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
<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 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.
Der Beitrag "Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken!" besteht aus folgenden einzelnen Webseiten:
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 ist u.a. vom Kontext abhängig.