Internet ohne Ausgrenzung

Prinzipiell sind Behörden und öffentliche Einrichtungen seit zwei Jahren dazu verpflichtet, behindertengerechte Websites anzubieten. Doch auch abseits von Bundesämtern nimmt barrierefreies Web-Design einen wachsenden Stellenwert ein: Nach Accessibility-Richtlinien entwickelte Sites ermöglichen nicht nur Menschen mit Handicap ungehinderten Zugang, sie erleichtern allen Besuchern die Bedienung und darüber hinaus auch die Arbeit des Web-Masters.

Doch eine barrierefreie Website lässt sich nicht einfach zusammenklicken. Die Umstellung bedarf eines grundsätzlichen Verständnisses des aktuellen Web-Standards HTML 4.01 beziehungsweise dessen XML-Umformulierung XHTML sowie von Cascading Style Sheets (CSS).

Das barrierefreie Web-Design fängt mit der Einhaltung der aktuellen Standards an, trennt dann konsequent Form von Inhalt und gliedert letzteren in einer formalen Struktur. Zusätzliche Syntaxelemente erweitern dann noch den Bedienkomfort für behinderte Besucher.

Zur optischen Gestaltung kommen CSS zum Einsatz - eine Technologie, über die c't schon mehrfach im Detail berichtet hat [1, 2]. Um aber von unhandlichen Tabellenmonstern auf CSS umsteigen zu können, müssen zunächst geeignete Rahmenbedingungen geschaffen werden.

Da die unvermeidbare Strukturierung einer Site auch den Design-Vorgang vereinfacht, ist der barrierefreie Ansatz für jeden Web-Entwickler interessant - gleich ob privat oder beruflich. Wer also auf behindertenfreundliches Web-Design hin arbeitet, erleichtert sich dabei auch selbst die Pflege und Weiterentwicklung seiner Site.

Große Minderheit

Allein in Deutschland leben über eine halbe Million Sehbehinderte und etwa 155 000 Blinde. Hinzu kommt eine nicht unerhebliche Zahl von Bürgern mit motorischen Einschränkungen unterschiedlicher Schwere. Ohne durchgängig barrierefreies Web-Design findet dieser bislang benachteiligte Personenkreis keinen oder nur eingeschränkten Zugang zu gesellschaftlichen Prozessen, die online stattfinden, darunter unter anderem Netzmagazine, Wikis und Diskussionsforen.

Barrierefreiheit bedeutet, den Zugang zu einer Website für alle Besucher so einfach wie möglich zu machen. Dazu gehört auch, dass hochgradig Sehbehinderte und Blinde die Seiten mit einer speziellen Software lesen können - so genannten Screen Readern.

Über den Screen Reader nimmt ein sehbehinderter Besucher Webseiten grundsätzlich anders wahr als sehende Anwender. Letztere lesen eine Webseite üblicherweise nicht von links oben bis rechts unten. Stattdessen wandert das Auge zunächst über die Seite als Ganzes, bevor der Blick an einem für sie interessanten Inhalt oder einem markanten Blickfang hängen bleibt. Screen Reader gehen anders vor: Sie erfassen schrittweise den Inhalt des Browser-Fensters und geben das Gefundene als einfachen Text weiter. Grafische Hervorhebungen wie Farb- oder Schriftdefinitionen ignorieren Screen Reader dabei ebenso wie die optische Anordnung der Elemente auf der Seite - mehr zur Funktionsweise im Kasten „Vorlesestunde“. Als einzige Orientierungshilfe dient der strukturelle Aufbau des HTML-Codes.

Daraus folgend beruht das Grundprinzip der Barrierefreiheit aus der konsequenten Trennung von Struktur (XHTML), Design (CSS), Inhalt (Texte und Bilder) und Funktion (PHP, MYSQL).

Barrierefrei per Gesetz

Einigen Webmaster bleibt gar keine Wahl: Ihre Seiten müssen nach dem 31. Dezember 2005 zwingend behindertengerecht sein. Betroffen sind alle Web-Auftritte, die aus der öffentlichen Hand finanziert werden. Die Missachtung des Gesetzes kann teuer zu stehen kommen, da Verbände die Barrierefreiheit einklagen können. Potenziell betroffen sind davon alle Träger des öffentlichen Rechts - neben Bundesämtern gehören dazu auch Landesregierungen, staatliche Versicherungen und Polizeidienststellen.

Die Sites müssen konkreten Anforderungen gerecht werden, die im Forderungskatalog der „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz“ ausformuliert wurden, auch bekannt als die Rechtsverordnung zu § 11 des Behindertengleichstellungsgesetzes (BGG). Etwas weniger sperrig wird das Gesetz auch als „Barrierefreie Informationstechnik-Verordnung“ bezeichnet oder kurz und bündig als BITV.

Das Gesetz regelt bindend, dass Träger der öffentlichen Gewalt ihre Internet-Auftritte technisch so gestalten müssen, dass sie auch Menschen mit Handicap ohne Abstriche nutzen können. Spätestens ab dem 1. Januar 2006 müssen behinderte Nutzer also unbeschränkten Zugang zu allen betroffenen Sites erhalten. Die am 24. Juli 2002 herausgegebene Verordnung stellt in vierzehn Punkten klar, was nach dem Gesetz genau unter Barrierefreiheit zu verstehen ist [3]. Dennoch fällt es manchen offenbar schwer, die meist eindeutigen Prinzipien in brauchbare Praxis umzusetzen.

Mit dem Schlagwort „barrierefrei“ wird viel Schindlunder getrieben: Viele vorgeblich behindertengerechte Websites entsprechen den tatsächlichen Anforderungen nicht oder setzen die benötigten Elemente nur teilweise um - für hochgradig Schwerbehinderte, Blinde und hochgradig Sehbehinderte bisweilen eine unüberwindbare Hürde.

In der Praxis werden den klaren Anforderungen derzeit nur wenige Sites gerecht - die Polizei von Nordrhein-Westfalen ist eine seltene positive Ausnahme (www.polizei-nrw.de). Dagegen sieht das baden-württembergische So-zialministerium die Gleichstellung Behinderter zwar als zentrales Thema, bietet aber keine barrierefreien Seiten [4].

Um die Seite der Bundesregierung ist es ebenso schlecht bestellt (www.bundesregierung.de). Von Verschachtelungsfehlern abgesehen, arbeitet die Hauptseite mit Netscape-spezifischen <spacer>-Tags und Bildern ohne alt-Attribut. Auch die angebotene Textversion stellt allenfalls ein Lippenbekenntnis zur Barrierefreiheit dar. Selbst die Online-Veröffentlichung der Verordnung selbst hält sich nicht an die darin gestellten Forderungen. In ihrer derzeitigen Form erfüllt nicht einmal sie die darin gestellten Forderungen; eine Prüfung der HTML-Syntax mit dem Validator des standardgebenden World Wide Web Consortiums ergibt 190 Fehler [3].

Klar, noch bleibt den Web-Mastern Zeit, die Pannen zu beheben. Im Juli 2002 bereits existierende Sites bekamen eine Gnadenfrist bis Ende 2005 eingeräumt; neue Sites müssen dagegen jetzt schon zwingend den Ansprüchen der Verordnung gerecht werden. Im Übrigen ist Deutschland nicht das einzige Land mit einem Gleichstellungsgesetz für Behinderte. Zwar ist auf EU-Ebene noch kein dahingehender Gesetzesvorschlag in Aussicht, doch in den USA ist Barrierefreiheit bereits einklagbar.

Seiten entbeinen

Der erste Schritt auf dem Weg zur Barrierefreiheit besteht darin, die Seiten zu entrümpeln - den Anfang macht eine Trennung der optischen Auszeichnungen von den Inhalten, gefolgt von einer Auslagerung der Navigation. Die Inhalte sind der Grund, warum die Besucher die Seite überhaupt besuchen. Alle anderen Elemente können nur dabei helfen, die Inhalte zu finden und zu identifizieren.

Ein gut strukturierter Seitenaufbau ist unabdingbar, um Seiten barrierefrei zu machen und die Verwaltung zu erleichtern. Am einfachsten geht das mit einer gründlichen Säuberungsaktion und globalem Suchen und Ersetzen immer wiederkehrender Sündenfälle, sofern die bisherigen Seiten das zulassen. Ansonsten ist Handarbeit angesagt.

HTML besteht aus Befehlen (Tags) und Auszeichnungen (Attributen), um die Ausgabe der Befehle zu beeinflussen. Tags dienen zur Definition der logischen Auszeichnung; Attribute konkretisieren diese. Ein einfaches Beispiel:

<h1 align="center">Zentrierte Überschrift erster Ordnung</h1> 

Bei vielen Seiten wird dieses Grundkonzept hingegen ad absurdum geführt, da die Tags nicht zur logischen Gliederung des Dokuments verwendet werden, sondern allein zur optischen Hervorhebung. Aus unstrukturiertem Code bestehende Seiten werden gern abfällig als „Tag Soup“ bezeichnet - Syntaxssuppe. Auf einen logischen Aufbau wurde hier nicht geachtet - Hauptsache, der Browser zeigt die Seiten so an, wie vom Designer gewollt. Überschriften sind in Wirklichkeit Standardtext, der mit veralteten Syntaxbefehlen in Farbe und Schriftgröße verändert wurde. Statt echten Absätzen (<p></p>) finden sich im Code doppelte Zeilenumbrüche (<br><br>). Pixelgenaue Abstände werden mit transparenten GIF-Grafiken erzwungen; die Anordnung der Seitenelemente übernehmen per border=“0“ unsichtbar gemachte Tabellen.

Ein Beispiel für diese HTML-Suppe findet sich im nebenstehenden Code-Beispiel. Ein Browser mag diese Seite zwar korrekt anzeigen, doch definiert der HTML-Code allein die Anzeige, nicht jedoch die Struktur. Tag-Suppe kommt nicht von ungefähr - die ersten grafisch ambitionierten Web-Designer hatten gar keine andere Wahl, als tief in die Trickkiste zu greifen, um ihre Layout-Vorstellungen zu verwirklichen.

So zweckentfremdeten sie halt die vorhandenen Syntaxelemente - Tabellen wurden nicht zu Layout-Zwecken eingeführt, sondern um die tabellarische Anzeige von Daten zu ermöglichen. <font>- und andere Tags, die allein die Optik betrafen, nicht aber die Struktur der Seiten, wurden von Netscape ohne Rücksicht auf die Standardisierungs-Komitees eingeführt und von Grafikern begeistert übernommen.

Bis zu HTML 4.0 waren HTML-„Hacks“ also unabdingbar, wollte man seine Seiten von der Masse abheben. 1996 führte das standardgebende World Wide Web Consortium (W3C) Cascading Style Sheets ein, um Inhalte und Form voneinander zu trennen. Die erweiterte Spezifikation CSS Level 2 wurde im Mai 1998 vorgestellt - doch die Browser-Hersteller ließen sich viel Zeit mit der Umsetzung. Neben den eingangs genannten c't-Artikeln finden sich auch im Web zahlreiche gute Einführungen zu den Möglichkeiten und Grenzen von CSS [5].

Ausgelagerter Stil

Die Auslagerung der optischen Gestaltung in ein Style Sheet hat mehrere Vorteile: Die HTML-Dokumente selbst werden deutlich schlanker. Einmal festgelegte Stilanweisungen lassen sich komfortabel zentral verwalten und auf mehrere Dokumente anwenden, sodass die Seiten quasi von selbst ein konsistentes Aussehen einhalten.

Bei der Umstellung muss man sich von den überholten HTML-Tricksereien verabschieden. Um Überschriften per CSS ein einheitliches Erscheinungsbild zu verleihen, müssen sie eindeutig ausgezeichnet werden (<h1>, <h2> usw.). Da Navigationsmenüs eigentlich Auswahllisten darstellen, sollte man sie auch als solche kennzeichnen (<ul> und <li>. Um die Entfernung der Gliederungspunkte und die Abstände kümmert sich später das Style Sheet).

Layout-Tabellen haben ausgedient, da sich die Positionierung von Seitenelementen komplett über Style Sheets regeln lässt. Dank CSS können Tabellen wieder ihrer ursprünglichen Bestimmung zugeführt werden - zur Anzeige tabellarischer Daten. Zwar interpretieren die aktuellen Browser manche Layout-Befehle noch mit geringen Unterschieden, doch das war bei der Interpretation von Tabellen lange Zeit nicht anders. Mit CSS sieht die Situation deutlich besser aus, da der Designer in der Regel nur noch das Style Sheet anpassen muss, ohne aber den Seiteninhalt anrühren zu müssen.

Gerade für blinde Besucher sind Layout-Tabellen besonders fatal. Screen Reader erwarten in einer Tabellenzelle tabellarische Daten, die er dann auslesen will. Oftmals findet er stattdessen eine weitere Tabelle - einige Portale und Startseiten verschachteln mehr als 50 Tabellen ineinander. Das Portal der Stadt München (www.muenchen.de) bringt es auf der Startseite auf über 400 Tabellenzellen.

Die Verwaltung eines derartigen Wusts ist sehr aufwendig und anfällig; so findet sich im Web kaum ein aus Tabellen zusammengeflicktes Portal, das frei von Verschachtelungsfehlern wäre - wer will auch bei einem Dutzend nacheinander geöffneter <td>-Tags noch den Überblick behalten, ob alle ordnungsgemäß geschlossen sind? Da Screen Reader sich in diesen defekten Konstrukten oftmals „verrennen“, sind solche Web-Präsenzen für Blinde unerträglich. Konsequenterweise verbietet die BITV deshalb auch den Einsatz von Layout-Tabellen.

Die nächste Stufe

Streng genommen ist HTML selbst mittlerweile passee. Vor über vier Jahren verabschiedete das W3C den XHTML-Standard 1.0, einer Umformulierung von HTML als Untergruppe der Metasprache XML (eXtensible Markup Language).

Mit dem Umstieg auf die eXtensible Hypertext Markup Language 1.0 ändert sich eigentlich recht wenig. In erster Linie bedingt die XML-Kompatibilität, dass alle Tags geschlossen werden müssen. Bei <img>, <hr> und <br> funktioniert dies über den Kunstgriff, dass das Tag durch einen Querstrich in sich geschlossen wird (<img [...] />, <hr />, <br />). Ein Leerzeichen zwischen Tag und Strich sorgt dabei dafür, dass sich auch ältere Browser wie Netscape 4 nicht an der neuen Syntax verschlucken. Weitere Änderungen bestehen darin, dass Tags und Attribute klein geschrieben werden und alle Attribute in Anführungszeichen stehen.

In der 2001 nachgereichten XHTML-Spezifikation 1.1 hat das W3C dann die strikte Trennung von logischer Struktur und Erscheinungsbild komplett umgesetzt. Ausschließlich die Optik betreffende Auszeichnungen wie <font> haben in XHTML 1.1 nichts mehr verloren - daher ist dieser Standard die optimale Grundlage für barrierefreie Web-Entwicklung.

Aber selbst in XHMTL kann man noch patzen. Das folgende Konstrukt ist die moderne Entsprechung für optische Formatierung in HTML 3.2 - schön anzusehen, aber strukturell irrelevant und somit Gift für Screen Reader:

<div style="font-family:Arial,sans-serif; font-size:20px; font-weight:bold;">Web-Design</div>

Um dem Code-Fragment Struktur zu geben, genügt eine einzige Änderung:

<h1 style="font-family:Arial,sans-serif ;font-size:20px; font-weight:bold;">Web- Design</h1>.

Das Erscheinungsbild ist dasselbe, doch jetzt erkennen nicht nur sehende Anwender, sondern auch Screen Reader sofort, dass es sich hier um eine Überschrift handelt und behandeln sie entsprechend: JAWS etwa liest vor „Überschrift erster Ordnung: Web-Design“. <div> ist dagegen ein undefinierter Bereich, der beliebige Inhalte umfassen kann - ein Allerwelts-Container, dessen Inhalt die Software nur als gewöhnlichen Fließtext auswerten kann.

Auch Suchmaschinen werten HTML-Seiten nach deren logischer Struktur aus. Ein <div> mit dem Inhalt „Web-Design“ hat für die Gewichtung der Seite wenig bis keine Bedeutung. Die Auszeichnung als <h1>-Überschrift gibt dem Begriff dagegen eine höhere Bedeutung; dementsprechend relevanter wird die Seite eingestuft. Somit hat die Einhaltung logischer Syntaxstrukturen auch für solche Web-Designer Vorteile, die mit Barrierefreiheit zunächst nichts am Hut haben.

Konsequent stilvoll

Stilangaben lassen sich auf dreierlei Art umsetzen: als direktes Attribut des HTML-Tags (Inline), im Kopf des Dokuments eingebettet (Embedded) oder über eine separate CSS-Datei (External) - mehr dazu in [1].

Inline Styles eignen sich ausschließlich für Hervorhebungen, die nur ein einziges Mal vorkommen sollen, da man sie genau wie seinerzeit die <font>-Tags bei jedem Tag wiederholen muss. Embedded Styles empfehlen sich für Seiten, deren Layout-Definitionen in keinem anderen Dokument der Site benötigt werden.

In den meisten Situationen wird die Wahl aber auf ein externes Style Sheet fallen, das gegenüber den Alternativen mehrere Vorteile hat: Es hält den HTML-Code angenehm klein und verringert auch die Server-Last, da der Browser die CSS-Datei nur einmal abruft, um sie dann für alle Seiten anzuwenden. Zudem fällt es so leichter, eine einheitliche Optik einzuhalten. Im Idealfall lässt sich bei der die Trennung von Form und Inhalt das Aussehen der ganzen Site durch eine zentrale Style-Sheet-Anpassung verändern.

Welche Auswirkungen die Loslösung der Design-Elemente von der Dokumentenstruktur haben, demonstriert anschaulich der CSS Zen Garden (www.csszengarden.com). Im Kern besteht die Site aus einer einzigen Beispielseite, die der Besucher mit 350 verschiedenen Style Sheets betrachten kann. Könnte man nicht in den Quellcode sehen, würde man nicht glauben, dass alle Ansichten dieselbe HTML-Grundlage haben und alle Unterschiede im CSS stecken. (ghi)

Fortsetzung in Teil 2 (c't 19/04): Validieren, aber richtig; Abk. auszeichnen; Inhalte und Form wieder zusammenführen; Tastaturnavigation per Access Keys; blindengerechte Bilder.

Die Autorin arbeitet als Entwicklerin bei der Web-Design-Agentur Cyberworking.

Literatur

[1] Alexander Oberdörster, Geregelte Nachfolge, Webseiten in XHTML und CSS wandeln, c't 23/03, S. 222

[2] Alexander Oberdörster, Web-Waschmittel, XHTML-Konverter und CSS-Layouts, c't 24/03, S. 224

[3] Barrierefreie Informationstechnik-Verordnung: www.bmi.bund.de/dokumente/Artikel/ix_90156.htm

[4] Website des Sozialministeriums Baden-Württemberg

[5] Einführungen in CSS: www.blooberry.com/indexdot/css/topics/stylefaq.htm (engl.); http://de.selfhtml.org/css/intro.htm (dt.)

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>[...]</head>
<body>
<table align="center" border="0"><tr><td>
	<font size="+3"><font color="#ff0000">
	<center>Überschrift</center>
	</font></font>
</td></tr><tr><td>
	<center>Ein Absatz mit beliebigem Text.</center>
</td></tr></table>
</body>
</html>

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>[...]</head>
<body>
<h1 align="center">
 	<font color="#ff0000">Überschrift</font>
</h1>
<p align="center">
 	Ein Absatz mit beliebigem Text.
</p>
</body>
</html>

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<link rel="stylesheet" type="text/css" href="stil.css" />
[...]
</head>
<body>
<h1 class="zentrier rot">
	Überschrift
</h1>
<p class="zentrier">
	Ein Absatz mit beliebigem Text.
</p>
</body></html>

zentrier {text-align: center;}
rot {color: #ff0000;} 

<h1 style="font-family:Arial,sansserif; font-size:20px;
 fontweight: bold;">Überschrift</h1>
<p>Ein Absatz mit beliebigem
Text.</p>
<h1 style="font-family:Arial,sansserif; 
font-size:20px; fontweight: bold;">Überschrift</h1>

<head>
<style>
h1 {font-family: Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}
</style>
[...]
</head>
<body>
<h1>Überschrift</h1>
<p>Ein Absatz mit beliebigem Text.</p>
<h1>Überschrift</h1>
</body>

<head>
<link rel="stylesheet" type="text/css" href="stil.css" />
[...]
</head>
<body>
<h1>Überschrift</h1>
<p>Ein Absatz mit beliebigem Text.</p>
<h1>Überschrift</h1>
</body>

h1 {font-family: Arial,sans-serif;
font-size:20px;
font-weight:bold;
}

(ghi)