Auf dieser Seite finden Sie Ausführungen zu den typischen Barrieren, die bei der Gestaltung von Formularen entstehen. Insbesondere geht es um die Tastaturbedienbarkeit.
Als "Spezialfall" der ![[intern]](../../lib/img/intern.gif){kind=small}
Tastatursteuerung von WWW-Seiten gilt die Bedienung von Formularen (vgl. Bedingung 9.4 der BITV). Bei beschränkten motorischen Bewegungsmöglichkeiten sind Radio-Buttons und Check-Boxen, aber auch andere Formularfelder eine besonders knifflige Angelegenheit, wenn sie nicht oder nur sehr umständlich mit der Tastatur bedient werden können. Bei der Erstellung von Formularen sollten Sie deswegen sicherstellen, dass die Tabulatorenreihenfolge und ggf. Shortcuts die Benutzbarkeit per Tastatur gewährleisten.
Auch wenn JavaScript gemäß Anforderung 6 der BITV vermieden werden soll, d.h. die mit JavaScript erzeugten Aktionen auch ohne aktivierter JavaScript-Funktionalität zur Verfügung stehen müssen, zeigt die Praxis oft ein anderes Bild. Um die grundsätzliche Möglichkeit des Geräte-unabhängigen Zugriffs anbieten zu können, sind logische Event-Handler einzusetzen. Sie kennen sicherlich onClick - ein Geräte-abhängiger Event-Handler, der auf einen Mausklick reagiert. Der vergleichbare Event-Handler für die Tastatur ist onKeyPress. Logische Event-Handler wie onFocus und onBlur sind unabhängig von Maus und Tastatur und lösen Aktionen sowohl bei Maus- als auch bei Tastatursteuerung aus.
Wenn Sie beispielsweise ein Eingabefeld in einem Formular mit einem Texthinweis vorbelegen ("Geben Sie Ihren Namen hier ein ..."), der per Mausklick in das Feld wieder verschwinden soll, dann hat der Tastatur-orientierte Benutzer möglicherweise einen Nachteil. Wenn die Löschaktion mittels onClick ausgelöst wird, handelt es sich um eine Maus-abhängige Aktion. Der onFocus-Event-Handler erlaubt hingegen eine Aktion, die sowohl per Maus als auch per Tastatur ausgelöst wird:
<input size="28" name="nachname" value="Bitte geben Sie Ihren Namen hier ein" onfocus="this.value='';" />
Wenn Sie diesen Code in Ihre Seite einbauen und mit der Tabulatorentaste den Fokus auf das Eingabefeld bringen, dann sehen Sie, dass der Text durch das Hineintabben "gelöscht" wird.
Natürlich wird der Text auch per Mausklick entfernt, da es sich bei onFocus um einen Geräte-unabhängigen Event-Handler handelt.
Kritisch für das Absenden eines Formulars ist, wenn das Abschicken oder sonstige Aktionen mit onClick ausgelöst werden. Hierzu gibt es neben onKeypress oder onFocus auch den Event-Handler onSubmit, der auf jeden Fall vorzuziehen ist, weil er auf jede Form des Absendens, ob mit Maus oder Tastatur, reagiert. Wenn Sie Ihre Formulare gestalten, dann achten Sie darauf, dass sie genauso mit der Tastatur bedient werden können wie mit der Maus. Nur dann kann ein Formular barrierefrei sein.
Oft stellt sich die Frage, wie ein Formular durch einfaches Drücken der Enter-Taste Browser-übergreifend abgeschickt werden kann. Dies hängt im Wesentlichen von der strukturellen Gestaltung des Formulars sowie vom einzelnen Browser ab. Um das Absenden der Formulareingaben per Enter-Taste immer zu ermöglichen, dürfen innerhalb des FORM-Elements nur ein INPUT-Element des Typs text sowie keine TEXTAREA-Elemente vorkommen. Weitere Informationen hierzu finden Sie auf ![[extern, englisch]](../../lib/img/en.gif)
http://ppewww.ph.gla.ac.uk/ ~flavell/ www/ formquestion.html.
Auch für Screen-Reader-Benutzer sind Formulare schwierig zu bedienen, wenn sich die technische Organisation innerhalb des FORM-Elements eher an der visuellen Anordnung am Bildschirm als an logischen Strukturierungen anlehnt, die dann in der linearisierten Ausgabe benutzbar wären. Die Formularfelder sollten also in einer vernünftigen Reihenfolge und mit dem LABEL-Element aufgebaut werden. Generell ist - ob mit oder ohne LABEL-Element - darauf zu achten, dass der beschreibende Text für Eingabefelder stets vor dem Eingabefeld selbst eingebunden wird. Gerade im Tabellenlayout kann es passieren, dass in der linearisierten Ausgabe zunächst einige Beschreibungen und erst anschließend die dazugehörigen Eingabefelder dargestellt werden. Hierzu finden Sie weitere Informationen in Bezeichnungen für Formularfelder (ohne das LABEL-Element).
Entsprechend der BITV-Bedingung 9.4 können Sie immer das tabindex-Attribut einsetzen, so wie in Tabben statt Klicken beschrieben, um die Tastatursteuerung in der linearisierten Ausgabe ergonomischer zu gestalten. Dies ist vor allem dann sinnvoll, wenn vor dem Formular oder zwischen einzelnen Formularelementen viele Links vorkommen.
Ein weiterer Aspekt von barrierefreien HTML-Formularen ist die Eingabe von Sonderzeichen, die nur über eine Tastaturkombination möglich sind, etwa das @-Zeichen bei der Eingabe einer E-Mail-Adresse.
Für Spastiker - aber sicher nicht nur für sie - sollten soweit möglich alle Formularelemente vorbelegt sein, damit eine möglichst zügige Eingabe gewährleistet werden kann. Ein Mehrfachtastendruck, wie für das @-Zeichen erforderlich, sollte in jedem Fall voreingestellt sein oder gar vermieden werden. Das geht z.B. wie folgt:
<form>
<div>
<input type="text" id="username" name="username" size="15" />
@
<input type="text" id="domain" name="domain" size="28" />
</div>
</form>das dann aussieht wie:
Im verarbeitenden Script können die beiden Teile der E-Mail-Adresse mit dem @-Zeichen an der entsprechenden Stelle wieder zusammengeführt werden. Die Problematik kann sich auch auf Groß-/Kleinschreibung beziehen, aber es sind vor allem die Zeichen gemeint, die z.B. auf der PC-Tastatur nur in Kombination mit Strg-, Alt- und Alt Gr-Tasten erreichbar sind.
Alternativ dazu könnte das @-Zeichen im Eingabefeld bereits enthalten sein. Auch bei Klick bzw. Tab dürfte das @-Zeichen nicht gelöscht werden:
<form>
<div>
<input type="text" name="email" size="15" value="E-Mail-@dresse" onfocus="this.value='@';">
</div>
</form>Auf einer Webseite sieht das folgendermaßen aus (Wenn sie eine Maus verwenden und JavaScript aktiviert haben, dann klicken Sie in das Feld hinein):
Stand der Technik
Das Phänomen der Nichterkennung von Eingabefeldern tritt vor allem in älteren Screen-Readern auf. In der BITV wird eindeutig formuliert, dass der Stand der Technik zu beachten ist und Software, die älter als drei Jahre ist, nicht mehr zum Stand der Technik gehört, wenn weniger als 5% der in Frage kommenden Benutzergruppe die Software einsetzt.
Da manche ältere Screen-Reader leere Eingabefelder in Formularen nicht ansteuern können, sollten Sie nach Bedingung 10.4 der BITV die Vorgabe eines Textes in TEXTAREA- und INPUT-Elementen berücksichtigen. Dies erfolgte im letzten Beispiel mit dem value-Attribut für das INPUT-Element. In TEXTAREA-Elementen erfolgt die Zuweisung eines solchen "Platzhalters" mit einem Text zwischen den öffnenden und schließenden TEXTAREA-Angaben.
In vielen Formularen gibt es die Unterscheidung zwischen Pflicht-Feldern, d.h. Eingabefelder, die der Benutzer auf jeden Fall ausfüllen soll, und Eingabefeldern, die optional sind. Um den Unterschied zu kennzeichnen, sollten Sie Bedingung 2.2 bzw. 2.3 der BITV berücksichtigen: Sowohl für Blinde als auch für Sehbehinderte kann es problematisch werden, wenn ein solches Pflichtfeld nur mittels einer Textformatierung, z.B. durch Unterscheidung von blauen und roten Beschreibungstexten, vermittelt wird. Die Sprachausgabe eines blinden Benutzers wird diesen Unterschied nicht erkennen. Auch Sehbehinderten, die zur besseren Erkennung von Bildschirminhalten ihre Systemfarben umgestellt haben, wird diese Unterscheidung vorenthalten bleiben. Deswegen ist die Kennzeichnung mit anderen Mitteln wichtig, damit beim Absenden kein Fehler entsteht. Eine sehr verbreitete Kennzeichnung ist das Sternchen (*), aber Sie können natürlich auch andere Zeichen oder Grafiken einsetzen.
<form>
<table><tr>
<td align="right">*Ihr Name:</td><td><input type="text" name="benutzer" size="28" value="Ihr Name" onfocus="this.value='';" /></td>
</tr><tr>
<td align="right">Ihr Alter:</td><td><input type="text" name="alter" size="2" value="Ihr Alter (optional)" onfocus="this.value='';" /></td>
</tr></table>
</form>
Auf einer Webseite sieht das dann wie folgt aus:
Mit dem Sternchen (*) soll dem Benutzer mitgeteilt werden, dass das entsprechende Feld für den Namen ausgefüllt werden muss, um das Formular abzuschicken. In diesem Beispiel spielt das Alter jedoch keine Rolle und muss nicht ausgefüllt werden, wenn der Benutzer es nicht will.
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
LABEL-Element)
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
