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 einemTITLE-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. 😉
zweieinhalb Sachen von mir dazu:
Hier kann ich Dir nicht folgen, an einer Grafik mit korrektem Alt-attribut geht semantisch nichts verloren.
In dem Sinne muss ich auch Deinem Update zustimmen, ich sehe – zumindest mindestens was Seitennavigation etc. betrifft, absolut keinen Sinn, da mit Text ausblenden etc. rumzufuhrwerken.
Ja – sehe ich mittlerweile auch genau so. „Rumfuhrwerken“ trifft es auch recht gut. Bei all diesen Ersetzungstechniken bleibt irgendein anderer Punkt auf der Strecke. Und da Screenreader auch die H1 mit Grafik-Alt-Text vorlesen, spricht nicht wirklich was dagegen, das so einzusetzen.
Klar, grundsaetzlich versuche ich dem Kunden das auszureden. Aber das klappt nicht immer. 🙂
ZITAT: Nun: Weder die Grafik noch der Text werden angezeigt, es bleibt ein leerer Streifen statt einer Überschrift.
Ähm, Falsch. Mann kann doch dem IMG ein „alt Tag“ geben und diesen durch CSS anpassen. Ist doch ganz einfach:
Man erstellt ne CSS Eigenschaft:
img{
font-size:16px;
color:#000;
}
in diesem Fall für alle Bilder und setzt da noch ne Schriftgröße, Farbe etc. hinzu.
Ganz einfach ^^