Browser-Weiche, Stylesheet-Switch und relative Größen
Barrierefreie Websites mit CSS

Regelwerk

Browser-Weiche, Stylesheet-Switch und relative Größen

Barrierefreies Webdesign ist für Behörden Pflicht, für alle anderen zumindest moralische Verpflichtung. Und wo es eine rechtliche Verpflichtung gibt, fehlen natürlich auch nicht die entsprechenden Regelwerke und Verordnungen. In der Bundesrepublik ist dies die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV). Die dort festgelegten Regeln basieren wiederum auf den Zugänglichkeitsrichtlinien für Web-Inhalte 1.0 (Web Content Accessibility Guidelines 1.0) des World Wide Web Consortiums vom 5. Mai 1999. Davon gibt es zwischenzeitlich zwar eine Version 2.0, die sich aber noch im Working-Draft-Stadium befindet.

Im folgenden Workshop sollen einige Umsetzungsoptionen aufgezeigt werden, die sich vor allem aus der Anforderung 3 der Anlage zu dieser Verordnung ergeben.

Manche Forderungen dieses Regelwerks sind nicht neu, so zum Beispiel die Prämisse der strikten Trennung von Inhalt und Layout, also der Forderung nach einer Design-Umsetzung mittels Stylesheets. Auch die Forderung nach validen Dokumenten ist nicht neu. Auf den Seiten von W3C gibt es für jede Grammatik ein entsprechendes Validierungsprogramm.

Flexibler CSS-Einsatz

Browser-Weiche, Stylesheet-Switch und relative Größen

Wer nun, um den Barrierefrei-Anforderungen Genüge zu tun, intensiv mit Stylesheets arbeitet, muss auch Sorge dafür tragen, die richtige Formatierung an den anfordernden Client auszuliefern. Die gängige Methode dafür sind Browser-Weichen. Da lauert jedoch eine Falle: Wenn eine solche Weiche nur Client-seitig zum Beispiel via Javascript funktioniert, widerspricht dies der Anforderung, dass sie auch funktionsfähig sein muss, wenn der Client nicht über Javascript verfügt oder diese Option abgeschaltet hat.

Normkonformer ist in jedem Fall eine Browser-Weiche in einer Skriptsprache, die auf dem Server ausgeführt wird wie zum Beispiel PHP. Die Server-Variable $HTTP_ USER_AGENT liefert eine Menge Informationen über den Client, der eine Seite anfordert. Diese kann man nutzen, um ihm eine adäquat aufbereitete Seite zu liefern. Eine einfache Browser-Weiche in PHP kann so realisiert werden:


if(eregi("Msie",$HTTP_USER_AGENT)){
//hier wird das Styesheet für den IE eingebunden
}
elseif(eregi("Firefox",$HTTP_USER_AGENT)){
// und hier für den Firefox}
elseif(eregi("Opera",$HTTP_USER_AGENT)){
//und hier für Opera
}
?>


Konkret liefert die Variable im Fall eines Firefox 1.5 unter Windows folgenden Wert zurück:


Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6


Allerdings ist die automatische Zuordnung eines Stylesheets mittels Browser-Weiche nur eine Variante. Noch kompatibler zu den Anforderungen der Barrierefreiheit ist es, dem User selbst die Wahl eines Darstellungsformats zu überlassen.

Stylesheet-Switch anbieten

Browser-Weiche, Stylesheet-Switch und relative Größen

Das erledigt ein so genannter Stylesheet-Switch. Gängige Browser wie Internet Explorer und Firefox bieten schon von Haus aus dem Nutzer die Möglichkeit, zum Beispiel eigene lokale Stylesheets zu verwenden, die Stylesheets ganz abzuschalten oder die bestehenden zu verändern (Schriftgröße). Man kann eine solche Option natürlich auch auf der eigenen Website anbieten. Auch hier sollte man wieder der Versuchung widerstehen, diese mit Javascript zu realisieren. Ist diese Funktion nicht vorhanden oder abgeschaltet, läuft die gute Absicht ins Leere.

Innerhalb von HTML kann man dies mit normalen Links realisieren. Man platziert zum Beispiel in der Navigationsleiste die verschiedenen Ausgabeoptionen. Ein Klick auf die jeweilige Option lädt die Seite mit dem speziell angepassten Stylesheet. Nachteil dieser Variante: Es müssen viele Seiten mit redundantem Material auf dem Server vorgehalten werden. Eleganter ist auch hier wieder die Skriptlösung. Auf der Seite wird ein einfaches Pulldown-Menü mit den Auswahloptionen angeboten, die dann vom Skript interpretiert werden:

Das aufgerufene PHP-Skript interpretiert den übergebenen Wert und bindet das entsprechende Stylesheet in die auszuliefernde Seite ein. Seit CSS 2.0 können übrigens mit dem media-Attribut innerhalb des HTML-Dokuments Formate für unterschiedliche Ausgabemedien definiert werden. Im head-Bereich des Dokuments wird das folgendermaßen codiert:




Alternativ kann man auch innerhalb eines CSS-Files Formate für unterschiedliche Ausgabemedien definieren. Das sieht dann so aus:

@media print {body
{ font-size: 10pt }}
@media screen {body
{ font-size: 13px }}
@media screen, print {body
{ line-height: 1.2 }}


Die meisten Browser modernerer Bauart kommen damit auch zurecht. Zahlreiche Anwendungsszenarien kann man mit diesem Autoswitch abdecken, ohne auf eigene Programmierung zurückgreifen zu müssen.

Relative Einheiten

Browser-Weiche, Stylesheet-Switch und relative Größen

Die Überschrift sollte 24 Pixel hoch sein, dieser Text halb so groß. Die innerhalb der span-Elemente enthaltenen Texte, werden grau dargestellt und haben 90% der Größe des umgebenden Textes.

Fazit

Browser-Weiche, Stylesheet-Switch und relative Größen

Wie die Beispiele zeigen, steht für die Realisierung auch komplexer Anforderungen an die Barrierefreiheit ein umfangreiches Instrumentarium zur Verfügung. Allerdings ist der Design-Aufwand für einen Web-Auftritt, bei dem der Benutzer weit gehende Eingriffsmöglichkeiten in das Design hat, um einiges größer als bei einem Webdesign, das sich an einer klar umrissenen Zielgruppe und deren technischen Möglichkeiten orientiert.