Barrierefreie Formulare erstellen

[Dies ist eine Übersetzung des englischsprachigen Artikels „Creating Accessible Forms„. Copyright © by www.Webaim.org]

Grundlegende Formen der Barrierefreiheit

Einleitung

Formulare werden für viele Arten von Interaktionen im Internet verwendet. Wenn wir über die Barrierefreiheit von Formularen reden, beziehen wir uns in der Regel auf die Menschen, die Bildschirmlesegeräte oder Tastaturen verwenden. Menschen mit anderen Arten von Behinderungen sind üblicherweise weniger von fehlerhaften Formularen beeinträchtigt. Dennoch gilt, dass jeder von einer gut organisierten Website mit einer in hohem Maße nutzbaren Form profitiert. Insbesondere solche, mit einer kognitiven Behinderung.

Stellen Sie sicher, dass die Formulare logisch und einfach zu bedienen sind

Formulare sollten klar und simpel sein. Sie sollten in einer logischen Art und Weise organisiert werden. Vorschriften, Aufruf, erforderliche Formularfelder, Feldformatierungsanforderungen etc. sollten den Nutzern eindeutig kenntlich gemacht werden. Liefern Sie klare Anweisungen, welche Informationen gewünscht sind. Sofern Formularelemente benötigt werden, kennzeichnen Sie diese deutlich. Stellen Sie sicher, dass die Reihenfolge, in der auf die Formularelemente zugegriffen wird, logisch und einfach ist. Dies kann dann problematisch werden, wenn Tabellen dazu verwendet werden, das Layout der Formularelemente zu steuern. Um die linearisierte Reihenfolge der Elemente auf der Seite zu überprüfen, benutzen Sie das WAVE Accessibility Tool.

Stellen Sie sicher, dass die Formulare Tastatureingaben zulassen

Viele Nutzer können nur eine Tastatur benutzen, um zu navigieren und das Internet zu benutzen. Sie müssen sicherstellen, dass alle Formulare auf ihrer Website auch mit nur einer Tastatur ausgefüllt werden können. Es gibt ein paar Dinge, die die Navigation durch Formulare mit nur einer Tastatur unmöglich machen. Das häufigste Beispiel ist JavaScript. Seien Sie vorsichtig, wenn Sie JavaScript dazu verwenden, Formulardaten zu manipulieren, den Fokus zu setzen, Formularelemente zu verändern, oder Formulare abzusenden. All das kann es schwierig oder sogar unmöglich machen, ein Formular auszufüllen, oder die alleinige Tastatureingabe umzusetzen. Für die Barrierefreiheit testen Sie die Formulare ihrer Website immer mit einer Tastatur.

Verbinden Sie Beschriftungsfelder mit Eingabefeldern

Beschriftungsfelder sollten immer die Funktion der jeweiligen Eingabefelder beschreiben. Setzen Sie die Beschriftung direkt neben das zugehörige Eingabefeld (d.h. Textfeld, Kontrollkästchen, Optionsfeld, Menü, etc.). Die Beschriftungsfelder werden in der Regel über oder links von den Eingabefeldern angeordnet. Die Beschriftungsfelder für Ankreuzfelder und Auswahlknöpfe stehen gewöhnlich rechts von dem Eingabefeld. Sehende Nutzer sollten in der Lage sein, einem Beschriftungsfeld ein entsprechendes Eingabefeld zuzuordnen. Allerdings können Benutzer mit Sehbehinderungen diese visuelle Assoziation nicht machen. Beschriftungsfelder können jedoch mit Hilfe von HTML-Markups programmgesteuert Eingabefeldern zugeordnet werden.

Das <label> Element wird verwendet, um eine Beschriftung mit einem Eingabefeld zu verknüpfen. Dadurch kann ein Bildschirmlesegerät den assoziierenden Beschriftungstext lesen, wenn der Nutzer zum Eingabefeld navigiert.

Wichtig

Nutzer von Bildschirmlesegeräten navigieren hauptsächlich mit der Tab-Taste durch ein Formular, um zwischen den Eingabefeldern zu springen. Assoziierte Beschriftungsfelder werden für jedes Eingabefeld gelesen, wenn der Nutzer zu diesen navigiert. Jeder Text zwischen den Eingabefeldern, der kein Label ist, wird übersprungen. Achten Sie darauf, wichtige Hinweise oder Anweisungen in zugehörigen Labels oder am Anfang des Formulars einzufügen.

Gruppierungen von Eingabefeldern, so wie typische Gruppen von Checkboxen und Radio-Buttons, erfordern manchmal eine höhere Beschreibung (wie „Versandart“ für die Gruppe Versandoptionen aus Radio-Buttons). Dieser beschreibende Text kann zu der Gruppe der Eingabefelder mit <fieldset> und <legend> zugeordnet werden. Das <fieldset> identifiziert die gesamte Gruppierung und <legend> identifiziert den beschreibenden Text der Gruppierung. Mit <fieldset> und <legend> sorgen Sie dafür, dass der Beschreibungstext von Nutzern mit Bildschirmlesegeräten gelesen wird, wenn die Gruppierung angesteuert wird.