Barrierefreie Webseiten

Case Studies

Der direkte Vergleich

Aus lauter Unwissenheit meinen viele, dass barrierefreie Webseiten entweder nur sehr kompliziert herzustellen seien, oder eben grafisch deutlich Abstriche hinnehmen müssen. Dass dem definitv nicht so ist, zeigt unsere kleine Demonstrationseite, die wir in zwei Versionen hergestellt haben.

Im Beispiel: Die grüne Seite

Variante 1 haben wir zunächst ganz stumpf mit Hilfe von Photoshop und Dreamweaver verwirklicht. Diese Webseite mit tabellenbasiertem Design spiegelt in etwa dem Gros aller Webseiten wider. Im Quelltext dienen Tabellen nicht der tabellarischen Darstellung von Daten, sondern einzig der Positionierung der vielen Grafiken. Syntaktisch ist hier nichts wirklich richtig, der Code ist alles andere als lesbar, die Navigation besteht aus Grafiken.
Unsere barrierefreie Variante zeigt eindrucksvoll, dass man mit viel weniger Quelltext, einer sauberen Syntax und durchdachter Technik die visuell gleiche Webseite ohne Abstriche in der Funktion (mouseover in der Navigation) herstellen kann. Ganz im Gegenteil: Durch die Verwendung einer Liste statt Grafiken für die Navigation kann diese Webseite selbst im Ausruck überzeugen.

  
Im direktem Vergleich: grausame HTML-Version (links) und barrierefreie Version (rechts)

Der Quelltext im Vergleich

Der stark verkürzte Quelltext zeigt die technischen Unterschiede und Konzepte.

<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td><table border="0" cellpadding="0" cellspacing="0">... HTML-Kopf ...</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="200" valign="top">
        <table border="0" cellpadding="0" cellspacing="0">... Navigation ...</table>
    </td>
    <td width="500" valign="top">... Inhalt ...</td>
    <td width="40"><img src="pics/spacer.gif" width="10" height="10" alt=""></td>
</tr>
</table>

HTML-Version mit Tabellen zur visuellen Gestaltung

<div id="wrapper">
    <div id="header">... Kopf ...</div>
    <div id="navi">... Navigation ...</div>
    <div id="content">... Inhalt ...</div>
</div>

Barrierefreie Gestaltung mit weniger Quelltext

Wie man sieht, können wir den Quelltext bei der Entrümpelung sogar noch verkleinern. Die visuelle Gestaltung übernimmt hier einzig CSS. So kann man unterschiedliche Webseiten mit einem und dem gleichen Inhalt online stellen, in dem man ganz einfach die Stylesheets austauscht.

Unsere barrierefreie Webseite im Druck und ohne css

Unsere Beispielsite würde in der Druckversion, bei der wir via media-Argument unterschiedliche Stylesheets einbinden, so aussehen:

Screenshot des Druckergebnisses   Screenshot Barrierefreie Version ohne CSS
Dank barriererefreier Programmierung: Unser Webseite aus dem Drucker (links) und bei abgeschaltetem CSS noch benutzbar (rechts)

Barrierefreie Webseiten | Version 1.5 alpha | 2005-07-27