Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken! 
veröffentlicht in 2012
Alternativtexte und Kontext
Wenn auf die Einbindung von 
Grafiken per CSS zugunsten eines IMG-Elements entschieden wird, dann steht die Frage nach dem richtigen Alternativtext im Raum. Das Thema Alternativtexte ist nicht trivial, besonders wenn Symbole für sich alleine als Links oder Steuerelemente eingesetzt werden. Dabei geht es darum, Alternativtexte so zu formulieren, wie Linktexte oder Schaltflächentexte formuliert würden.
Informative und funktionale Grafiken
Neben rein dekorativen Grafiken, die einen leeren Alternativtext erhalten sollten oder per CSS eingebunden werden können, ist bei Symbolen meist zwischen funktionalen und informativen Grafiken zu unterscheiden. Funktionale Grafiken sind verlinkte Grafiken und der Alternativtext ist als (Linktext bzw. Teil des Linktextes zu wählen. Informative Grafiken geben eine Zusatzinformation zum dazugehörigen Inhalt. In beiden Fällen ist ein möglichst knapper Alternativtext zu wählen.
Im folgenden Beispiel werden in der Navigationsleiste zwei Arten von Symbolen eingesetzt:
Das Pluszeichen signalisiert, dass ein Navigationseintrag ausgeklappt werden kann. Der grafische Pfeil rechts signalisiert, dass die Seite im Inhaltsbereich der Seite gerade angezeigt wird. Die verlinkten Grafiken zum Ausklappen der Navigationseinträge haben funktionalen Charakter und werden deswegen mit dem Alternativtext "Ausklappen" versehen. Der Pfeil ist informativ und mit dem Alternativtext "Aktuelle Seite" o.Ä. auszuzeichnen.
Kontextuelle Aspekte
Wenn für eine Suchfunktion ein Lupensymbol als Schaltfläche verwendet wird, sollte der Alternativtext für das Lupensymbol "Suche starten" o.Ä., aber nicht "Lupe" heißen. Wenn für Schaltflächen in Formularen Symbole verwendet werden, dann gilt das Gleiche wie für verlinkte Symbole ohne Text: Der Alternativtext des Bildes dient als Beschriftung für das Steuerelement und die Aktion, die durch das Betätigen der Schaltfläche ausgelöst wird, muss sich im Alternativtext widerfinden.
<button type="submit">
<img alt="Suche starten" src="lupe.png" />
</button>
Beispiel mit LEGEND
Für die Wahl des "richtigen" Alternativtextes spielt der Kontext immer eine Rolle. Wenn die Suchfunktion in diesem Beispiel mit einem umschließenden FIELDSET und "Suche" im LEGEND ausgezeichnet wäre, dann dürfte der Alternativtext für die Lupe nur noch "Starten" lauten.
<fieldset>
<legend>Suche</legend>
<button type="submit">
<img alt="starten" src="lupe.png" />
</button>
</fieldset>
Die Besonderheit hier ist, dass Screenreader ein LEGEND zusammen mit der Beschriftung des Steuerelements ausgeben. Ein Screenreader, der die Schaltfläche fokussiert, gibt "Suche" plus "starten" an den Nutzer aus.
Redundante Symbole
Der Kontext spielt natürlich auch dann eine Rolle, wenn das Symbol zusammen mit Text ausgespielt wird:
<button type="submit">
<img alt="" src="lupe.png" />
Suche starten
</button>
Mit dem Text "Suche starten" ist die Funktion der Schaltfläche bereits vermittelt und das Symbol sollte einen leeren Alternativtext erhalten.