BITV Reloaded – Anforderung 6

Bedingung 6.1: Auch ohne Style Sheets nutzbar (Prio. 1)

Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn die zugeordneten Style Sheets deaktiviert sind.«

Was heißt das?

Die Erfüllung dieser Bedingung sollte kein Problem sein, wenn Sie in Ihren Seiten den Inhalt sauber von der Verpackung getrennt halten. Allerdings bedingt der Einsatz von CSS, dass Ihre HTML-Dokumente logisch strukturiert sein müssen, um auch ohne CSS noch verwertbar zu sein, wenn Style Sheets nicht oder nur unzureichend unterstützt werden.

Dies betrifft auch Inhalte und Gestaltungselemente, die mehr als Dekoration sind und per CSS statt per HTML eingebunden sind. Techniken hierfür sind zum Beispiel sogenannter ›Generated Content‹, bei dem Inhalte aus einer CSS-Datei in ein HTML-Dokument übernommen werden, aber auch CSS-Hintergrundbilder, in denen sich wesentliche Inhalte befinden.

Bestimmte Methoden der Positionierung per CSS sind im Sinne der Barrierefreiheit ebenfalls kritisch zu betrachten. Wenn Elemente frei in einer Seite positioniert sind, kann es bei nachlässiger Umsetzung passieren, dass diese Inhalte in ihrer Abfolge keinen Sinn mehr ergeben, sobald CSS abgeschaltet ist. Dies betrifft insbesondere Fälle, wo das eingesetze Benutzerprogramm sehr nah am Quelltext ›arbeitet‹ und auf eine logische Struktur der Seite angewiesen ist, wie dies generell bei Screenreadern der Fall ist.

Das heisst nicht, dass absolute Positionierung grundsätzlich als problematisch oder barrierebehaftet anzusehen ist. Im Gegenteil, auch mit absoluter Positionierung und relativer Bemaßung kann man ganz hervorragende Layouts umsetzen, die sich sehr gut an Benutzereinstellungen anpassen.

Wie können Sie das testen?

In Anforderung 3 wurde ja bereits das ToggleCSS-Favelet und die Web Developer Toolbar vorgestellt, mit denen Sie sämtliche CSS-Formatierungen einer Seite deaktivieren können. Laden Sie Ihre Seiten und entfernen Sie die Style Sheets. Einzelne Dinge wie CSS-Hintergrundbilder lassen sich auch selektiv mit der Web Developer Toolbar abschalten. Sie sollten bei der Überprüfung besonderes Augenmerk darauf legen, dass die Reihenfolge aller wesentlichen Inhalte und Funktionen einer Seite oder Anwendung ohne CSS der Reihenfolge der visuellen Reihenfolge in der Ansicht mit CSS entspricht.

Ausnahme von der Regel: dies betrifft nicht Navigationsleisten oder andere Inhalte, die nicht in unmittelbarem Zusammenhang mit dem wesentlichen Inhalt der Seite stehen. Hier sind sie durch verschiedene Methoden der Positionierung vollkommen frei in der Platzierung dieser Inhalte im Quelltext, solange Sie Sprungmarken anbieten, um diese Inhalte gegebenenfalls schnell erreichen zu können.

Noch einfacher geht es, wenn sie lokalen Zugriff auf die zu testenden Dateien haben: verschieben Sie einfach den Ordner, der die Style Sheets enthält. Üblicherweise ist dies das Verzeichnis /css/ in der obersten Ebene der Website. Wenn Sie nun die HTML-Dateien im Browser öffnen, werden die Style Sheets nicht mehr gefunden und das reine HTML angezeigt.

Allerdings stimmt dies nicht so ganz – auch ohne die zugeordneten Style Sheets werden Formatierungen auf Ihre HTML-Seite angewendet: die Browser-eignen Style Sheets. In Firefox finden sie diese zum Beispiel, indem Sie resource:///res/html.css in die Adresszeile des Browsers eintippen.

Problematisch wird diese Bedingung, wenn man sie wortgetreu auf XML-Dokumente wie z. B. RSS anwendet. Auch diese Formate sind »mittels Markup-Sprachen geschaffene Dokumente«, allerdings geben Browser, Feedreader und ähnliche Programme bei XML ohne zugeordnete Style Sheets den rohen Quelltext aus.

Beispiele:

Was alles schief gehen kann, wenn Inhalt, Funktion und Verpackung nicht sauber von einander getrennt wurden, sehen Sie bei einer älteren Version der Seiten der Bundeswehr. Wenn man hier die Style Sheets deaktiviert, erhielt man azurblaue Links auf dunkelblauem Hintergrund. Ursache hierfür war, dass die Vordergrundfarbe der Links in einem externen Style Sheet deklariert wurde, die Hintergrundfarbe jedoch im HTML-Dokument selber über die Hintergundfarbe einer Tabellenzelle.