Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken! veröffentlicht in 2012

Alternativtexte und Kontext

Wenn auf die Einbindung von Intern: Grafiken per CSS zugunsten eines IMG-Elements entschieden wird, dann steht die Frage nach dem richtigen Alternativtext im Raum. Das Thema Intern: 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 Intern: 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:

Navigationsleiste mit verschiedenen grafischen Informationsträgern

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