Zugängliche Webseiten

Inhaltsverzeichnis

1. Einleitung
2. Grundsätze
3. Für Eilige
4. Textäquivalente
5. Frames
6. Aktive Inhalte - JavaScript
7. Hilfsmittel und weiterführende Informationen

Einleitung

Webseiten sind zugänglich, wenn alle Informationen von Leuten mit einer Behinderung, mit älteren oder "alternativen" Browsern (zum Beispiel textbasierte Browser, Screenreader oder PDAs) und von Software (zum Beispiel Spider von Suchmaschinen) verstanden oder verarbeitet werden können.

Die meisten Webseiten beinhalten vollkommen unnötige Hürden, welche die Zugänglichkeit erschweren. Das dürfte vor allem drei Gründe haben:

1. mangelhafte Programme zum Erstellen von Webseiten
2. mangelndes Wissen um die grundelgenden Techniken
3. Gleichgültigkeit

HTML bietet die nötigen Strukturen, um zugängliche Webseiten zu gestalten. Viele Webseiten liessen sich zugänglicher gestalten, wenn sich die Autoren ein wenig Mühe geben würden. Dieser Artikel möchte deshalb Eine kurze Einführung geben, wie sich die häufigsten Zugänglichkeitshürden mit wenig Aufwand beseitigen lassen.

Um eine Webseite zugänglich zu gestalten, muss nicht auf visuelle gestalterische Elemente verzichtet werden! Die meisten Hürden lassen sich beseitigen, ohne dass das Layout der Seite geändert werden muss.

Da praktisch alle WYSIWYG HTML-Editoren fehlerhaftes HTML produzieren, ist eine manuelle Nachbearbeitung nicht zu vermeiden. Dazu muss man natürlich HTML-Kenntnisse besitzen. Dazu ist Selfhtml von Stefan Münz sehr hilfreich.

Grundsätze

• Halten Sie sich an die Zugänglichkeitsrichtlinien für Web-Inhalte
• Verwenden Sie W3C-Technologien und verwenden Sie diese entsprechend der Spezifikation. (HTML, CSS, MathML,...)

Die Zugänglichkeitsrichtlinien stellen sicher, dass ihre Webseiten mit verschiedensten "Browsern" und von allen Menschen genützt werden können. Die Schwierigkeiten können so verschiedenartig sein, dass ein einzelner Webmaster sehr wahrscheinlich nie an alles denken würde, oder nicht weiss, was überhaupt für bestimmte Fälle die Zugänglichkeit behindern könnte. (Farbenblindheit, verschiedenartigste User Agents wie textbasierte Browser, Spider von Suchmaschinen, Browser in PDAs, motorische Behinderungen, Blindheit, ungünstige Lichtverhältnisse, ....)

Das W3C gibt Standards für Internetprotokolle, Dateiformate, ... heraus. Insbesondere HTML und CSS. Diese sind so angelegt, dass sie auch mit älteren Browsern gut zu benützen sind und beinhalten bereits Hilfsmittel, um die Zugänglichkeit zu ermöglichen. Bedenken Sie auch, dass zum Beispiel Suchmaschinen Nicht-W3C-Technologien (zum Beispiel PDF) im allgemeinen nicht indexieren könen. Sie sollten daher Informationen nie nur als PDF-Datei zur Verfügung stellen.

Für Eilige

• Bilder & Animationen. Beschreibe Funktion mit alt-Attributen.
• Image-Maps. Verwende benutzerseitige MAP-Elemente und Text für hotspots.
• Multimedia. Untertitel und Transkriptionen für Audio. Audio-Deskriptionen für Video.
• Hypertext-Links. Link-Text sollte verständlich sein, wenn nicht im Textzusammenhang gelesen. Vermeide z.B. "hier klicken".
• Aufbau der Seite. Verwende Überschriften, Listen und eine klar gegliederte Struktur. Wenn möglich, verwende CSS zur Formatierung.
• Diagramme. Beschreibe sie im Text oder verwende longdesc Attribut.
• Skripte, applets & plug-ins.Für den Fall das diese nicht behindertengerecht sind oder nicht unterstützt werden, mache Alternativen verfügbar.
• Frames (Rahmen). Verwende NOFRAMES und verständliche Titel.
• Tabellen. Sollten Zeile für Zeile lesbar sein. Fasse Inhalt zusammen.
• Überprüfe die Seite. Validiere. Verwende unter www.w3.org/TR/WCAG beschriebene Software & Richtlinien.

Textäquivalente

Problem

Textbasierte Browser, Screenreader oder auch Programme zum Indexieren von Webseiten können Grafiken überhaupt nicht wiedergeben oder verarbeiten. Die Graphikdarstellung kann auch einfach abgeschaltet sein (langsame Internetverbindung, störende Werbung,...).

Wenn Informationen (zum Beispiel Ziele eines Links, Diagramme,...) nur in graphischer Form verfügbar sind, kann das Besucher verärgern oder schlimmer noch, die Seite wird komplett unbenutzbar.

Ein Bild oder aktive Bereiche eines Image Map müssen also durch ein sogenanntes Textäquivalent oder einen alternativen Text ergänzt werden.

Beispiele

Wieso sollte man Textäquivalente verwenden?

Schauen Sie sich das Bild unten an! Haben Sie irgendeine Ahnung, was hinter den Links stecken könnte?

Das Bild zeigt die Links eines Image Maps auf der offiziellen Seite der Stadt Bern (Januar 2001).

Hätte man alternative Texte verwendet, wäre das Resultat auch mit einem Textbrowser problemlos verständlich.

Häufig wird angenommen, dass ein Textäquivalent immer die Beschreibung des Inhaltes der Grafik ist. Das stimmt nicht zwangsläufig. Ein Textäquivalent muss in erster Linie auch die Funktion der Grafik auf der Seite widergeben. Daher auch der Name Textäquivalent.

Beispiel 1

Das Bild zeigt das Logo der Swiss Internet User Group. Häufig wird mit dem alternativen Text nur der Inhalt der Grafik beschrieben, also "Logo der SIUG" oder "Logo der Swiss Internet User Group". Bei Textäquivalenten ist jedoch auch der Zweck und die Funktion entscheidend. Somit hängt das Textäquivalent direkt vom Zusammenhang ab, in dem es verwendet wird. Auf der Willkommensseite der SIUG ist obige Beschreibung sicher richtig.

In diesem Beispiel ist der Zweck der Grafik aber nicht der, das Logo der SIUG zu präsentieren. Es geht ja um ein Beispiel und daher ist in unserem Zusammenhang "Beispielgrafik zur Illustration von Textäquivalenten" ein Textäquivalent, ganz gleichgültig, was konkret zu sehen ist.

Auf der Seite von Dodeka.ch wird das Logo als Link verwendet. In diesem Fall ist "SIUG" oder "Swiss Internet User Group" das Textäquivalent und nicht etwa "Logo der SIUG".

Beispiel 2

Über uns
Neuigkeiten
Positionen

Auf einer Webseite wurden Links in einer "Liste" wie oben gezeigt. Als alternativer Text wurde "Oranger Punkt" verwendet. Auf einem Textbrowser wurde das ganze wie folgt angezeigt:

Oranger Punkt Über uns
Oranger Punkt Neuigkeiten
Oranger Punkt Positionen

Ein besseres Textäquivalent wäre "-". Dann hätte die "Liste" so ausgesehen:

- Über uns
- Neuigkeiten
- Positionen

Obige Liste ist im Quelltext nicht als Liste zu erkennen, sondern wurde nur mit erzwungenen Zeilenumbrüchen erzeugt. Die beste Lösung wäre hier die Verwendung von Listen-Markup und Cascading Style Sheets gewesen, um den Formatierungseffekt zu erreichen, also:

• Über uns
• Neuigkeiten
• Positionen

Beispiel 3

Mit einem graphischen Browser sehen Sie jetzt sehr wahrscheinlich nur einen leeren Abstand. In Tat und Wahrheit ist dort ein transparentes Bild, wie sie für Layout Zwecke häufig verwendet werden. Textbasierte Browser würden ohne einen alternativen Text etwa folgendes anzeigen:

Beispiel 3

  [spacer.gif]

  Mit einem graphischen Browser ...

Was ist also das Textäquivalent dieser "Graphik"? Nichts! Der alternative Text sollte leer sein, denn dieses Bild dient nur dem Layout und hat keine sonstige Funktion. Ein alternativer Text muss jedoch angegeben werden, damit die Graphik von textbasierten Browsern auch nicht angezeigt wird. Also:

Beispiel 3

  Mit einem graphischen Browser...

In diesem Beispiel wäre das im Prinzip nicht weiter tragisch. Häufig werden diese Bilder aber gehäuft eingesetzt. Das kann dann so aussehen:

Das Bild zeigt die Sitemap des Eidgenössischen Finanzdepartements.(Januar 2001)

Techniken

Alt-Attribut bei Bildern und Image Maps

Grafiken werden mit dem <img>-Tag in HTML-Seiten eingefügt. Es muss für HTML 4.0 und XHTML 1.0 zumindest die Attribute "alt" und "src" beinhalten. Das alt-Attribut ist nicht fakultativ! Mittels "src" verweist man auf die Quelle. Das "alt"-Attribut beinhaltet ein kurzes Textäquivalent.

<img src="bild.jpg" alt="Das ist ein Bild">

Oder in XHTML:

<img src="bild.jpg" alt="Das ist ein Bild" />

Bei einem transparenten Bild, das für Layoutzwecke verwendet wird, sieht das dann so aus:

<img src="spacer.gif" alt="">

Bei Image Maps werden die aktive Regionen mittels dem <area>-Tag definiert. Wie bei Bildern muss auch dort ein alt-Attribut verwendet werden.

longdesc-Attribute für längere Beschreibungen

Reicht ein einfacher Text nicht aus, um den Inhalt einer Grafik zu beschreiben, kann das longdesc-Attribut verwendet werden. Das longdesc-Attribut gibt dabei einen Verweis auf eine längere Erklärung. Das dürfte sicher bei Diagrammen und bei Karrikaturen sinnvoll sein.

Die Syntax ist dieselbe wie beim href-Attribut im <a>-Tag.

Wenn die erklärende Textpassage im selben Dokument zu finden ist:

<img src="bild.jpg" alt="Das ist ein Bild" longdesc="#textmarke1">

oder sonstwo im Internet

<img src="bild.jpg" alt="Das ist ein Bild" longdesc="http://www.irgendwo.ch/bildbeschrieb.html">

Leider interpretieren erst sehr wenige Browser das longdesc-Attribut. Daher muss auf Zwischenlösungen ausgewichen werden. Es gibt dabei verschiedene Möglichkeiten. Man kann das Bild selber als einen Link definieren, das auf die längere Beschreibung verweist oder einfach einen Textlink unterhalb des Bildes plazieren. Allenfalls kann auch direkt nach der Graphik ein transparentes Bild mit einem alternativen Text "Beschreibung" oder ähnlich stehen, das als Link zu einer ausführlicheren Erklärung dient.

Die Web Accessibility Initiative bietet ebenfalls ausführliche Informationen an, wie Webseiten zugänglich gemacht werden könenn.

Frames

Probleme

Frames bieten die Möglichkeit, verschiedene Webseiten als eine einzige darzustellen. Das kann zu Problemen führen, wenn nicht auf die Zugänglichkeit der Seite geachtet wird:

• Spider von Suchmaschinen können unter Umständen das Frameset nicht verarbeiten und die Seiten werden somit nicht indexiert.
• bei kleinen Bildschirmauflösungen kann die Darstellung unübersichtlich werden.
• der Browser kann keine Frames verarbeiten, oder die Framedarstellung ist ausgeschaltet worden.
• Framedarstellungen können Benutzer von Screenreaderprogrammen verwirren, da sie nicht wissen können, hinter welchem Framenamen sich eigentlich der Inhalt verbirgt. Eine effiziente Navigation wird somit erschwert.
• Das Setzen von Buchzeichen wird erschwert, da jeweils nur die Adresse des Framesets gespeichert wird. Die aktuelle Anzeige kann sich vollkommen von der standardmässig geladenen unterscheiden.
• Die "Vor"- und "Zurück"-Tasten des Browser funktionieren nicht mehr zuverlässig.
• Besucher, die über Suchmaschinen auf eine Seite gelangen, bleiben stecken, da das Frameset, das oftmals die Navigation beinhaltet, überhaupt nicht geladen wurde.
• Bei den Ergebnissen, die eine Suchmaschine liefert, werden oftmals die ersten Zeilen angezeigt. Bei Framesets sind das die Zeilen, die im <noframe>-Tag enthalten sind.

Beispiele

Obiges Beispiel zeigt die Startseite des Eidgenössischen Justiz- und Polizeidepartements (Januar 2001). Die Framenamen "Links", "ROben" und "RUnten" bezeichnen anscheinend die Position der Frames. Über den Inhalt sind keine Rückschlüsse möglich.

Im Gegensatz dazu eine leicht abgeänderte Version.

Auch gilt es zu bedenken, dass Suchmaschinen häufig die ersten Textzeilen einer HTML-Datei angeben, damit man leichter findet, wonach man sucht. Bei nicht sinnvoller Verwendung des <noframe>-Tag kann das dann so aussehen:

Das Beispiel zeigt ein Ergebnis, das die Suchmaschine Search.ch geliefert hat.

Techniken

Vor allem bei dynamischen Webseiten sollte man sich die Frage stellen, ob Frames überhaupt nötig sind. Dort lassen sich die Navigationsmechanismen oder Titelleisten jeweils automatisch einfügen.

Geben Sie Ihren Frames aussagekräftige Namen

Screenreader und textbasierte Browser benützen oftmals den Namen eines Frames, um eine Navigation zu ermöglichen. Geben Sie daher diesen Frames aussagekräftige Namen. Benutzten Sie Namen, die der Funktion des Frameinhaltes entspricht: "Navigationsleiste", "Titelleiste", "Textbereich".

<frameset cols="40%,60%">
<frame src="navbar.html" name="Navigationsleiste" title="Navigationsleiste">
<frame src="start.html" name="Textbereich" title="Textbereich">
</frameset>

Ab HTML 4.0 steht zusätzlich das "title"-Attribut zur Verfügung, mit dem Namen vergeben werden können. Leider wird dieses von vielen Browsern noch nicht verarbeitet.

Verwenden Sie das <noframe>-Tag sinnvoll

Um Browsern ohne Frameunterstützung und Spidern von Suchmaschinen den Zugang zu erleichtern, sollten Sie das <noframe>-Tag verwenden. Der Inhalt wird nur angezeigt, wenn das Frameset nicht geladen wird. Geben Sie dort zum Beispiel eine Übersicht, wie das Webangebot aufgebaut ist und wie man direkt zu den wirklichen Inhalten gelangt. Bieten Sie Links zu den einzelnen Seiten oder zumindest zum Navigationsmechanismus.

<noframe>
<h1>Demonstration des noframe-Tags</h1>

<p>Hier sollte eine Beschreibung der Seite, sowie Links zum
<a href="start.html">Textbereich</a> und vor 
allem zur <a href="navbar.html">Navigationsleiste</a>
stehen.</p>

</noframe>

Stellen Sie sicher, dass die Seiten, die in den Frames angezeigt werden, gut navigierbar bleiben, auch wenn kein Frameset geladen worden ist. Auf alle Fälle sollte ein Link auf die Startseite niemals fehlen!

Aktive Inhalte - JavaScript und Plugins

Problem

Aktive Inhalte wie JavaScript, JScript, Java, Flash,... sind für die Zugänglichkeit immer besonders heikel, wenn sie für die Navigation verwendet werden, ohne dass alternativ auch Textlinks zur Verfügung stehen.

• Bei vielen Browsern ist JavaScript ausgeschaltet.
• Viele Surfer sind nicht bereit Plugins herunterzuladen
• Die JavaScript-Implementierung variert von Browser zu Browser und von Browsergeneration zu Browsergeneration. Was auf dem einen funkioniert, braucht auf dem anderen nicht zu funktionieren.
• Vor allem Flash und Java sind für Blinde praktisch unüberwindliche Hürden
• Spider können JavaScript-Links im allgemeinen nicht folgen. Diese Seiten werden unter Umständen überhaupt nicht indexiert.
• Viele Browser unterstützen kein JavaScript
• dauerende Aufforderungen ein Plugin herunterzuladen, verärgern die Besucher

Aktive Inhalte sollten massvoll eingesetzt werden. Die Seiten müssen auch ohne diese aktiven Inhalte problemlos zu benützen sein.

Beispiele

Die offizielle Webseite des Kantons Thurgau bietet bei ausgeschaltetem JavaScript folgendes Bild:

Techniken

Ganz allgemein sollten die Seiten auch ohne Plugins oder JavaScript zu benutzen sein. Benutzen Sie zur Navigation ausschliesslich HTML-Links. Dabei kann natürlich ein Bild (mit alternativem Text, versteht sich) als Link verwendet werden. Dieses kann mittels JavaScript durch ein anderes ersetzt werden, wenn der Mauszeiger über der Grafik schwebt. Dieser sehr beliebte Effekt muss also nicht, die Navigierbarkeit der Seite beeinträchtigen.

Alternativ kann man auch das <noscript>-Tag verwenden, um Alternativen zur Verfügung zu stellen. Für Details sei auf Selfhtml verwiesen.

Hilfsmittel und weiterführende Informationen

Die wichtigste Anlaufstelle für Zuganglichkeitsfragen sind ganz klar die Webseiten der Web Accessibility Initiative. Diese bieten Richtlinien, wie zugängliche Webseiten zu gestalten sind. Ausserdem gibt es eine Fülle von weiteren Techniken, wie diese Richtlinien erfüllt werden können.

Die wichtisten Punkte der Richtlinien sind in einer Checkliste zusammengefasst.

Es gibt Links zu so ziemlich allem, was für Zugänglichkeitsfragen von Interesse sein könnte wie Übersichten über alternative Browser, Links zu Hilfsmitteln, Argumente, wieso Webseiten zugänglich gestaltet werden sollen...

Opera

Der Operabrowser ist für Webmaster besonders geeignet, da er stark konfigurierbar ist. So können unabhängig voneinander Bildanzeige, Frames, Tabellen, Style Sheets,... abgeschaltet werden. So können einfach verschiedenste Browser simuliert werden.

Ausserdem erlaubt er, Webseiten mittels des W3C-HTML-Validator auf korrektes HTML zu überprüfen.

Er kann gratis unter http://www.opera.com heruntergeladen werden.

Bobby

Ein automatisches Tool, das Webseiten weitgehend automatisch auf Zugänglichkeitshürden prüft, ist Bobby. Neben einer Onlineversion gibt es auch ein Java-Programm, das gratis heruntergeladen werden kann. Auf alle Fälle sehr empfehlenswert. Es ist leider nur auf Englisch verfügbar.

Das Java-Programm bietet unter anderem die Möglichkeit, ganze Sites auf ihre Zugänglichkeit zu testen. Anschliessend stehen eine Zusammenfassung über alle gefundenen Fehler und detailierte Berichte über die einzelnen Seiten zur Verfügung.

HTML-Validator

Um Webseiten auf korrekte HTML-Syntax zu prüfen, bietet das W3C ein Hilfsmittel an, den HTML-Validator. Sehr hilfreich um Tipfehler und vergessene alt-Attribute zu finden. Wer hat schon die gesamte HTML-Spezifikation im Kopf.

The Wave

The Wave ist ein Onlinetool, das es erlaubt, Webseiten darauf zu überprüfen, ob das HTML-Markup richtig verwendet wurde. Ausserdem zeigt es neben der Grafik direkt das Textäquivalent an, so dass diese einfach überprüft werden können beziehungsweise weist auf fehlende alt-Attribute hin.

Lynx

Speziell erwähnenswert ist auch der textbasierte Browser Lynx. Da er weder Tabellen noch Frames unterstützt, sieht man einfach, in welcher Reihenfolge ein Screenreader eine Seite vorliest.

Lynx ist freie Software und kann somit ohne Einschränkung genutzt werden.