Einstieg in Barrierefreies Webdesign

Der Kopfteil

Im dem Kopf eines HTML - Quelltextes legt man die Grundeigenschaften des Textes fest. Man teilt der jeweiligen Software mit, um welche HTML - Version es sich dreht und mit welchen anderen Dateien es welche Beziehungen hat, wie zum Beispiel CSS-Dateien und enthält auch Metadaten, wie Autor oder ähnliches. Ein korrekter Header, den alle Browser verarbeiten und verstehen können bildet die Basis für Barrierefreiheit.

Zuerst: Die DOCTYPE - Definition

Das Format HTML hat bereits eine lange Entwicklung und bereits mehere Versionen hinter sich. Damit nun der Browser oder die Anwendung weiss, um welche HTML - Version oder Standard es sich in einem HTML - Dokument dreht, muss an erster Stelle im Quelltext die DOCTYPE - Definiton stehen. Bei HTML unterscheidet man grundsätzlich drei verschiedene Varianten, die sich durch alle aktuelleren Versionen durchziehen:

Strict: Unter Strict kann man nur mit HTML - Elementen eine Struktur aufbauen. Layoutelemente wie font sind dort nicht erlaubt und sollten durch einen entsprechenden Stil unter CSS ersetzt werden. Dies entspricht der Philosophie der Trennung von Layout und Struktur.
Transitional: Der Transitional - Standard hat sämtliche Elemente von Strict und einige Layout - Elemente, die vom W3C als veraltet angesehen werden, wie zum Beispiel das b - Element. Damit wird ein Übergang zur rigorosen Trennung umgesetzt.
Frameset: Diese Variante wird eingesetzt um Dokumente mit Frames zu realisieren.

Weiterhin gibt die DOCTYPE an ob es sich nun um einen HTML oder einen XHTML - Quelltext handelt und eine URL gibt an, wo die betreffende DTD zu finden ist. Beispielsweise könnte ein DOCTYPE so aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fehlt nun aber diese DOCTYPE - Definition, so schaltet der Browser in den Quirks - Modus.

Quirks ... was?

Der Quirks - Modus könnte man auch als "Mach was du willst! "- Modus . In diesem Modus beachtet der Browser nicht die W3C - Standards, sondern rendert den HTML - Quelltext nach eigenem Ermessen. Die meisten grafischen Browser richten sich aber dennoch im Quirks-Modus recht nahe an den allgemeinen Standard, z. B. ein korrektes Boxmodell, außer dem Internet Explorer. Dieser weicht sehr stark vom Standard ab, wenn der DOCTYPE fehlt oder fehlerhaft ist, und sorgt somit für ein nicht standardkonformes Boxmodell. Für einen fehlerhaften DOCTYPE reicht es dem Internet Explorer schon aus, wenn die URL nicht oder ein Kommentar vor der DOCTYPE - Definition steht oder auch in diesem Beispiel schaltet der Internet Explorer in den Quirks - Modus:

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Obwohl diese Definition eindeutig korrekt beschrieben ist, schaltet der IE dennoch in den Quriks - Modus, weil er mit der XML - Versions- Beschreibung am Anfang nicht umgehen kann. Dies giltet zumindest bis zur 6. Version.

Der IE setzt nun, wie bereits gesagt, sein eigens Boxmodell ein, was zu großen Problemen beim Webdesign führen kann. Lösbar ist es, wenn man entweder den Tag mit der XML - Definition wegläßt, oder diverse Hacks anwendet. Mehr dazu unter im Abschnitt "Problemlösungen - Internet Explorer".

Wie man sieht ist der Internet Explorer sehr empfindlich , was die DOCTYPE - Definition betrifft. Der Browser sieht stets die erste Zeile als eine Definition und merkt nicht, dass diese auch andere Bedeutungen haben können. Daher ist es ratsam folgende DOCTYPES zu verwenden um dieses Problem zu umgehen, denn leider ist dieser Browser, der am weit verbreitesten.

Korrekte DOCTYPE - Definitionen

Mit diesen Definitionen fährt man immer auf der sicheren Seite, auch mit dem Internet Explorer.

HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML oder HTML 4.01 ?

Für ein barrierefreies Webdesign ist es egal ob eine Webseite nun in HTML oder XHTML geschrieben ist. Wichtig ist, dass der Quelltext valide und semantisch sinnvoll strukturiert ist. Die Unterschiede liegen in der Grundlage ihrer Definitionen. HTML liegt SGML während XHTML der XML zugrunde liegt. Dadurch unterscheiden sich die beiden Sprachen sich in einigen Details, ( so muss in XHTML jedes Element geschlossen werden) aber die Elemente sind bei beiden identisch. Eine Seite von SelfHTML beschreibt die Unterschiede zwischen XHTML und HTML (Neue Seite) sehr ausführlich.

Der Titel

Mit dem title - Element legen man den Titel einer HTML-Datei fest. Ein beliebter Anfängerfehler ist es, HTML - Elemente wie b oder i in ein Titel-Element einzutragen, was nicht valide ist. Es darf nur Text im title - Element enthalten sein!

Was als Titel stehen soll, darüber streiten sich die Geister. Was auf jeden Fall nicht drin stehen sollte, wären irgendwelche Verzierungen wie zum Beispiel "...::: Der Titel :::... ".

Es sollte auf jeden Fall der Inhalt der aktuellen Seite in einem Satz oder wenigen Worten wiedergegeben werden, vor allem deswegen da sämtliche Lesezeichenfunktionen der Browser stets den Inhalt des title - Elements als Beschreibung für die Lesezeichen speichern. Demnach erleichtert ein sinnvoller Text das Wiederfinden und -erkennen der Lesezeichen enorm.

Sinnvolle Texte wären zum Beispiel:

Impressum - Eine private Internetseite
Kodos & Kangs Weblog - Wie man für vierzig Menschen kocht

Auch Spielereien mit JavaScript mit dem title - Element haben in einem barrierefreien Webdesign nichts zu suchen.

Meta - Daten

Meta - Elemente sind normalerweise für den Anwender nicht direkt im Browser sichtbar. Sie beinhalten meist Informationen über die Seite, wie Autor, Schlüsselwörter oder kurze Inhaltsangaben. Diese Meta-Daten werden in Anwendungen wie Suchmaschinen benutzt und sollen das Wiederfinden der Informationen erleichtern. Belang für die Barrierefreiheit sind die Meta - Elemente für relationale Links und folgene.

Automatische Aktualisierungen

Automatische Aktualisierungen, wie dieses Beispiel

<meta http-equiv="refresh" content="60"> 

sollten eher unterlassen werden, da es dem Nutzer in diesem Fall nicht möglich ist die Aktualisierung auszuschalten .

Menschen mit Wahrnehmungs- oder kognitiven Schwierigkeiten - aber auch Menschen ohne solche Behinderungen - könnten durch ständige Aktualisierungen verwirrt werden, da man gar nicht abschätzen kann wie lange ein Benutzer oder eine Anwendung braucht um alle Informationen auf einer Seite zu erfassen. Einige Screenreader gehen nämlich bei einer Aktualisierung gerne wieder an den Anfang der Seite zurück, wodurch der Textfluss in der Mitte unterbrochen wird.

Auch Lösungen mit JavaScript mit der Anweisung location.reload() sollten vermieden werden.

Falls aber dennoch regelmäßige Aktualisierungen notwendig sein sollten, zum Beispiel bei einem News-Ticker, kann man den Benutzer darauf aufmerksam machen und ihn einen Link zur Verfügung stellen, der so aussehen könnte:

<a href="newsticker.html">Seite aktualisieren</a>

Weiterleitungen

Da dies der Aktualisierung (das entsprechende Meta - Element wird mit einem URL - Attribut erweitert) sehr ähnelt, sollten auch automatische Weiterleitungen eher unterlassen werden, um Verwirrungen zu vermeiden. Auch entsprechende Lösungen mit JavaScript sind nicht geeignet.

Falls dennoch Weiterleitungen notwendig sein sollten, könnte man den Webserver so konfigurieren, dass er bei der Anforderung eine Antwort mit dem HTTP-Status Code 301 (Moved Permantly) zurück gibt. Dadurch wird die Weiterleitung nur zwischen Server und Browser ausgehandelt und der Anwender bekommt davon nichts mit. Sollte es aber aus diversen Gründen dies nicht möglich sein, so kann man auch die Weiterleitung mit einem Hyperlink und entsprechenden sinnvollen Text lösen.

Verknüpfungen

Mit dem Link - Element im Kopfteil, kann man Verbindungen zu anderen Dateien anlegen, wie z.B. CSS - Dateien oder Dateien für Skripte. Auch kann man relationale Links zu einzelenen Seiten der Website anlegen und mitteilen in welcher Beziehung diese zu denen steht. Browser wie lynx oder Opera unterstützen diese relationalen Links und ermöglichen so eine leichtere Bedienung. Eine genaue Erklärung steht unter dem Abschnitt "Navigation - ".

Hauptnavigation