Barrierefreie Formulare erstellen

Barrierefreie Eingabefelder

Text-Eingabefelder

Hier finden Sie das HTML Markup:

<label for="name">Name:</label>
<input id="name" type="text" name="textfield">

Passende for und id Werte assoziieren das Label mit dem entsprechenden Eingabefeld. Da jede id jeder Seite eindeutig sein muss, kann nur ein Label zu jedem einzelnen Formularelement zugeordnet werden. Das bedeutet, dass Sie nicht ein Label für mehrere Formularelemente benutzen können. Darüber hinaus unterstützen Bildschirmlesegeräte nicht die Anzeige von mehreren Labels die mit einem Formularelement assoziiert sind.

Anmerkung

Ein weiterer Vorteil der Verwendung von Labels ist, dass der Benutzer auf das Label klicken kann und damit den Fokus auf das zugehörige Formularelement setzt. Dies ist nützlich für Menschen mit motorischen Behinderungen, insbesondere bei der Auswahl von kleinen Checkboxen und Radio-Buttons. Sie können dies versuchen, indem Sie auf das Wort „Name:“ klicken, welches oben zu sehen ist. Sie werden sehen, dass der Fokus auf das Textfeld gesetzt wird. Auf benachbarte Label zu klicken, bietet einen einfachen Weg um zu überprüfen, ob das Formular richtig gekennzeichnet ist.

Textbereiche


Hier finden Sie das HTML Markup:

<label for="address">Fügen Sie ihre Adresse ein:</label><br>
<textarea id="address" name="addresstext"></textarea>

Checkboxen

Wählen Sie ihre Pizza Zutaten aus:




Hier finden Sie das HTML Markup:

<fieldset>
<legend>Wählen Sie ihre Pizza Zutaten aus:</legend>
<input id="ham" type="checkbox" name="toppings" value="Schinken">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="Pepperoni">
<label for="pepperoni">Pepperoni</label><br>
<input id="mushrooms" type="checkbox" name="toppings" value="Pilze">
<label for="mushrooms">Mushrooms</label><br>
<input id="olives" type="checkbox" name="toppings" value="Oliven">
<label for="olives">Olives</label>
</fieldset>

Das <fieldset> umgibt die gesamte Gruppierung von Radio-Buttons. Das <legend> liefert eine Beschreibung für die Gruppierung. Bildschirmlesegeräte stellen den Legendentext für jedes Eingabefeld aus <fieldset> einzeln dar. Der Legendentext sollte aus diesem Grund kurz und aussagekräftig sein.

Radio-Buttons

Wählen Sie eine Versandart aus:



Hier finden Sie das HTML Markup:

<fieldset>
<legend>Wählen Sie eine Versandart aus:</legend>
<input id="overnight" type="radio" name="shipping" value="Über Nacht">
<label for="overnight">Über Nacht</label><br>
<input id="twoday" type="radio" name="shipping" value="2 Tage">
<label for="twoday">2 Tage</label><br>
<input id="ground" type="radio" name="shipping" value="3 bis 6 Tage>
<label for="ground">3 bis 6 Tage</label>
</fieldset>
Anmerkung

<fieldset> und <legend> sollten nur dazu verwendet werden, um Gruppen von Eingabefeldern zu verknüpfen, wenn eine umfassendere Beschreibung (d.h. die Legende) notwendig ist. Einzelne Checkboxen oder einfache Radio-Buttons (wie männlich / weiblich für Geschlecht), die aufgrund ihrer Labels sinnvoll und eindeutig sind, benötigen kein <fieldset> oder <legend>. Verschachtelte <fieldset>s sollten generell vermieden werden.

Auswahlmenüs

Hier finden Sie das HTML Markup:

<label for="favcity">Choose your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="5">London</option>
<option value="6">Los Angeles</option>
<option value="7">Moscow</option>
<option value="8">Mumbai</option>
<option value="9">New York</option>
<option value="10">Sao Paulo</option>
<option value="11">Tokio</option>
</select>

Um die Barrierefreiheit dieser Liste noch weiter zu verbessern, könnten wir die Option optgroup, zu der Gruppe hinzufügen.

 
 
 
 
Hier finden Sie das HTML Markup:

<label for="favcity2">Choose your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Asia">
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="8">Mumbai</option>
<option value="11">Tokio</option>
</optgroup>
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="5">London</option>
<option value="7">Moskau</option>
</optgroup>
<optgroup label="North America">
<option value="6">Los Angeles</option>
<option value="9">New York</option>
</optgroup>
<optgroup label="South America">
<option value="2">Buenos Aires</option>
<option value="10">Sao Paulo</option>
</optgroup>
</select>

Beachten Sie, dass optgroup nicht von allen Endgeräten und Bildschirmlesegeräten unterstützt wird, aus dem Grund sollten wichtige Gruppeninformationen nicht damit dargestellt werden. In Fällen, in denen optgroup nicht unterstützt wird, wird es einfach ignoriert. Verwechseln Sie nicht das label-Attribut des optgroup-Elements mit dem label Element. Hier handelt es sich um grundverschiedene Dinge.

Mehrere Auswahlmenüs erlauben dem Nutzer mehr als nur eine Option aus einer Liste zu wählen.

Anmerkung

Es wird empfohlen, mehrere Auswahlmenüs zu vermeiden. Nicht alle Browser bieten eine intuitive Navigation mit der Tastatur für mehrere Auswahlmenüs. Viele Anwender wissen nicht, dass Sie STRG/ CMD oder Shift + Klick verwenden müssen, um mehrere Elemente auszuwählen. Normalerweise kann ein Satz von Checkboxen ähnliche Optionen, aber mehr barrierefreie Funktionalität bereitstellen.

Buttons

Für Formular-Buttons (absenden und Eingabefelder leeren), ist keine weitere Information für die Barrierefreiheit erforderlich. Das Wert-Attribut für Eingabe-Buttons und der verschachtelte Text für <button>-Elemente werden von Bildschirmlesegeräten erkannt, wenn der Button ausgewählt wird. Dieses Attribut darf nie leer sein.

Hier finden Sie das HTML Markup:

<input type="submit" name="Suchen" value="Submit Search">
<input type="reset" name="reset" value="Reset">
<button>Aktivieren</button>

Da Reset-Buttons versehentlich ausgewählt werden können, gibt es nur wenige Fälle, in denen sie bereitgestellt werden sollten.

Bilder-Buttons

Wenn Sie einen Bild-Button (<input type="image">) einem Standard-Button bevorzugen, muss der Input einen entsprechenden alt-Text haben.

Hier finden Sie das HTML Markup:

<input type="image" name="submitbutton" alt="search" src="submit.png">

JavaScript Sprungmenü

Da diese Arten von Menüs aktiviert werden, wenn der oberste Menüpunkt geändert wird, können diese Menüs Probleme mit der Barrierefreiheit bei Tastatureingaben mit sich führen, weil sie nicht durch Listen blättern können, ohne eine der Optionen auszuwählen.

Anmerkung

Manche Browser (inklusive Firefox) überschreiben diese Sprungmenüs, sodass sie nicht durch Tastaturänderungen aktiviert werden, sondern nur, wenn Sie entweder mit der Maus oder durch Enter drücken ausgewählt werden.

Die Bereitstellung des Absende-Buttons getrennt von der Auswahlliste erlaubt, aktuell ausgewählte Elemente barrierefrei für Tastaturen zu aktivieren.