Tester des formulaires sur plusieurs appareils et plates-formes

Vous pouvez remplir un formulaire de différentes manières. Les utilisateurs peuvent utiliser votre formulaire sur leur smartphone lorsqu'ils sont dans un bus bondé, avec un lecteur d'écran ou depuis un vieil ordinateur portable. Voyons comment faire en sorte que votre formulaire fonctionne sur différents appareils et dans différents contextes.

Vérifier que votre formulaire fonctionne pour les utilisateurs de clavier

Pour vous assurer que votre formulaire est accessible, un premier test consiste à le remplir en utilisant uniquement votre clavier. Ouvrez votre formulaire et essayez de naviguer avec la touche tab. Le champ de formulaire actif est-il clair ? Pour aider les utilisateurs à comprendre quel champ de formulaire est actif, vous pouvez utiliser des indicateurs de sélection.

Essayer Utilisez la touche tab pour accéder à l'entrée. Le contour s'affiche-t-il lorsque l'entrée est active ? Il s'agit de l'indicateur de mise au point. Vous pouvez ajouter des indicateurs de sélection à l'aide de la pseudo-classe CSS :focus.

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

Découvrez comment concevoir des indicateurs de concentration accessibles.

Aider les utilisateurs à naviguer dans votre formulaire

Un autre bon test de la facilité d'utilisation et de l'accessibilité consiste à s'assurer que l'ordre de tabulation logique suit l'ordre de tabulation visuel. Comment pouvez-vous tester l'ordre de tabulation ? Utilisez la touche de tabulation pour parcourir le formulaire. Avez-vous remarqué des sauts de navigation illogiques ? Assurez-vous que l'ordre DOM correspond à l'ordre visuel.

Découvrez comment s'assurer que l'ordre visuel sur la page respecte l'ordre du DOM.

Aider les utilisateurs à remplir le formulaire sur les appareils tactiles

Parfait. Vous vous êtes assuré que votre formulaire fonctionne avec le clavier. Voyons maintenant comment vous pouvez vous assurer qu'elle fonctionne également sur les appareils tactiles tels que les téléphones mobiles.

Ouvrez le formulaire sur votre appareil tactile, remplissez tous les champs et envoyez le formulaire. Avez-vous dû appuyer plusieurs fois pour sélectionner une commande de formulaire ? Le problème peut être dû au fait que les zones cliquables sont trop petites. Assurez-vous que la taille de l'élément tactile d'un bouton est d'au moins 48 pixels, et que chaque élément <input> et <select> est suffisamment grand pour que l'utilisateur puisse y appuyer. Vous pouvez également aider les utilisateurs à parcourir votre formulaire sur les appareils tactiles en ajoutant un espace suffisant entre les commandes de formulaire.

S'assurer que les utilisateurs disposent d'un clavier optimisé

Dans les modules précédents, vous avez appris à activer un autre clavier à l'écran à l'aide des attributs type ou inputmode.

Ouvrez la démonstration sur votre téléphone et appuyez sur le champ du numéro de téléphone. Notez que les chiffres sont affichés par défaut sur le clavier à l'écran, avec d'autres caractères dont vous pouvez avoir besoin pour un numéro de téléphone. Utilisez type="tel" pour obtenir un clavier à l'écran optimisé pour la saisie des numéros de téléphone.

Utilisez un téléphone pour essayer cette fonctionnalité par vous-même et voyez si vous pouvez facilement saisir tous les caractères d'un numéro de téléphone. Pour savoir comment fonctionne le clavier à l'écran avec un autre type, essayez type="email" dans la démonstration.

Assurez-vous que les boutons du formulaire ne sont pas masqués

Imaginez que vous avez rempli un formulaire long et que vous êtes prêt à l’envoyer. Mais où se trouve le bouton Envoyer ? Il peut se trouver derrière la barre d'outils du navigateur, en bas de l'écran. Pour vous assurer que les boutons sont visibles, utilisez la fonction CSS env(). Découvrez comment vous assurer que les boutons ne sont pas masqués par les interfaces utilisateur des appareils.

Vérifier que votre formulaire fonctionne sur différentes plates-formes

Essayez de tester vos formulaires sur autant d'appareils que possible. Vous avez un vieil ordinateur portable ? Ouvrez le navigateur par défaut et testez votre formulaire. Votre ami possède une tablette ? Empruntez-le et testez-y votre formulaire également.

Certains styles s'affichent-ils différemment dans un navigateur ? Vous découvrirez comment vous assurer que les styles fonctionnent sur toutes les plates-formes dans un module ultérieur.

BrowserStack propose des comptes de test sans frais pour les projets Open Source, tandis que Browserling propose un essai sans frais pour effectuer des tests sur différents navigateurs, appareils et systèmes d'exploitation.

Aider les utilisateurs à remplir vos formulaires dans différents contextes

Les gens n'utilisent pas seulement différents navigateurs, appareils et systèmes d'exploitation. Les internautes utilisent aussi vos formulaires dans différents contextes. Essayez ! Est-ce qu'il y a du soleil en ce moment ? Prenez votre téléphone et sortez. L'utilisation de votre formulaire à la lumière vive est un bon moyen de tester si les rapports de contraste sont utilisables.

En savoir plus sur l'accessibilité des couleurs et des contrastes

Vérifier que votre formulaire fonctionne avec une mauvaise connectivité

Imaginons que vous voyagez en train. Vous ouvrez une page Web sur votre téléphone. Vous vous demandez comment le chargement d'un site Web peut prendre si longtemps xxxxxx.

Vous pouvez simuler des connexions lentes et différents types de réseaux avec WebPageTest ou DevTools.

Apprenez-en plus sur les tests avec une bande passante faible et une latence élevée.

Aider les utilisateurs à se servir de votre formulaire lorsqu'ils sont en déplacement

Imaginez que vous vous rendez à un rendez-vous à pied. Soudain, votre téléphone sonne, vous répondez à l'appel et, dans le même temps, vous recevez une alerte de votre compagnie d'assurances vous invitant à remplir le formulaire de demande que vous avez commencé. Vous ouvrez le formulaire et essayez de le remplir tout en marchant et en parlant.

N'oubliez pas que les internautes utilisent vos formulaires dans de nombreux contextes différents. Dans les situations stressantes, tout en faisant autre chose pendant un déplacement. Vous pouvez aider les utilisateurs en veillant à ce que votre formulaire soit facile à utiliser.

Essayez de vous fixer une limite de temps pour remplir votre formulaire. Essayez de simuler des conditions imparfaites pour pouvoir tester votre formulaire.

Veillez à partager les résultats des tests

Documentez tous les tests et partagez les résultats avec votre équipe. Cela aidera à hiérarchiser les éléments d'action, pour vous assurer que tous les membres de votre équipe sont conscients des tâches les plus importantes.

En savoir plus sur le partage des résultats des tests

Testez vos connaissances

Tester vos connaissances sur les tests multiplates-formes

Ressources

• WebPageTest: tests de performance du site Web et d'optimisation
• Tests avec une bande passante faible et une latence élevée
• Partager les résultats des tests