HTML-Formular

Inclusives Design: Formulare mit HTML und CSS

Auf den meisten Ihrer Seiten bieten Sie vermutlich Informationen an, die „nur“ gelesen werden sollen. Vielleicht haben Sie für Ihre Texte schon viel getan, um diese zugänglich zu machen.

Auch  Formularen sollten Sie die gleiche Aufmerksamkeit widmen. Formulare sind schließlich eine Möglichkeit, mit Ihren Besuchern in Kontakt zu treten. Worauf Sie bei der Erstellung von inklusiven Formularen achten müssen, erfahren Sie in diesem Artikel.

Inklusive Formulare sind kurz

Hat ein Formular viele Felder, schreckt bereits die schiere Länge erste Besucher ab.

Außerdem sind viele Menschen um Datensparsamkeit bemüht. Diese machen einen großen Bogen um Formulare mit mehreren Pflichtfeldern.

Wenn Sie ein Kontaktformular anbieten, reichen 3 Felder: Name (optional), Betreff (optional) und ein textarea für die eigentliche Nachricht (required).

Wenn Sie darüber hinaus weitere Informationen abfragen, sollte nachvollziehbar sein, wofür diese benötigt werden.

Da der Besucher eine Antwort auf seine Nachricht wünschen könnte, sollten noch ein oder zwei Felder folgen (Email und/oder Telefonnummer), so dass der Kontakt hergestellt werden kann.

Inklusive Formulare sind verständlich

Wenn nicht klar ist, wie die Felder befüllt werden sollen, können auch kurze Formulare viel Zeit und Nerven kosten.

  • Beschriften Sie daher alle Felder eindeutig und klar mittels label
  • Geben Sie in den Feldern Beispiele mittels placeholder
  • Kennzeichnen Sie Pflichtfelder mit einem Sternchen oder dem ausgeschriebenen Wort „Pflichtfeld“

Das Design unterstützt beim Ausfüllen

Neben einer aussagekräftigen Beschriftung gibt die Gestaltung des Formulars wichtige Anhaltspunkte für ein korrektes Befüllen.

  • Gruppieren Sie zusammen gehörende Felder mittels fieldset und geben Sie fieldsets eine Beschriftung mittels legend
    Hinweis: Eine Gruppe von Checkboxen oder Radio-Buttons ist immer eine Gruppe zusammengehörender Felder und benötigt ein fieldset
  • Heben Sie fokussierte Felder deutlich hervor, damit Besucher wissen, wo Sie sich befinden
  • Richten Sie sowohl die label, als auch die Eingabefelder linksbündig aus, so muss das Auge weniger springen und die Bezüge sind auf den ersten Blick erkennbar
  • Wenn ein oder zwei Worte als Beschreibung nicht ausreichen, bieten Sie eine Hilfe in direkter Nähe zum Feld an

Kurze Felder für wenige Zeichen

Inklusive Formulare geben auch optische Hinweise für das korrekte Befüllen der Felder
Ein kurzes Eingabefeld für Altersangaben zeigt an, dass keine langen Texte erwartet werden

Für eine Postleitzahl oder eine Altersangabe ist kein Feld nötig, das sich über die gesamte Formularbreite erstreckt. Ein kurzes Feld macht auf den ersten Blick klar, dass nur wenige Zeichen erwartet werden.

HTML

<label for="age">Alter</label>
<input id="age" type="number" placeholder="99">

CSS

#age {
  width: 8em;
}

HTML korrekt verwenden

HTML verleiht einem Dokument Sinn. Ein korrekt erstelltes Eingabefeld enthält eine ganze Reihe von Informationen.

Noch einmal das Beispiel für eine Altersangabe:

HTML

<label for="age">Alter</label>
<input id="age" type="number" placeholder="99">

Die Verwendung des Elementes input bedeutet, dieses Element lässt sich

  • antabben
  • anklicken
  • bedienen (in diesem Fall befüllen)

type="number" bedeutet: erwartet werden ausschließlich Ziffern. Daher zeigen Geräte mit virtueller Tastatur (z.B. Smartphones) angepasste Tastaturen mit besonders großen und leicht zu treffenden Tasten an.

Die Verknüpfung von input und label mit Hilfe der Attribute for und id macht zudem klar, dass ein Alter anzugeben ist.

Da alle diese Informationen auch Screenreadern zur Verfügung stehen, ist solch ein Eingabefeld jedem zugänglich. Denn es ist auch unabhängig vom verwendeten Eingabegerät (Maus, Tastatur, Sprachsteuerung) bedienbar.

Zugänglichkeit kann also sehr einfach sein. HTML richtig angewendet bringt bereits fast alles mit, was für inklusive Formulare nötig ist.

Beispiel Postleitzahl

Während die Regel „Beschrifte Textfelder mit Label-Elementen“ in der einfachsten denkbaren Form bereits barrierefrei ist, brauchen Sonderfälle natürlich grundlegendere Überlegungen – die Umsetzung ist dann aber ebenfalls eine Kleinigkeit.

Auf den ersten Blick ein klarer Fall: ein Eingabe-Feld vom Typ number erlaubt die Eingabe von Zahlen. Man kann diese auch auf eine Länge von fünf Ziffern beschränken. Die Vorteile liegen auf der Hand: die Daten können nur so eingegeben werden, wie sie abgespeichert werden sollen und bei einer falschen Eingabe bekommt der Nutzer eine aussagekräftige Fehlermeldung.

Auf den zweiten Blick ist die Sache komplizierter. Ein Formular soll nicht dem Entwickler die Arbeit erleichtern: „Wenn ich es zweimal machen muss, schreibe ich ein Skript“. Das bedeutet, dass wiederkehrende Arbeiten automatisiert werden sollten, um unnötige, langweilige und lästige Routine-Aufgaben zu vermeiden.

In Deutschland ist es durchaus üblich, Postleitzahlen unterschiedlich anzugeben:

  • D 12345
  • 12345
  • D-12345

Das alles sind bekannte Schreibweisen.  Die Verwendung von number als Eingabetyp führt aber in all diesen Fällen zu einer Fehlermeldung. Das Feld muss erneut ausgefüllt werden.

Das widerspricht dem Robustheitsgrundsatz (Postels Gesetz). Der lautet:

Sei streng, bei dem, was du tust und offen, was du von anderen akzeptierst
RFC 761

Es ist leicht, dem Nutzer solche Kleinlichkeiten zu ersparen und aus dem übergebenen Wert einfach 5 aufeinander folgende Ziffern zu entnehmen, um eine einheitliche Datenbasis zu schaffen (die Zahlen können auch noch gegen eine Datenbank tatsächlich existierender Postleitzahlen geprüft werden, um offensichtliche Fehler zurückzumelden. Aber da es hier erst mal nur um das Verständnis des Prinzips geht, lassen wir das mal außen vor. Fertige Lösungen gibt es dafür ohnehin).

Um bei den Möglichkeiten von HTML zu bleiben: Ein Eingabefeld vom Typ number macht es sogar unmöglich eine Postleitzahl einzugeben, die mit einer Null beginnt.

Erwartet wird also keine Zahl, sondern eine ganz normale Zeichenkette (String), was uns zurück zum gewöhnlichen Textfeld bringt.

Es gibt tatsächlich einen Weg, dem Nutzer nur übliche Postleitzahlen-Werte eingeben zu lassen: das Attribut pattern erlaubt es, reguläre Ausdrücke (englisch regular expression oder regex) mitzugeben, die der Browser auch überprüfen kann.

Zwar sind reguläre Ausdrücke nicht jedermanns Sache, aber im Web findet man solche regulären Ausdrücke für übliche Probleme – wenn man gar nicht fündig wird, kann man auch in einschlägigen Foren nachfragen (z.B. forum.selfhtml.org).

Für das hier besprocheneProblem lautet der reguläre Ausdruck wie folgt:

^(?:[Dd]\s*[-–—]?\s*)?[0-9]{5}$

In HTML notiert sieht das komplette Konstrukt dann wie folgt aus:

<input pattern="^(?:[Dd]\s*[-–—]?\s*)?[0-9]{5}$">

Also nur ein Eingabefeld mit einem aus dem Web kopierten regulären Ausdruck (input="text" ist der Standardwert und muss daher nicht angegeben werden).

Ergänzen Sie noch label und ein Beispiel mittels placeholder und Sie haben ein barrierefreies Eingabefeld für Postleitzahlen, zugänglich und komfortabel für jeden:

Takeaway – Was Sie sich mitnehmen sollten

HTML

<label for="plz">Postleitzahl</label>
<input pattern="^(?:[Dd]\s*[-–—]?\s*)?[0-9]{5}$" placeholder="01234" id="plz">

CSS

Das CSS für kurze Eingabefelder sollten Sie auch für die Postleitzahlen verwenden.

#plz {
  width: 8em;
}

Fazit: Jeder kann inklusive Formulare erstellen

Mit nur wenig Aufwand lassen sich Formulare ohne Barrieren erstellen, die den Nutzern bei Fehlern sinnvolle Fehlermeldungen ausgeben. Ordentlich beschriftet mittels label, kann kaum noch etwas schief gehen. Verwenden Sie außerdem placeholder für Beispieltexte und Hilfetexte, wenn Sie ungewöhnliche Informationen benötigen. So vermeiden Sie Fehleingaben.

Wenn Sie diese Tipps beachten, werden Ihre Besucher eher die Mühe auf sich nehmen, ein Formular bis zum Ende auszufüllen. Gut für die Besucher und gut für Sie.

Die Mühe für Sie ist gleich null, wenn Sie bis hierher gelesen haben. Speichern Sie sich Codeschnipsel wie den obigen für Postleitzahlen ab und fügen Sie ihn in zukünftige Formulare mittels Cooy & Paste einfach ein.

Barrierefreiheit kann so einfach sein!

Mehr Infos in zwei Artikeln zur Fehlerbebehandlung in Formularen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.