Formulare

Erscheinungsbild / Design-Aspekte

Kontrast

Hier siehst du ein Standardformular. Auf der linken Seite ist das Eingabefeld mit einer Linie gut sichtbar umrandet. Das rechte Beispiel ist vielleicht trendiger, aber es würde nicht barrierefrei eingestuft werden. Weil das Eingabefeld nicht gut sichtbar ist. Nutze den dazu den Contrast Checker.

Diese WCAG Erfolgskriterien solltest du dabei beachten: 1.4.3 Kontrast und 1.4.11 Kontrast von Nicht-Text-Inhalten.

Auch ein DropDown oder eine Sternbewertung ist zu beachten. Wie alle anderen Elemente in deinem Formular.

Labels / Etiketten

Ein Label ist ein klares Etikett oben am Eingabefeld. Das genau sagt was zu tun ist bei dem jeweiligen Feld. Im Gegensatz dazu verschwindet der Platzhalter sofort bei der Eingabe. Platzhalter haben meist einen schwächeren Grauton und sind für viele Menschen nicht sichtbar. Nur einen Platzhalter zu verwenden, ist für die Zugänglichkeit nicht ausreichend. Diese WCAG Erfolgskriterien solltest du dabei beachten: 3.3.2 Beschriftung (Labels) oder Anweisung.

Focus

Ohne Fokus sind die Formulare über die Tastatur nicht nutzbar. Diese WCAG Erfolgskriterien solltest du dabei beachten: 2.4.7 Fokus Sichtbar und 1.4.1.

Der Fokuszustand zwischen Standard und Aktiv muss gut sichtbar sein. Hier ein paar Beispiele:

Gültige / ungültige Zustände

Zum visuellen Hinweis hier rot/grün gehört unbedingt einen textlichen Hinweis dazu. Denn nur eine farblichen Hinweis ist für Farbenblinde fast nicht zu unterscheiden. Ein Indikator kann ein Kreuz oder ein Häkchen sein, unabhängig von der Farbe. Es ist auch nützlich, einen Text zu verwenden, um darauf hinzuweisen. Ohne Alternativen sind die Informationen nicht zugänglich.

Semantik

Integrierte Typen und Validierung

HTML 5 hat die Formularerstellung verbessert. Durch semantische Elemente wie Buttons, Checkboxen, Dokumente und Textfelder wird die Zugänglichkeit für alle Benutzer verbessert. Es gibt jedoch noch ungenutzte native Feldtypen, die in Formularen eingesetzt werden sollten, um von ihren Vorteilen zu profitieren.

Elementtypen wie: <input type=date> oder <input type=search> usw.

Eine sofortige Validierung, eintippen und sofort Feedback erhalten. Wie hier, dass 200 Zeichen erlaubt sind und diese werden beim Schreiben Live zurückgezählt.

Diese WCAG Erfolgskriterien solltest du dabei beachten: 1.3.5 Eingabezweck erkennen

Erforderlich/required

Solange nicht korrekt eingegeben wurde, wird das Formular nicht abgeschickt und eine Fehlermeldung ausgegeben. Pflichtfelder haben das Attribut required.

Felder gruppieren

Mit <fieldset> können Eingabefelder gruppiert werden. Macht zum Beispiel bei Rechnungs- und Lieferadresse Sinn. Da hier ja zweimal der Name oder die Strasse abgefragt wird.

Ansichtsbeispiele