Formulare designen

// Ein Beitrag aus der Reihe „Gute Formulare“.

Damit ein Formular gut ist, muss es zwei Dinge erfüllen:

1. Für alle Nutzenden verständlich sein
2. Mit assistiven Technologien (zum Beispiel mit Screenreadern) zu bedienen sein

Wie kann über das Design ein gutes Formular schaffen?

• Alle Felder haben zugehörige Beschriftung (Labels), wenn nicht möglich muss beim Entwickeln mit ARIA-Attributen gearbeitet werden. Hier sind dann Angaben für die Entwickler hilfreich, wie diese Beschriftungen lauten sollen
• Platzhaltertexte sind keine Label (schwierig für Betroffene mit kognitiven Erkrankungen, wenn die Beschriftung durch Klicken ins Feld plötzlich verschwindet)
• Es wird ein Absende-Button benötigt (der auch ein <button> ist, aussehen kann er natürlich anders)
• Gruppierte Formular-Elemente sollten einen übergeordneten Namen haben (z. B. Multiple Choice Fragen). Der Name sollte Kontext für die individuellen Fragen in der Gruppe geben.
• Wo möglich, Standard-Komponenten verwenden (z. B. select, radio, checkbox) und keine Elemente machen, die nur so aussehen wie Standard-Komponenten und dann die Funktion nachgebaut werden muss
• Eingabefelder, die logisch zusammen gehören, gruppieren
• Klare Fokus-States designen
• Evtl. einen Text vorsehen, der erklärt was mit den Daten passiert (wofür werden die Daten verwendet, warum muss man eine Telefonnummer angeben, wie lange werden die Daten gespeichert?)
• Bei Formularen über mehrere Seiten: auf der ersten Seite zeigen, wie viele Schritte es sein werden, auf jeder weiteren Seite den Fortschritt anzeigen (entweder in der Überschrift: Schritt 1 von 2 oder über einen Balken oder Schritt-für-Schritt-Indikator )
• Vorsehen von klaren und hilfreichen Fehlermeldungen am Feld und über dem Formular, die aussagen, was schief gelaufen ist und wie man es beheben kann.
• Fehler und Fehlermeldungen nicht nur über Farbe kennzeichnen, sondern z. B. mit Symbolen oder Texten
• Gute Kontraste und Farben (Fehlsichtigkeiten beachten!)
• Dem Nutzer Hinweise geben, wie die Eingabefelder auszufüllen sind (wo es Sinn macht!). Am besten unter dem Feld (kann dann vom Entwickler mit aria-labelledby mit dem input Feld verknüpft werden)
• Feedback geben nach dem Absenden (z. B. Vielen Dank für Ihre Nachricht!)
• Von Beginn an klar machen, was Pflichtfelder sind. Das kann man erreichen, indem man:
  • das Wort (Pflichtfeld) hinter das Label schreibt, dies ist für alle die beste Lösung.
  • ein z. B. rotes * hinter das Label schreibt (dann ist aber eine vorhergehende Erklärung – z. B. * markieren Pflichtfelder – nötig, und für Screenreader-Nutzer ist es nicht so praktisch, da „Star“ bzw. „Stern“ vorgelesen wird)
  • Eine robuste Lösung für alle ist die folgende: das Wort Pflichtfeld oder * dazu schreiben, und dann per aria-hidden vor Screenreadern verstecken, plus das Pflichtfeld für Screenreader und Braille output dann mit aria-required oder required anzeigen lassen.
    <label for="email">Email <span aria-hidden="true">(required)</span></label>
<input type="text" aria-required="true" id="email" name="email">
    
  • Falls es viel mehr Pflichtfelder als optionale Felder gibt, macht es Sinn, nicht die Pflichtfelder, sondern die optionalen Felder zu kennzeichnen (mit dem Wort (optional), aber besser ist normalerweise das Markieren von Pflichtfeldern
  • Auch wenn es nur Pflichtfelder gibt, sollten sie als solche markiert sein (und ein zusätzlicher Infotext darüber wäre gut)
  • Es kommt natürlich auch auf den Kontext an: Bei einem simplen Login Formular oder einer Newsletter Anmeldung sollten Pflichtfelder nicht markiert sein, das verwirrt nur. Es sollte aber im Kontext klar werden, um was es beim Formular geht.
    
  • Quelle: https://www.tpgi.com/doing-whats-required-indicating-mandatory-fields-in-an-accessible-way/
    

Quelle u.a.: Barrierefreies Kontaktformular erstellen – Für Designer

Empfehlungen eines Betroffenen (wenig Sehkraft) für Formulare:

• Geringer Abstand zwischen Beschriftung und Feld
• Schwarze Formularrahmen und angegraute Vorbelegung
• Alle Checkboxen und Buttons linksbündig gesetzt
• Checkboxen haben einen schwarzen Rahmen und der Text zur Zustimmung ist linksbündig in normaler Schriftgröße
• Fehlermeldungen werden direkt am betreffenden Formularfeld angezeigt