Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken!
veröffentlicht in 2012
Generierte Inhalte mit content
Mit der CSS-Eigenschaft content
in Verbindung mit den Pseudo-Attributen :before
und :after
können Inhalte vor oder hinter HTML-Elemente eingefügt werden. Wie CSS-Aufzählungszeichen werden Inhalte, die mit der CSS-Eigenschaft
content
eingefügt werden, im Kontrastmodus des Browsers beibehalten.
Wenn zum Beispiel CSS Sprites eingesetzt werden, um eine Werkzeugleiste darzustellen, dann können sie auch mit CSS barrierefrei umgesetzt werden, vorausgesetzt die Grafik wird nicht als Hintergrundgrafik eingebunden.
CSS Sprites sind eine Technik, bei der mehrere kleine Grafiken in eine Grafik zusammengefasst werden und dabei immer nur ein Teil der Grafik mittels CSS angezeigt wird. So können zum Beispiel alle auf einer Webseite verwendeten Symbole in einer Grafikdatei abgebildet werden; jedes Mal, wenn ein Symbol am Bildschirm angezeigt werden soll, wird die gleiche Datei eingebunden, nur wird immer nur ein Ausschnitt der Grafik am Bildschirm sichtbar gemacht. Ein Vorteil dieser Technik ist, dass die Grafik nur einmal geladen werden muss und somit die Seite insgesamt schneller laden kann. Auch bei dynamischen Effekten, etwa der Austausch der Grafik bei Mouse-Over und Fokus, muss lediglich der angezeigte Ausschnitt per CSS geändert werden, anstatt eine neue Grafik zu laden.
Eine zweite Voraussetzung für die Barrierefreiheit von CSS Sprites ist eine Textangabe im HTML für das Steuerelement. Der Inhalt, der mit
content
dargestellt wird, wird zwar am Bildschirm angezeigt, taucht aber nicht im DOM auf, kann kein Alternativtext erhalten und kann daher von Screenreadern nicht erfasst werden (Hinweis: Es gibt
Ausnahmen und in bestimmten Situationen werden mit
content
eingefügte Inhalte von Screenreadern doch gelesen. Bei Grafiken ist das allerdings nicht der Fall).
Bei Schaltflächen kann ein Text im BUTTON
-Element berücksichtigt werden. Bei Links muss ebenfalls die Funktion im Linktext aufgenommen werden.
Beispiel mit BUTTON
Das HTML für eine Werkzeugleiste könnte wie folgt aussehen:
<div id="schalter">
<button type="button" class="speichern">Speichern</button>
<button type="button" class="drucken">Drucken</button>
<button type="button" class="info">Info</button>
<button type="button" class="abbrechen">Abbrechen</button>
</div>
Der Text innerhalb des BUTTON
-Elements gibt den Schaltflächen einen Namen, wodurch sie auch von Screenreadern gelesen werden können. Im Folgenden wird die Sichtbarkeit der Symbole im Kontrastmodus des Browsers mit Hilfe von content
vorgestellt.
Die Schaltflächen sollen am Bildschirm mit CSS Sprites dargestellt werden. Zunächst sollten die BUTTON
-Elemente eine konkrete Breite und Höhe erhalten und die Eigenschaft overflow
auf hidden
gesetzt werden:
#schalter button {
width: 48px;
height: 48px;
overflow: hidden;
border: 1px solid #000;
padding: 0px;
margin: 5px;
vertical-align: top ; /* für FF */
}
Nachdem die Darstellungsfläche festgelegt ist, kann mit content
im Zusammenspiel mit den Pseudo-Attribut :before
die Grafik für jede Schaltfläche eingebunden werden:
#schalter button:before {
display: inline-block;
padding: 0px;
content: url('icons.png');
}
Jetzt muss für jede einzelne Schaltfläche die CSS-Grafik passend positioniert werden:
#schalter .speichern:before {
margin-top: -147px;
}
#schalter .drucken:before {
margin-top: -98px;
}
#schalter .info:before {
margin-top: -49px;
}
#schalter .abbrechen:before {
margin-top: 1px;
}
Mit diesen Anweisungen wird die Grafik für jede Schaltfläche so positioniert, dass das entsprechende Symbol aus der Grafik genau in den vorgegebenen Platz passt. Weil die Grafik sich am Anfang des Textknotens "hineindrängt", wird der jeweilige Schaltflächentext nach rechts außerhalb des sichtbaren Bereichs der Schaltfläche geschoben. Der Text bleibt dabei für Screenreader zugänglich.
Bei der Verwendung von background
statt content
kann im Übrigen ebenfalls ein Text für Screenreader berücksichtigt werden (der Text innerhalb von BUTTON
wird beispielsweise mit
position:absolute;
außerhalb des sichtbaren Bereichs der Schaltfläche geschoben). Die Verwendung von content
statt background
hebt aber das Problem von unsichtbaren Schaltflächen im Kontrastmodus auf:
content
, background
aber nichtSchaltflächen mit dem BUTTON
-Element sind hinsichtlich der Gestaltung mit CSS etwas wackelig und immer für eine Überraschung gut, und das Beispiel stellt zunächst lediglich ein Grundgerüst dar. Für Firefox muss noch ein Problem mit dem Fokus behoben werden. Die Technik funktioniert außerdem im Internet Explorer wegen der content
-Eigenschaft erst ab Version 8. Für Versionen 6 und 7 muss JavaScript zum Einsatz kommen (folgt weiter unten auf dieser Seite).
Beispiel mit INPUT
Alternativ zu BUTTON
kann auch INPUT
eingesetzt werden. Die Screenreaderfähigkeit wird im Folgenden mit dem alt
-Attribut erreicht:
<p class="speichern"><input type="image" src="icons.png" alt="Speichern" /></p>
Mit INPUT
wird die Grafik auf die HTML-Ebene zurückverlagert, d.h. die Grafik wird im Kontrastmodus angezeigt. Auch für Grafiken im HTML können CSS Sprites eingesetzt werden:
.speichern {
width: 48px;
height: 48px;
overflow: hidden;
border: 1px solid #000;
padding: 0;
margin: 5px;
}
.speichern input {
margin-top: -147px;
}
Nachteilig bei CSS Sprites in Verbindung mit Grafiken auf der HTML-Ebene ist, dass bei ausgeschaltetem CSS die komplette Grafik angezeigt wird. D.h. die Technik mit BUTTON
ist vorzuziehen, weil dann der Text der Schaltfläche als Fallback angezeigt wird.
Beispiel für Links
Analog zu Schaltflächen können natürlich auch Links eingesetzt werden, um anklickbare Symbole am Bildschirm anzuzeigen. Auch bei Links dürfen keine Hintergrundgrafiken verwendet werden, wenn die Grafiken informativ sind. Das Beispiel für die CSS Sprites in Schaltflächen wird analog aufgebaut:
<div id="links">
<a href="#" class="speichern">Speichern</a>
<a href="#" class="drucken">Drucken</a>
<a href="#" class="info">Info</a>
<a href="#" class="abbrechen">Abbrechen</a>
</div>
Wichtig ist auch hier, dass der Linktext vorhanden ist. Das CSS muss leicht angepasst werden, um das gleiche Ergebnis am Bildschirm zu erzielen wie im ersten Beispiel:
#links a {
width: 48px;
height: 48px;
overflow: hidden;
display:block;
float:left;
border: 1px solid #000;
padding: 0;
margin: 5px;
}
#links a:before {
display: inline-block;
content: url('icons.png');
}
#links .speichern:before {
margin-top: -147px;
}
#links .drucken:before {
margin-top: -98px;
}
#links .info:before {
margin-top: -49px;
}
#links .abbrechen:before {
margin-top: 1px;
}
Internet Explorer 6 und 7
Etwas aufwendiger ist die Umsetzung von CSS Sprites mit content
in Internet Explorer 6 und 7. Da content
in diesen Browsern nicht unterstützt wird, muss als Fallbacklösung die Wahl zwischen Pest und Cholera getroffen werden: Hintergrundgrafiken, die nicht barrierefrei sind, oder JavaScript, der möglicherweise im Browser des Nutzers abgeschaltet ist. In jedem Fall müssen einige Punkte beachtet werden.
Für eine barrierefreie Lösung eines CSS-Sprites mit BUTTON
(siehe oben auf dieser Seite) sind für Internet Explorer 6 und 7 einige JavaScript-Anweisungen erforderlich. Darüber hinaus muss das CSS leicht angepasst werden. Um diese Anweisungen nur für diese Browserversionen einzubinden, kann auf Conditional Comments gesetzt werden:
<!--[if (IE 6)|(IE 7)]>
... was auch immer hier steht, es kriegen nur Internet Explorer 6 und 7 mit ...
<![endif]-->
Und darin neben den angepassten CSS-Deklarationen auch die erforderlichen JavaScript-Anweisungen hineinzupacken.
Mit JavaScript muss die Grafik in das BUTTON
-Element hineingeschrieben werden:
<!--[if (IE 6)|(IE 7)]>
<script type="text/javascript">
var schalter = document.getElementById ('schalter');
var links = schalter.getElementsByTagName('button');
for (i=0; i < links.length; i++) {
links[i].insertAdjacentHTML("afterBegin", '<img id="button-'+i+'" src="icons.png" alt="" />');
}
</script>
<![endif]-->
Im Quellcode müssen die JavaScript-Anweisungen den Schaltflächen folgen. Das CSS gehört hingegen im Kopfbereich der Seite:
<!--[if (IE 6)|(IE 7)]>
<style>
.speichern img {
margin-top: -147px;
}
.drucken img {
margin-top: -98px;
}
.info img {
margin-top: -49px;
}
.abbrechen img {
margin-top: 0px;
}
</style>
<![endif]-->
Mit etwas Aufwand kann also ein gewisses Maß an Rückwärtskomatibilität erzielt werden.
Ergebnis
Mit der CSS-Eigenschaft content
können Symbole nur dann für alle zugänglich in Webseiten eingebunden werden, wenn die Rückwärtskompatibilität kein Thema ist.
Ob CSS Sprites eine gute Technik zur Einbindung von Symbolen ist, mag ich nicht beurteilen. Als Argument dafür wird meist die Performance angeführt.
Die Beispiele können heruntergeladen werden:
Anmerkung: Es sollte noch die Fokus-Problematik in verschiedenen Browsern berücksichtigt werden.
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
(Aktuelle Seite)
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.
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Namen