Eine Usability-Checkliste für Formulare kleiner Unternehmen

Beginnen Sie damit, das Formular zu kürzen

Das W3C-Forms-Tutorial weist darauf hin, dass Menschen, technische Fragen beiseite, meist einfache und kurze Formulare bevorzugen. Es rät, nur abzufragen, was zum Abschluss des Vorgangs oder Prozesses nötig ist, und sagt, dass Nutzer ein Formular eher abbrechen, wenn irrelevante oder übermäßige Daten verlangt werden. Gehen Sie, bevor Sie irgendetwas anderes prüfen, Ihr Formular Feld für Feld durch und fragen Sie, was Sie verlören, wenn dieses Feld wegfiele.

Eine Angebotsanfrage braucht oft einen Namen, einen Rückkanal und eine Beschreibung des Auftrags. Eine Postadresse, eine Unternehmensgröße und eine zweite Telefonnummer gehören womöglich in ein späteres Gespräch.

Beschriftungen und Hinweise

WCAG 3.3.2, Labels or Instructions, verlangt, dass Beschriftungen oder Anweisungen bereitgestellt werden, wenn Inhalte eine Eingabe erfordern. Die Erläuterung des W3C nennt als Ziel, dass Menschen wissen, welche Eingabe erwartet wird, und dass die Formulierung „erfordert“ jedes Feld umfasst, das eine Eingabe akzeptiert, sodass auch optionale Felder eine Beschriftung brauchen. Bei Auswahlmöglichkeiten wie Optionsfeldern und Kontrollkästchen braucht jede Option eine eigene Beschriftung, damit Menschen wissen, was sie auswählen.

Dieselbe Seite sagt, dass Anweisungen auch ein Datenformat nennen können, zum Beispiel wenn ein Datum auf bestimmte Weise zu schreiben ist, und warnt vor Überfrachtung: Zu viele Anweisungen können so schädlich sein wie zu wenige. Sie trennt das außerdem von der Auszeichnung im Code. Eine Beschriftung kann sichtbar sein und dennoch im Code nicht mit ihrem Feld verbunden, was die WCAG unter einem anderen Kriterium behandeln, 1.3.1. Das W3C-Forms-Tutorial empfiehlt das Element label, um jedes Steuerelement zu kennzeichnen, und fieldset mit legend, um zusammengehörige Steuerelemente zu gruppieren, etwa eine Gruppe von Optionsfeldern.

• Jedes Feld hat eine sichtbare Textbeschriftung, auch optionale.
• Pflicht- und optionale Felder werden in Worten unterschieden, nicht allein durch Farbe.
• Ein Formathinweis erscheint dort, wo das Format eine Rolle spielt, etwa wie ein Datum zu schreiben ist.
• Jede Option bei Optionsfeldern und Kontrollkästchen hat ihre eigene Beschriftung.
• Zusammengehörige Optionen stehen unter einer gemeinsamen Gruppenüberschrift.
• Ein Klick oder Tippen auf eine Beschriftung springt zu ihrem Feld, was darauf hindeutet, dass Beschriftung und Feld verbunden sind.

Fehlermeldungen

WCAG 3.3.1, Error Identification, besagt: Wird ein Eingabefehler automatisch erkannt, wird das fehlerhafte Element gekennzeichnet und der Fehler dem Nutzer als Text beschrieben. Die Erläuterung des W3C ergänzt, dass es bei einer fehlgeschlagenen Übermittlung nicht genügt, das Formular erneut anzuzeigen, ohne einen Hinweis, dass etwas schiefgegangen ist. Ein Eingabefehler umfasst hier ein leer gelassenes Pflichtfeld sowie einen Wert außerhalb des erwarteten Formats oder der zulässigen Werte.

Das Kriterium schreibt nicht vor, wo Meldungen stehen. Sie können oben im Formular aufgelistet oder neben jedem Feld angezeigt werden, und Farbe oder ein Symbol können dem Text hinzugefügt, aber nicht an seine Stelle gesetzt werden. Das W3C merkt außerdem an, dass „E-Mail ist nicht gültig“ 3.3.1 erfüllen würde, während eine Meldung, die die Korrektur erklärt, etwa mit der Bitte um eine Adresse im Format name@domain.com, weitergeht und auch das benachbarte Kriterium Error Suggestion abdeckt.

• Nach einem fehlgeschlagenen Absenden sagt eine Meldung in einfachem Text, dass etwas korrigiert werden muss.
• Jede Meldung nennt das Feld, auf das sie sich bezieht.
• Jede Meldung sagt, was zu ändern ist, und nicht nur, dass etwas falsch ist.
• Farbe oder ein Symbol, falls verwendet, steht zusammen mit dem Text.
• Was die Person bereits eingegeben hat, ist nach dem Fehler noch vorhanden.
• Eine Bestätigung erscheint, wenn das Formular erfolgreich gesendet wurde.

Tastaturbedienung

WCAG 2.1.1, Keyboard, besagt, dass sich die gesamte Funktionalität der Inhalte über eine Tastaturschnittstelle bedienen lassen soll, ohne bestimmte Zeitvorgaben für einzelne Tastenanschläge zu verlangen. Die Erläuterung des W3C stellt fest, dass dies für Menschen wichtig ist, die keine Maus benutzen können, und dass zu Tastaturschnittstellen auch Spracheingabe-Software, Bildschirmtastaturen und Scanning-Software gehören. Sie fügt hinzu, dass Plattformkonventionen bewährte Praxis sind, etwa dass eine fokussierte Schaltfläche meist mit Eingabe oder Leertaste ausgelöst wird.

Das W3C-Forms-Tutorial enthält auch einen Hinweis zu Zeitlimits: Wo möglich, sollte ein Formular keines haben, und wo eines nötig ist, zum Beispiel aus Sicherheitsgründen, sollten Menschen es abschalten oder verlängern können.

Ein Testskript für zehn Minuten

Führen Sie dies am Live-Formular oder an einer Kopie durch und verwenden Sie nur erfundene Angaben. Es ist eine praktische Prüfung für Unternehmerinnen und Unternehmer, kein Konformitätstest, und das Bestehen belegt nicht, dass eine Website die WCAG oder einen anderen Standard erfüllt. Legen Sie beim ersten Durchgang die Maus beiseite.

• Drücken Sie vom Seitenanfang aus die Tabulatortaste und notieren Sie, ob Sie in sinnvoller Reihenfolge jedes Feld, jede Option und die Senden-Schaltfläche erreichen.
• Prüfen Sie, dass Sie jederzeit sehen, wo sich der Fokus befindet.
• Wählen Sie Optionen und betätigen Sie die Senden-Schaltfläche ohne Maus.
• Lassen Sie ein Pflichtfeld leer und senden Sie ab. Lesen Sie die Meldung laut vor: Nennt sie das Feld und sagt sie, was zu tun ist?
• Geben Sie einen Wert im falschen Format ein und senden Sie ab. Notieren Sie, ob die Meldung Ihnen hilft, ihn zu korrigieren.
• Korrigieren Sie alles und senden Sie erneut. Prüfen Sie, ob Ihnen mitgeteilt wird, dass es geklappt hat.
• Notieren Sie jede Stelle, an der Sie hängen geblieben sind, in der Reihenfolge, in der Sie darauf gestoßen sind.

Ein hypothetisches Beispiel

Stellen Sie sich einen kleinen Gartenpflegebetrieb mit einem Angebotsformular vor, das Name, E-Mail, Telefon, Adresse, Gartengröße und Nachricht abfragt. Die Felder zeigen graue Hinweistexte, die verschwinden, sobald man zu tippen beginnt, das Nachrichtenfeld hat keine sichtbare Beschriftung, eine fehlende E-Mail-Adresse färbt das Feld rot ohne Worte, und der Datumsauswähler ist mit der Tabulatortaste nicht erreichbar. Ein Tastaturtest bringt all das in weniger als zehn Minuten zutage. Der Betrieb entfernt die Frage nach der Gartengröße, ergänzt sichtbare Beschriftungen, schreibt eine Meldung, die sagt, welches Feld was braucht, und ersetzt den Auswähler durch ein einfaches Datumsfeld mit Formathinweis. Dieses Beispiel ist erfunden und ungetestet.

Was diese Checkliste nicht abdeckt

Sie prüft weder Farbkontrast noch Screenreader-Ausgabe, noch das Verhalten des Formulars auf dem Smartphone, den Spamschutz oder den Umgang mit den übermittelten Daten. Tests mit echten Menschen, die assistive Technologien nutzen, bringen mehr als jede Checkliste. Führen Sie Ihre Liste der Stolperstellen weiter und beheben Sie die früheste zuerst, denn ein früher Blocker verdeckt alles, was dahinter liegt.