Einstieg in Barrierefreies Webdesign

Formulare sind ein sehr wichtiger Bestandteil von Webseiten. Durch sie kann der Anwender Kontakt mit dem Verfasser aufnehmen, bei dynamischen Webseiten, wie zum Beispiel einem Gästebuch, Inhalte einfügen und hochladen und wichtige Funktionen wie die Suche basieren auf Formularen, womit Formularelemente die Basis für Interaktivität darstellen. Damit die Interaktivität zugänglich ist, müssen auch diese Elemente barrierefrei gestaltet sein.

Beschriftung der Kontrollen

Ein wichtiger Punkt ist die Beschreibung der Kontrollelemente wie Textfelder oder Auswahlboxen. Ohne diese ist es nicht möglich zu wissen, was der Benutzer eigentlich genau eingeben soll. Für solche Fälle hat sich das W3C das label - Element ausgedacht, mit dem man Kontrollelemente beschriften kann. Was man bei der Verwendung beachten sollte ist, dass man dieses Element explizit dem jeweiligen Kontrollelement zuweist, dass heisst das Attribut for enthält die id des Formular - Elements. Hier ein anschauliches Beispiel für eine explizite Zuweisung:

<p>
<label for="vorname">Vorname: </label>
<input type="text" id="vorname">
</p>

Diese explizite Zuordnung ist durch die BITV verpflichtend, aber weiterhin ist auch eine implizite Zuordnung je nach Fall notwendig. Implizit heisst, dass durch die Positionierung der Elemente, die Zuordnung für alle Anwender eindeutig erkennbar wird. Kurz gesagt, man muss auch beachten, wo die Elemente stehen. Man beachtet grundsätzlich zwei Fälle

In einer Zeile nur ein Formular - Element

Wenn in sich einem Absatz nur ein Formular - Element befindet dann darf das entsprechende Labelelement vor oder über dem Formular - Element platziert werden. Das entspräche dem vorherigem Code-Beispiel. Um die Beschreibung über dem Formularfeld zu setzen gibt es zwei Möglichkeiten.

Eine wäre label und Feld in einen Absatz zu setzen und mit einem Zeilenumbruch zu trennen:

<p>
<label for="email>Ihre eMail-Adresse:</label> <br />
<input type="text" id="email" />
</p>

Die Andere wäre das Formularelement in das label - Element zu setzen und dann den beschreibenden Text mit einem Zeilenumbruch von dem Feld zu trennen:

<label for="email">
Ihre eMail-Adresse:<br/>
<input type="text" id="email"/>
</label>

Welche von den beiden Varianten eingesetzt wird bleibt dem Webdesigner und seinem Layout überlassen.

In einer Zeile mehrere Formular - Elemente

Hat man nun aber in einem Absatz mehrere Formularelemente, so muss das label - Element vor dem entsprechenden Kontrollelement stehen. da ansonsten keine implizite Zuweisung vorhanden ist. Hier ein anschauliches Beispiel:

<p>
<label for="vname" >Vorname:</label><input type="text" id="vname" /></label>
<label for="nname" >Nachname:</label><input type="text" id="nname" /></label>
</p>

Tabulatorreihenfolge

Aus der BITV:

Es ist eine mit der Tabulatortaste navigierbare, nachvollziehbare und schlüssige Reihenfolge von Hyperlinks-, Formularkontrollelementen und Objekten festzulegen.BITV - Priorität 1, Bedingung 9.4

Nicht alle Anwender können eine Maus verwenden oder ihr Programm läßt keine Maussteuerung zu, weswegen sie nicht mit der Maus direkt das gewünschte Kontrollelement auswählen können. Diese Anwender benutzen dann die Tabulatortaste, um zwischen den einzelnen Kontrollelemente zu wechseln. Die Reihenfolge der Kontrollelemente, in der sie "durch getabbt" werden, richtet sich nach der Reihenfolge im Quelltext. Die Tabulatortaste ist aber auch ein beliebtes Mittel unter geübten Anwendern um zum nächsten Eingabeelement zu springen. Ein Tastendruck ist schneller geschehen als die Maus in die Hand nehmen, Cursor an gewünschte verschieben und dann klicken.

Nun kann ein Formular so aufbaut sein, dass die Tabulatorreihenfolge keinen Sinn ergibt. Siehe dieses Beispiel ohne tabindex

Wenn man in diesem Beispiel die Tabulatortaste benutzt, geht der Fokus zuerst auf das Eingabefeld für den Benutzernamen, danach auf den Login-Button und erst zuletzt auf das Eingabefeld für das Passwort. Dieses Beispiel kann vor allem den geübten Anwender stören. Wenn sie nun ihren Benutzernamen eingegeben haben und nun die Tabulatortaste drücken gelangen sie als nächstes auf den Login-Button. Nun aber denken sie unterbewußt, dass sie sich im Passwortfeld befinden, geben ihr Passwort ein und drücken Enter. Es wird dann nur der Benutzername gesendet ohne Passwort und es erscheint prompt ein Loginfehler. Solche Dinge nerven geübte Anwender – und nicht nur sie – unnötig.

Man könnte nun, um solche Frustationen zu verhindern, den Quelltext so umstrukturieren, dass eine sinnvolle Tabulatorreihenfolge entsteht. Nun aber kann es aus verschiedenen Gründen nicht möglich sein den Quelltext so zu gliedern, aber für solche Fälle haben Kontrollelemente das tabindex - Attribut. Dieses Attribut teilt dem Element mit an welcher Stelle in der Tabulatorreihenfolge seines Formular es steht. Hier das gleiche Beispiel mit tabindex.

Den Tabulator auf diesem Beispiel angewandt, zeigt die sinnvolle Tabulatorreihenfolge: Benutzername, Passwort, Loginbutton. Hier nochmal der betreffende Quelltext als Auszug:

<p>
<label for="user">Name:</label>
<br />
<input type="text" id="user" tabindex="1" /> <input type="button" value="Login" tabindex="3" />
</p>
<p>
<label for="pw">Password:</label><br />
<input type="password" id="pw" tabindex="2" />
</p>

Exkurs zu CSS: Hervorheben des fokussierten Eingabefeldes

Es erhöht die Nutzbarkeit eines Formulars enorm, wenn man das derzeit gewählte Eingabeelement farblich hervorhebt. Dazu benutzt man die Pseudoklasse focus des Elements input und/oder textarea und gibt ihm die Eigenschaften zum Hervorheben.

input:focus, textarea:focus {
   background-color:#CCFF66;
   color:#003333;
   border:1px solid red;
}

Beispielformular mit Hervorhebungen

Tastaturkurzbefehle

Den Tabulator alleine zu benutzen um auf Elemente in der Seite zuzugreifen, kann sehr mühselig werden. Vorallem für die Anwender, die gar keine andere Wahl haben, wie Benutzer von Screenreadern und Textbrowsern. Deswegen schreibt die BITV vor:

Es sind Tastaturkurzbefehle für Hyperlinks-, die für das Verständnis des Angebots von entscheidender Bedeutung sind (einschließlich solcher in clientseitigen Imagemaps), Formularkontrollelemente und Gruppen von Formularkontrollelementen bereitzustellen. BITV - Priorität 1, Bedingung 9.5

Um schnelleren Zugriff auf Kontrollelemente zu realisieren, gibt es das Attribut accesskey. Die Kombination Alt-Taste und der Buchstabe, der sich im accesskey - Attribut sich befindet, ist der Kurzbefehl um das Element auszuwählen. Hier wieder das Login - Beispiel mit accesskeys. Alt + u wählt das Benutzerfeld aus und Alt + p das Passwortfeld.

Was man aber beim Verwenden von Accesskeys beachten sollte, sind die Kurzbefehle die bereits von den Browsern für Funktionen wie Drucken oder Speichern verwendet werden. Das Problem dabei ist, dass verschiedene Browser verschiedene Tastenkombinationen benutzen und es schwierig ist rauszufinden welche für alle frei sind.

Geeignet für Kurzbefehle sind daher eher die Zahlen von 0 bis 9, da diese gar nicht von den Browsern in Kombination mit der Alt - Taste belegt sind. Ein exzellentes Beispiel für accesskeys mit Zahlen ist die Website "Barrierefreies-Webdesign.de", wo die Navigation auch mit Kurzbefehlen funktioniert. Wenn aber nun Zahlen als Tastaturkurzbefehle verwenden möchte, sollte man auch die Anwender mit entsprechenden Text darauf aufmerksam machen, wie auch die Website zeigt.

Vorbelegungen in Textfeldern

Eine weitere Möglichkeit Textfelder zu beschriften ist, einen entsprechenden Text als Inhalt vorzugeben. Dadurch kann man auch genauer erläutern, was der Benutzer nun an die Stelle eingeben soll. Auch Screenreader kommen besser mit Vorbelegungen zurecht, da einige leere Textfelder gerne überspringen und unterstützt auch kognitiv schwächere Menschen. Drum ist eine Vorbelegung eine Bedingung in der BITV, wenn auch nur mit der Priorität 2.

Leere Kontrollelemente in Eingabefeldern und Textbereichen sind mit Platzhalterzeichen zu versehen.BITV - Priorität 2, Bedingung 10.4

Die Vorbelegung ist recht simpel. Man gibt den gewünschten Text in das value - Attribut ein.

<input type="text" name="name" value="Geben Sie Ihren Namen ein." />

Nun gibt es aber bei der Vorbelegung das Problem, wenn das Textfeld fokussiert wird bei einigen Browsern nicht der vorbelegete Text markiert und der Cursor ans Ende gesetzt. Dadurch können ärgerliche Tippfehler geschehen, wie das Bild zeigt. Es sollte gut überlegt sein, ob man wirklich vorbelegte Textfelder benötigt, und wenn dann nicht überall in jedes eins reinsetzen.

Gruppierung des Formulars

Eine wichtiges Prinzip für Barrierefreiheit ist die sinnvolle Gliederung von Inhalten, vor allem wenn diese sehr groß sind. Sie sind dadurch übersichtlicher und Screenreader können besser durch die Inhalte navigieren. Um sehr lange Formulare zu gruppieren gibt es das fieldset - Element, mit diesem man das Formular in sinnvolle Absätze unterteilt. Die Überschriften für die einzelnen Gruppen werden in einem legend - Element angelegt. Hier ein Beispiel mit fieldset - Elementen.

Benutzerfreundliche Formulare

Bei Formularen, die über mehrere Seiten gehen, sollten auch einige Grundsätze beachtet werden. Ein gutes Beispiel für Formulare, die über mehrere Seiten benötigen sind Onlinebestellungen. Leider sind die meisten Formulare in den Onlineshops so umständlich aufgebaut, dass nach einer Studie des FAZ - Instituts insgesamt 40 Prozent der Kunden in dieser Zeit allein wegen technischer Probleme ihre Einkaufstour abgebrochen hätten und insgesamt 30 Prozent der befragten Nutzer sich vom Kauf abhalten ließ, weil der Bestellvorgang zu viele Seiten umfasste (Quelle: heise.de - Newsticker vom 27. Oktober 2004). Zusammenfassend gesagt, das Einkaufen im Internet enthielt zu viele Barrieren auch für den Kunden, die weder körperlich noch geistig behindert sind. Daher sind mehrseitige Formulare falls möglich zu vermeiden.

Meistens läßt sich ein Einkauf im Internet sich nicht über eine Seite abwickeln. Der Kunde muss authenfiziert werden, seine Daten wie Bankverbindungen oder Adresse müssen validiert werden, bevor er seine Bestellung abschicken kann. Solch ein Aufwand läßt sich nicht auf einem HTML-Formular unterbringen.

Es ist heute zwar mit neuen Entwicklungen mit AJAX denkbar, dass all diese Schritte in einem Formular machbar sind, aber diese Technik setzt JavaScript voraus, was aber gegen die Normen der Barrierefreiheit spricht.

Bei mehrseitigen Formularen sollte man folgende Dinge beachten:

Zuerst über alle Schritte der Abwicklung im Detail aufklären

Bevor man nun den Benutzer die Formulare ausfüllen lässt, sollte ihm mitgeteilt werden, was genau bei jedem Schritt geschieht und welche Daten von ihm benötigt werden. Dadurch weiss der Kunde was man von ihm wissen will und kann sich noch fehlende Daten besorgen. Außerdem gibt es dem Anwender einen guten Überblick wie zeitintensiv die Abwicklung sein wird. Grundsätzlich sollte man auf der allerersten Seite alle notwendingen Information zeigen, zum Beispiel ein Link zu den AGB, den er gleich bestätigen kann, und nicht wie bei einigen Anbietern üblich auf der letzen Seite.

Ein sehr schönes Beispiel für ausführliche Erklärung einer Abwicklung über HTTP ist die Onlinebewerbung bei Robert Bosch GmbH. Bevor man an die Formulare gelassen wird, wird man informiert welche Browser man sich online bewerben kann und welche Informationen, wie Zeugnisse oder Lebenslauf, in welchen Format bereit haben muss.

Dadurch erfährt der Bewerber von Anfang an was man von ihm wissen will, und muss nicht mittendrin im Prozedere seine Bewerbung abbrechen, die gewünschten Daten besorgen und dann wieder seine Bewerbung von vorne beginnen. Beachten sollte man auch aber, dass der einleitende Text nicht ellenlang sondern kurz und bündig ist.

Feedback über den Verlauf

Eine wichtige Regel für eine gute Benutzeroberfläche ist, dass man den Anwender stets mitteilt, wo er sich gerade befindet. Konkret bei mehrseitigen Formularen heisst das, das man ihn zeigt bei welchem Schritt er ist und wieviele er noch vor sich hat. Die meisten Webshops haben ein solches Feedback integriert, wie man an den Beispiel sehen kann.