Formulare auf verschiedenen Geräten und Plattformen testen

Es gibt verschiedene Möglichkeiten, ein Formular auszufüllen. Die Befragten können das Formular auf dem Smartphone verwenden, während sie in einem vollen Bus stehen, mit einem Screenreader oder auf einem alten Laptop. Sehen wir uns an, wie Sie dafür sorgen können, dass Ihr Formular auf verschiedenen Geräten und in unterschiedlichen Kontexten funktioniert.

Sicherstellen, dass das Formular für Tastaturnutzer funktioniert

Ein erster Test, um die Zugänglichkeit Ihres Formulars zu prüfen, besteht darin, das Formular nur über die Tastatur auszufüllen. Öffnen Sie das Formular und versuchen Sie, mit der Taste tab zu navigieren. Ist klar, welches Formularfeld derzeit aktiv ist? Mithilfe von Fokusindikatoren können Sie Nutzern zeigen, welches Formularfeld aktiv ist.

Jetzt ausprobieren Gehen Sie mit der tab-Taste zur Eingabe. Sehen Sie den Umriss, wenn die Eingabe aktiv ist? Das ist der Fokusindikator. Sie können Fokusanzeigen mit der CSS-Pseudoklasse :focus hinzufügen.

input:focus {
  outline: 4px solid #222;
}

Weitere Informationen zum Entwerfen von Fokusindikatoren für die Barrierefreiheit

Nutzern die Navigation durch das Formular erleichtern

Ein weiterer guter Test für Usability und Barrierefreiheit besteht darin, sicherzustellen, dass die logische TAB-Reihenfolge der visuellen TAB-Reihenfolge folgt. Wie können Sie die TAB-Reihenfolge testen? Navigieren Sie mit der Tabulatortaste komplett durch das Formular. Sind Ihnen unlogische Sprünge bei der Navigation aufgefallen? Achten Sie darauf, dass die DOM-Reihenfolge der visuellen Reihenfolge entspricht.

Weitere Informationen dazu, wie Sie dafür sorgen, dass die visuelle Reihenfolge auf der Seite der DOM-Reihenfolge entspricht

Nutzern beim Ausfüllen von Formularen auf Touchgeräten helfen

Sehr gut! Sie haben sich vergewissert, dass Ihr Formular mit der Tastatur funktioniert. Als Nächstes sehen wir uns an, wie Sie prüfen können, ob er auch auf Touch-Geräten wie Smartphones funktioniert.

Öffnen Sie das Formular auf dem Touchgerät, füllen Sie alle Felder aus und senden Sie das Formular ab. Mussten Sie mehrmals tippen, um eine Formularsteuerung auszuwählen? Möglicherweise sind die Tippbereiche zu klein. Achten Sie darauf, dass die Größe des Tippziels einer Schaltfläche mindestens 48 Pixel beträgt und jeder <input> und <select> groß genug ist, um auf sie zu tippen. Sie können Nutzern auch bei der Navigation durch das Formular auf Touchgeräten helfen, indem Sie genügend Abstand zwischen den Formularsteuerelementen einbauen.

Sicherstellen, dass Nutzer eine optimierte Tastatur erhalten

In den vorherigen Modulen haben Sie erfahren, wie Sie mithilfe der Attribute type oder inputmode eine andere Bildschirmtastatur aktivieren.

Öffnen Sie die Demo auf Ihrem Smartphone und tippen Sie in das Feld für die Telefonnummer. Standardmäßig werden auf der Bildschirmtastatur Zahlen sowie andere Zeichen angezeigt, die Sie für eine Telefonnummer benötigen. Mit type="tel" erhalten Sie eine Bildschirmtastatur, die für die Eingabe von Telefonnummern optimiert ist.

Zwei Screenshots eines Eingabeelements mit „type=&#39;tel&#39;“ auf iOS und Android, die zeigen, wie sich das „type“-Attribut auf die Bildschirmtastatur ändert.

Probieren Sie es mit einem Telefon selbst aus und prüfen Sie, ob Sie problemlos alle zum Ausfüllen einer Telefonnummer erforderlichen Zeichen eingeben können. Wenn Sie wissen möchten, wie die Bildschirmtastatur bei einem anderen type funktioniert, sehen Sie sich type="email" in der Demo an.

Formularschaltflächen dürfen nicht ausgeblendet sein

Stellen Sie sich vor, Sie haben ein langes Formular ausgefüllt und möchten es absenden. Aber wo ist die Schaltfläche Senden? Sie kann sich hinter der Symbolleiste des Browsers am unteren Bildschirmrand befinden. Eine Möglichkeit, sicherzustellen, dass Schaltflächen sichtbar sind, ist die Verwendung der CSS-Funktion env(). Hier erfahren Sie, wie Sie dafür sorgen, dass Schaltflächen nicht durch die Benutzeroberfläche des Geräts verdeckt werden.

Sicherstellen, dass Ihr Formular auf verschiedenen Plattformen funktioniert

Testen Sie Ihre Formulare auf so vielen Geräten wie möglich. Sie haben einen alten Laptop? Öffnen Sie den Standardbrowser und testen Sie das Formular. Ihr Freund hat ein Tablet? Sie können das Formular auch ausleihen und dort testen.

Sehen einige Stile in einem Browser anders aus? In einem späteren Modul erfahren Sie, wie Sie dafür sorgen, dass Ihre Stile plattformübergreifend funktionieren.

BrowserStack bietet kostenlose Testkonten für Open-Source-Projekte und Browserling bietet eine kostenlose Testversion mit verschiedenen Browsern, Geräten und Betriebssystemen.

Nutzern helfen, Ihre Formulare in unterschiedlichen Kontexten auszufüllen

Nutzer verwenden nicht nur unterschiedliche Browser, Geräte und Betriebssysteme. Nutzer verwenden Ihre Formulare auch in unterschiedlichen Kontexten. Probier es gleich aus! Sonnenscheint gerade die Sonne nach draußen? Nimm dein Smartphone mit nach draußen. Wenn Sie Ihr Formular bei hellem Licht verwenden, können Sie gut testen, ob Kontrastverhältnisse geeignet sind.

Weitere Informationen zur Barrierefreiheit von Farbe und Kontrast

Prüfen, ob das Formular bei schlechter Verbindung funktioniert

Angenommen, Sie sind mit dem Zug an einen Ort reisen. Sie öffnen eine Webseite auf Ihrem Smartphone. Du fragst dich, wie lange das Laden einer Website so lange dauern kann ICANN.

Mit WebPageTest oder den DevTools können Sie langsame Verbindungen und verschiedene Netzwerktypen simulieren.

Weitere Informationen zu Tests mit niedriger Bandbreite und hoher Latenz

Nutzern die Nutzung Ihres Formulars ermöglichen, wenn sie unterwegs sind

Stellen Sie sich vor, Sie laufen zu einem Termin. Plötzlich klingelt Ihr Telefon, Sie nehmen den Anruf entgegen und werden gleichzeitig von Ihrer Versicherungsgesellschaft aufgefordert, das von Ihnen begonnene Antragsformular auszufüllen. Sie öffnen das Formular und versuchen, es auszufüllen, während Sie noch gehen und sprechen.

Denken Sie daran, dass Ihre Formulare in vielen verschiedenen Kontexten verwendet werden. In stressigen Situationen, während Sie andere Dinge tun oder unterwegs. Sie können Nutzenden helfen, indem Sie sicherstellen, dass Ihr Formular nutzerfreundlich ist.

Legen Sie ein Zeitlimit für das Ausfüllen des Formulars fest. Versuchen Sie, fehlerhafte Bedingungen zu simulieren, damit Ihr Formular getestet werden kann.

Vergiss nicht, die Testergebnisse zu teilen

Dokumentieren Sie alle Tests und teilen Sie die Ergebnisse mit Ihrem Team. Das hilft bei der Priorisierung der umzusetzenden Maßnahmen, damit alle Teammitglieder über die wichtigsten

Weitere Informationen zum Teilen von Testergebnissen

Wissen testen

Testen Sie Ihr Wissen über plattformübergreifende Tests

Können Fokusanzeigen nur für Tastaturnutzer angezeigt werden?

Nein
Versuch es noch einmal.
Ja, mit :focus-visible.
🎉
Ja, mit :focus-detected.
Versuch es noch einmal.
Ja, mit :focus-shown.
Versuch es noch einmal.

Ressourcen