Die richtige Tastatur im mobilen Formular: type, inputmode und autocomplete

Kurz gesagt

Im mobilen Formular öffnet sich bei jedem Tipp auf ein Feld eine Tastatur. Welche, entscheidet der Browser. Sie geben ihm mit den Attributen des Inputs einen Hinweis.

Eine falsche Tastatur wirkt wie ein kleines Problem. Sie wiederholt sich aber in jedem Feld des Formulars. Allgemeine Formularregeln beschreibe ich auf der Seite zum Formulardesign. Diese Seite behandelt nur die Tastatur.

Vier Attribute, vier Aufgaben

Diese vier Attribute werden oft verwechselt, dabei steuert jedes etwas anderes.

• type sagt, was die Daten sind. Laut MDN prüfen die Typen email und url das Format vor dem Absenden, tel nicht, weil sich Telefonnummern von Land zu Land stark unterscheiden.
• inputmode wählt nur die Tastatur. MDN schreibt es klar: Dieses Attribut legt keine Gültigkeitsregel fest. Der Standardwert ist text.
• autocomplete sagt dem Browser den Zweck des Felds. Danach schlägt der Browser eine gespeicherte E-Mail oder Postleitzahl vor.
• enterkeyhint wählt das Label der Enter-Taste. Fehlt es, kann der Browser anhand von inputmode, type oder pattern ein Label wählen.

MDN nennt acht Werte für inputmode. Die Beschreibungen habe ich gekürzt ins Deutsche übersetzt:

Für die Werte tel, email, url und search gibt MDN denselben Hinweis. Verlangt das Feld diese Daten wirklich, nutzen Sie den passenden type.

Für enterkeyhint nennt MDN sieben Werte: enter, done, go, next, previous, search und send. In Feldern mitten im Formular nutze ich next, im letzten Feld done oder send.

Feldtyp wählen

Jedes der sechs Felder unten ist ein echtes Input. Öffnen Sie die Seite auf dem Handy und tippen Sie in ein Feld, sehen Sie, wie sich die Tastatur ändert. Wechseln Sie zum schlechten Beispiel, ändern sich auch die Attribute des Inputs.

Ein häufiger Fehler ist type="number" bei IBAN und Identifikationsnummern. Man wählt es, damit sich die Zifferntastatur öffnet, bekommt aber unerwünschtes Verhalten mit. Das beschreibe ich unten.

Felder in Deutschland

MDN definiert die Werte, sagt aber nicht, welchen Sie für deutsche Felder wählen. Die Tabelle unten ist mein Vorschlag: Das Format der Felder ist belegt, die Wahl der Attribute stammt von mir.

Telefon. Die Ländervorwahl von Deutschland ist 49. Mobilnummern haben Vorwahlen, die mit 15, 16 oder 17 beginnen, und sind ohne die führende 0 zehn oder elf Ziffern lang. Nutzer schreiben sie als „0151 23456789“ oder als „015123456789“. Nehmen Sie beides an.

Laut MDN ist tel-national eine Nummer ohne Ländervorwahl, aber mit der nationalen Vorwahl. Die Schreibweise mit 0 am Anfang passt dazu. Nehmen Sie auch internationale Nummern an, nutzen Sie tel: MDN beschreibt es als vollständige Nummer mit Ländervorwahl.

Steuerliche Identifikationsnummer. Sie ist elfstellig. In der Liste der autocomplete-Werte bei MDN gibt es keinen Wert für Identifikationsnummern. Für die Zifferntastatur reicht inputmode="numeric".

IBAN. Eine deutsche IBAN hat 22 Zeichen und beginnt mit DE. Laut der Tabelle bei Wikipedia folgen danach nur Ziffern. Weil die ersten beiden Zeichen aber Buchstaben sind und Nutzer auch ausländische IBANs eingeben, wähle ich keine Zifferntastatur.

Die IBAN wird traditionell in Vierergruppen geschrieben, bei der elektronischen Übertragung fallen die Leerzeichen weg. Das Formular sollte erlauben, sie gruppenweise zu tippen.

Postleitzahl. Sie hat seit 1993 fünf Ziffern. Postleitzahlen der Zone 0, etwa in Dresden oder Leipzig, beginnen mit 0, und diese 0 darf nicht verloren gehen. Auch MDN zählt Postleitzahlen zu den Werten, für die type="number" nicht passt.

Laut MDN muss pattern auf den ganzen Wert passen. Beschreiben Sie das Format außerdem mit sichtbarem Text am Feld. MDN hält das für die Barrierefreiheit für zwingend.

Die Falle type="number"

Laut MDN ist der Typ number nur für Zahlen gedacht, die erhöht und verringert werden. Für Werte, die nur aus Ziffern bestehen, aber eigentlich keine Zahl sind, passt er nicht. MDN nennt Postleitzahlen und Kartennummern als Beispiele.

Dieselbe Seite nennt zwei Risiken. Der Nutzer kann die Zahl versehentlich ändern, während er etwas anderes tun will. Und tippt er etwas, das keine Zahl ist, sieht er nicht klar, was er falsch gemacht hat.

MDN empfiehlt type="text" zusammen mit inputmode="numeric" und einem pattern. Noch ein Hinweis: Das Attribut pattern funktioniert beim Typ number nicht.

Nehmen Sie beim Betrag decimal, nicht numeric. numeric verlangt nur 0-9, und die Komma-Taste für die Cent fehlt vielleicht. decimal zeigt auch das Dezimaltrennzeichen der Sprache des Nutzers.

Meine Notiz

In Audits schaue ich mir Formulare auch auf dem Handy an und notiere die Tastatur als eigenen Punkt. Am häufigsten finde ich, dass jedes Feld dieselbe Buchstabentastatur öffnet. Der Entwickler hat meist type="text" geschrieben und ist weitergegangen.

Der zweithäufigste Fehler: autocomplete="off" in den Feldern für E-Mail und Telefon im Registrierungsformular. Laut MDN verhindert off, dass der Browser den Wert ausfüllt, und der Nutzer tippt alles von Hand. Ich nutze diesen Wert nur in Feldern wie Steuer-ID und IBAN, die der Browser ohnehin nicht kennt.

Stimmt die Tastatur, zeigt sich ein weiteres Problem: Die offene Tastatur verdeckt einen Teil des Screens. Damit Felder und Buttons bequem antippbar bleiben, siehe die Seite zum Tippbereich. Wann Fehlermeldungen erscheinen sollten, beschreibe ich auf der Seite zur Inline-Validierung.

Hinweis zur Barrierefreiheit

Das Kriterium 1.3.5 Eingabezweck bestimmen der WCAG 2.2 liegt auf Stufe AA. Gehört der Zweck eines Felds, das Angaben über den Nutzer sammelt, zu den im Standard aufgeführten Eingabezwecken, muss er programmatisch bestimmbar sein. Zu den ausreichenden Techniken des W3C gehört das HTML-Attribut autocomplete.

Das W3C sieht automatisches Ausfüllen als wichtige Erleichterung für Nutzer mit Gedächtnisproblemen oder Legasthenie, und Nutzer mit motorischen Einschränkungen tippen weniger. Die richtige Tastatur sehe ich als Teil derselben Arbeit. Alle Kriterien beschreibe ich im WCAG-Ratgeber.

autocapitalize ändert an einer physischen Tastatur nichts, es wirkt auf virtuelle Tastaturen und Methoden wie Spracheingabe. Laut MDN werden bei den Typen email, url und password Buchstaben ohnehin nicht großgeschrieben. Im E-Mail-Feld brauchen Sie autocapitalize deshalb nicht.

Checkliste

Bevor ein Formular live geht, tippe ich auf dem Handy jedes Feld einzeln an und gehe diese Liste durch.

• Das Telefonfeld hat type="tel", und die Telefontastatur öffnet sich.
• Das E-Mail-Feld hat type="email", und die E-Mail-Tastatur öffnet sich.
• In Feldern für Identifikationsnummer, Postleitzahl und Kartennummer steht kein type="number".
• Im Betragsfeld zeigt die Tastatur das Dezimaltrennzeichen.
• Felder mit persönlichen Angaben haben den richtigen autocomplete-Wert.
• Neben einem Feld mit pattern ist das Format in Textform beschrieben.
• Im letzten Feld trägt die Enter-Taste ein Label, das zum Abschließen passt.

Wenn ich diese Prüfung übernehmen soll: Der UX Audit enthält auch die mobilen Punkte. Wenn Sie selbst prüfen, beginnen Sie mit der UX-Audit-Checkliste.