Last modified: February 9, 2011

Was muss man bei Überschriften als Grafiken beachten und welche Nachteile nimmt man damit in Kauf.

Leider ist es Kunden auch bei explizit barrierearmen Auftritten nicht auszureden, Überschriften als Grafik zu realisieren, vor allem wird dabei auf das CI des Kunden Bezug genommen. Was ist also zu tun, wenn es sich nicht vermeiden läßt:

Eine Grafik als Hintergrund einbinden

Es gibt theoretisch viele Möglichkeiten, eine Grafik als Überschrift einzubinden – so könnte man schlicht in den H-Elementen die Grafik einbinden. Aber: Wo bleibt die semantische Strukturierung der Seite, wenn der Text der Überschrift fehlt bzw. nur im ALT-Attribut der Grafik enthalten ist.
Daher: Die Grafik in den Hintergrund des H-Elements einbinden.

Den Inhalt der Überschrift per CSS aus dem Dokument schieben

Mit dieser Technik lassen sich quasi zwei sprichwörtliche Fliegen mit einer Klappe schlagen: man hat eine Hintergrundgrafik integriert (CI-konform) und auch den Inhalt der Überschrift für die semantische Struktur zugänglich gemacht. Per CSS wird der Text weit aus dem Dokument nach links verschoben, damit er so auf dem Webseite nicht mehr sichtbar ist.

Nutzer, die benutzerdefinierte Stylesheets oder ein von der Webseite angebotenes, alternatives Stylesheet verwenden, erhalten dann den Inhalt der Überschrift in gewohnter Form. Problem: Was passiert, wenn ein Nutzer die Option “Grafiken aus” aktiviert hat und trotzdem das Standardlayout nutzt? Nun: Weder die Grafik noch der Text werden angezeigt, es bleibt ein leerer Streifen statt einer Überschrift.

Das H-Element mit einer TITLE-Attribut versehen

Damit die sematische Zuordnung der Überschrift zum H-Element nicht gänzlich verlorgen geht, sollte man dem H-Element ein TITLE-Attribut geben, das den Inhalt der Überschrift enthält. Aber das ist nur eine Zwischenlösung, wer fährt schon mit der Maus über eine leere Fläche. ;-)

Per Javascript den Text wieder ins Dokument platzieren

Ja: es gibt leider nur diese “magere” Lösung. Andererseits wird es wohl nicht so häufig auftreten, dass ein Nutzer ohne Grafiken mit dem Standardlayout arbeitet. Daher ist das Javascript, das per CSS den Text der Überschrift wieder ins Dokument platziert, eine vertretbare Lösung, wie ich finde.

Links zum Thema

• Eine wunderbar ausführliche Übersicht dieser Techniken, die sich Image Replacement-Technik nennt, von Jens Meiert
• Die Empfehlung, das H-Element mit einem TITLE-Attribut zu versehen von mezzoblue
• Das Javascript, um bei abgeschalteten Grafiken die Überschrift wieder ins Dokument zurückzuholen: JavaScript-enhanced image replacement

Update

Im Grunde sind diese Techniken viel zu anfällig, was Einstellungen und Umgebung betrifft. Besser für Überschriften keine Grafiken zu verwenden und wenn es denn sein muss, die Grafik mit lesbarem ALT-Attribut in das H-Element packen. ;-)