Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken! 
veröffentlicht in 2012
Visuelle Aspekte: Kontraste, Skalierbarkeit und der sichtbare Fokus
Neben der Notwendigkeit, CSS-Grafiken im Kontrastmodus darstellen zu können, gibt es natürlich weitere Anforderungen an die visuelle Gestaltung von Links und Steuerelementen, die nur über ein Symbol erkennbar sind. Dazu zählen die Berücksichtigung ausreichender Kontraste und vergrößerbare Grafiken; insbesondere bei Links und Steuerelementen ist aber auch auf den sichtbaren Fokus zu achten.
Kontrast
Im Allgemeinen ist auf das Kontrastverhältnis hinzuweisen, wobei diese Anforderung streng genommen nicht auf Symbole, sondern nur auf Text anwendbar ist. Wenn aber ein Symbol der einzige Inhalt ist, der auf eine Funktion hinweist oder eine bestimmte Information vermittelt, sollte für das Symbol nicht ebenfalls auf ein gutes Kontrastverhältnis geachtet werden?
Leider fehlt es in den Web Content Accessibility Guidelines(WCAG) 2.0 an Empfehlungen für die Erstellung barrierefreier Symbole. Auch in anderen Webstandards wie die Mobile Web Best Practicesspan> 1.
Vergrößerbare Symbole
Nach den WCAG 2.0 sollen Texte auf das Zweifache der Ausgangsgröße vergrößert werden können, was mit dem Seitenzoom grundsätzlich immer möglich ist. Mit dem Seitenzoom werden auch Grafiken vergrößert.
Obwohl alle Browser mittlerweile den Seitenzoom anbieten, kann es nicht schaden, Webseiten so zu bauen, dass sie mit der reinen Schriftvergrößerung benutzbar bleiben. Voraussetzung dafür ist, dass die Schriftgröße im CSS mit em oder % bemaßt werden. Auch Grafiken können mit relativen Maßeinheiten wie %code> dimensioniert werden, so dass die Skalierbarkeit von Symbolen grundsätzlich auch über CSS möglich ist. Der Vorteil dabei ist, dass die Symbole auch dann größer werden, wenn der Nutzer die reine Schriftvergrößerung im Browser aktiviert. Die Technik setzt auch voraus, dass die Grafiken im HTML referenziert werden.
Der sichtbare Fokus
Im Beitrag über CSS Sprites wurde u.a. ein Beispiel mit BUTTON vorgestellt, in der vier unterschiedliche Schaltflächen mit einer einzigen Grafik gestaltet wurden. Das Grundgerüst musste für Internet Explorer 6 und 7 erweitert werden. Was in dem Beispiel noch nicht berücksichtigt wurde, ist der sichtbare Fokus (und ebenso wenig einen Hover-Effekt).
Da sich das Beispiel um CSS-Sprites dreht, wird bei Fokus und Hover selbstverständlich das Symbol ausgetauscht. Es sollte aber insbesondere der sichtbare Fokus für Tastaturnutzer berücksichtigt werden. Das CSS kann wie folgt ergänzt werden:
#schalter button:focus,
#schalter button:hover {
border: 1px dashed #00f;
}
#schalter button:focus:before,
#schalter button:hover:before {
margin-left: -48px;
}
Bei den modernen Browsern macht Firefox Schwierigkeiten mit outline. Firefox versetzt außerdem die Grafik, wenn sie fokussiert wird, weswegen die Ausrichtung für alle Grafiken einmal korrigiert werden muss.
@-moz-document url-prefix() {
#schalter button {
outline: 0px;
}
#schalter button:before {
margin-left: -2px;
outline: 0px;
}
#schalter .speichern:before {
margin-top: -148px;
}
#schalter .drucken:before {
margin-top: -99px;
}
#schalter .info:before {
margin-top: -50px;
}
#schalter .abbrechen:before {
margin-top: 0px;
}
#schalter button:focus:before,
#schalter button:hover:before {
margin-left: -50px;
}
}
Bei den älteren Versionen 6 und 7 des Internet Explorers sieht es ebenfalls nicht gut mit dem sichtbaren Fokus aus, denn er wird bei Formularelementen nicht unterstützt. Zumindest für Internet Explorer 7 kann aber noch der Hover-Effekt berücksichtigt werden. Am Besten in den Conditional Comments:
#schalter button:hover img {
margin-left: -48px;
}
Download
Die um den sichtbaren Fokus erweiterten Beispiele zu CSS-Sprites mit BUTTON, INPUT und Links können Sie herunterladen: