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“
Zugängliche Formulare lassen sich mit jedem Gerät bedienen
Wie für jede zugängliche Seite gilt auch für Formulare, dass Eingabe und Ausgabe mit jedem Gerät möglich sein muss.
Das bedeutet: egal ob ein Nutzer an einem Laptop sitzt, ein Handy benutzt, einen Screenreader oder einen Textbrowser wie Lynx: alle Inhalte sollten strukturiert sein, Bezüge sind erkennbar und natürlich ist auch alles auf jedem Gerät lesbar.
Bei Formularen ist es zudem besonders wichtig, dass auch die Eingabe mit jedem Gerät möglich ist. Eine Maus sollt ebensowenig vorausgesetzt werden, wie eine Tastatur. Touchbedienung, Maus und Tastatur sind schon konzeptionell völlig unterschiedliche Bedienungsarten. So stehen auf Smartphones beispielsweise keine Tooltipps zur Verfügung, die beim Überfahren mit der Maus angezeigt werden.
Erfreulicherweise ist es sehr einfach, Formulare für alle zugänglich zu erstellen: verwenden Sie die in HTML dafür vorgesehenen Elemente. Wenn Sie einen Knopf zum Absenden benötigen, verwenden Sie einen buttonlabel zur Verfügung und je nachdem welche Eingaben Sie erwarten, nutzen Sie input-Felder vom Typ number, text, date, password usw
Bei den meisten Formularen ist mehr gar nicht nötig.
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
fieldsetund geben Siefieldsets eine Beschriftung mittelslegend
Hinweis: Eine Gruppe von Checkboxen oder Radio-Buttons ist immer eine Gruppe zusammengehörender Felder und benötigt einfieldset - 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
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 deutsche Postleitzahl
Warum nur deutsche Postleitzahlen?
Im folgenden wird gezeigt, wie Sie überprüfen können, ob Werte, die in ein Eingabe-Feld eingegeben werden, üblichen Schreibweisen für deutsche Postleitzahlen entsprechen. Es ist ein angenommenes Beispiel, das im echten Leben Sinn machen kann. Beispielsweise wenn Sie etwas verkaufen und nur an deutsche Adressen versenden oder wenn Sie nur in Deutschland Filialen haben und aufgrund der Postleitzahl eine Umkreissuche starten wollen.
Aber denken Sie daran, dass Sie die Einschränkung auf deutsche Postleitzahlen im folgenden Beispiel nur dann übernehmen, wenn Sie tatsächlich nur deutsche Adressen akzeptieren. Das Web ist schließlich von der ganzen Welt aus erreichbar. Wenn auch Menschen aus anderen Ländern Ihre Daten angeben sollen, dann kann die im Beispiel gezeigte Einschränkung natürlich nicht verwendet werden!
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