Barrierefreie Assets erstellen: Formulare

Formulare sind ein wichtiger Bestandteil der Benutzerinteraktion auf Landing Pages und Websites, sei es für die Anmeldung, den Kauf oder die Übermittlung von Informationen. Damit jeder sie nutzen kann, müssen Formulare barrierefrei gestaltet werden. In diesem Artikel geht es um Best Practices für die Beschriftung von Feldern, klare Anweisungen, Fehlerbehebung und Tastaturnavigation, damit alle Nutzer deine Formulare problemlos ausfüllen können.

Anforderungen

• Alle Beschriftungen müssen programmatisch mit den entsprechenden Elementen verknüpft sein.
• Alle Beschriftungen müssen als programmatisch erkennbarer Text verfügbar sein.
• Alle Bezeichnungen müssen aussagekräftig sein.
• Platzhaltertext ist erlaubt, darf aber nicht als einzige Methode zur Beschriftung einer Texteingabe verwendet werden.
• Wenn mehrere Bezeichnungen für ein Element verwendet werden, muss jede Bezeichnung programmatisch mit dem entsprechenden Element verknüpft werden.
• Wenn eine Beschriftung für mehrere Elemente verwendet wird, muss die Beschriftung programmatisch mit jedem der entsprechenden Elemente verknüpft werden.
• Gruppenbeschriftungen müssen programmatisch mit der Gruppe verknüpft werden, wenn die einzelnen Beschriftungen für jedes Element in der Gruppe allein nicht ausreichen (z. B. eine Gruppe von Optionsfeldern, die eine Gruppenbeschriftung und individuelle Beschriftungen für jede Option hat).
• Anleitungen zum Verstehen und Bedienen von Inhalten dürfen sich nicht allein auf sensorische Merkmale von Komponenten wie:
  • form,
  • farbe,
  • größe,
  • visuelle Position,
  • orientierung,
  • ton.
• Icons oder Grafiken dürfen nur dann als einzige visuelle Beschriftung (ohne visuellen Text) verwendet werden, wenn die Bedeutung des Icons visuell offensichtlich ist und eine programmatisch zugeordnete semantische Beschriftung für unterstützende Technologien verfügbar ist.
• Beschriftungen müssen sichtbar sein.
• Anweisungen für ein Element müssen programmatisch mit dem Element verknüpft sein.
• Die Anweisungen für ein Element müssen als programmatisch ermittelbarer Text verfügbar sein.
• Die Anweisungen für ein Element müssen sinnvoll sein.
• Sichtbare Eingabeanweisungen: Die Anweisungen für ein Element müssen sichtbar sein.
• Bei Benutzeroberflächenkomponenten mit Beschriftungen, die Text oder Bilder von Text enthalten, muss der Name den Text enthalten, der visuell dargestellt wird.
• Die programmatische Beschriftung muss denselben Text enthalten wie die visuelle Beschriftung, um die Sprachaktivierung zu erleichtern.
• Wenn die Kenntnis eines deaktivierten Feldes für das Verständnis des Inhalts unerlässlich ist, muss ein alternativer Weg gefunden werden, um Informationen über das deaktivierte Feld zu übermitteln.
• Denn deaktivierte Felder befinden sich standardmäßig nicht in der normalen Tabulatorreihenfolge, was es für Screenreader-Nutzer/innen schwierig macht, sie zu entdecken.
• Den Nutzern MUSS ausreichend Zeit zum Ausfüllen des Formulars eingeräumt werden, und zwar durch mindestens eine der folgenden Methoden:
  • kein Zeitlimit,
  • die Möglichkeit, das Zeitlimit zu deaktivieren,
  • die Möglichkeit, das Zeitlimit zu verlängern,
  • die Möglichkeit, das Zeitlimit anzupassen/anzupassen,
  • ein Minimum von 20 Stunden, um das Formular auszufüllen.
• Informationen, die der/die Nutzer/in bereits eingegeben hat oder die ihm/ihr zur Verfügung gestellt wurden und die im selben Vorgang erneut eingegeben werden müssen, werden entweder:
  • automatisch ausgefüllt, oder
  • für den/die Nutzer/in zur Auswahl verfügbar.
• Außer wenn:
  • die erneute Eingabe der Informationen unerlässlich ist,
  • die Informationen erforderlich sind, um die Sicherheit des Inhalts zu gewährleisten,
  • oder die zuvor eingegebenen Informationen nicht mehr gültig sind.
• Ein kognitiver Funktionstest (z. B. das Merken eines Passworts oder das Lösen eines Rätsels) darf für keinen Schritt in einem Authentifizierungsverfahren verlangt werden.
  • “Objekterkennung” und “Persönliche Inhalte” können durch Bilder, Video oder Audio dargestellt werden.

Ausnahmen

Eingabe von überflüssigen Informationen

Ausnahmen sind erlaubt, wenn:

• die erneute Eingabe der Informationen unerlässlich ist,
• die Informationen erforderlich sind, um die Sicherheit des Inhalts zu gewährleisten,
• oder die zuvor eingegebenen Informationen nicht mehr gültig sind.

Authentifizierung

Ein kognitiver Funktionstest (wie z. B. das Merken eines Passworts oder das Lösen eines Rätsels) MUSS NICHT für einen Schritt in einem Authentifizierungsverfahren verlangt werden, es sei denn, dieser Schritt bietet mindestens eine der folgenden Möglichkeiten:

• Eine andere Authentifizierungsmethode, die nicht auf einem kognitiven Funktionstest beruht.
• Es gibt einen Mechanismus, der den Nutzer beim Ausfüllen des kognitiven Funktionstests unterstützt.
• Der Test der kognitiven Funktionen dient dazu, Objekte zu erkennen.
• Der kognitive Funktionstest dient dazu, nicht-textliche Inhalte zu erkennen, die der Nutzer auf der Website eingegeben hat.

Beispiele

	DO: Ein Formular enthält mehrere Pflichtfelder. Die Beschriftungen für die Pflichtfelder werden in Rot angezeigt. Am Ende jeder Beschriftung steht ein Sternchen (*). DO: Felder haben unterstützende Symbole, um den Eingabezustand darzustellen, z. B. Sperre. DO: Alle Eingabezustände sind leicht zu erkennen.
	Zu den Mechanismen, die das Kriterium 3.3.8 erfüllen, gehören: unterstützung der Passworteingabe durch Passwortmanager, um den Speicherbedarf zu verringern, kopieren und Einfügen, um die kognitive Belastung durch erneutes Eintippen zu verringern.