Choisir et tester les composants d’une interface web

Partir de la tâche plutôt que de la maquette

Écrivez la tâche en une phrase : consulter les conditions, choisir une commune, comparer des offres ou confirmer une suppression. Précisez ensuite ce que l’action change : une adresse, un contenu affiché, une valeur saisie ou des données enregistrées. Cette distinction aide à choisir entre lien, bouton, champ et fenêtre de dialogue.

Commencez par la présentation la plus simple qui répond au besoin. Une liste de liens peut suffire là où une navigation complexe ajouterait des interactions. Une information nécessaire à tous peut rester visible. Le nombre de clics ne constitue pas, à lui seul, une mesure de la facilité du parcours.

Décrire un contrat de comportement

Pour chaque composant, notez son nom visible, ses états, les actions possibles et la destination du focus. Les pratiques ARIA du W3C expliquent qu’un rôle annoncé implique un comportement : ajouter un attribut ARIA ne fournit pas les interactions. Privilégiez les éléments HTML natifs quand ils répondent au besoin.

Préparez les cas hors démonstration : texte long, absence de donnée, délai, annulation, erreur et modification simultanée. Le contrat précise ce qui est sauvegardé et ce qui reste provisoire. Une personne qui valide la maquette doit pouvoir distinguer une demande envoyée d’une simple animation du bouton.

Choisir une fiche selon la décision à prendre

Les fiches suivantes décrivent des décisions différentes : montrer un complément, changer de vue, sélectionner une valeur, gérer une interruption, lire des données ou réordonner des éléments. Elles complètent le guide général d’accessibilité sans constituer une certification du site.

Après le choix, inscrivez une tâche et un résultat attendu dans le carnet de recette. Testez une occurrence réelle, puis les variantes du composant dans un formulaire, un catalogue et une page traduite. Un correctif dans le modèle partagé doit être vérifié dans ces contextes.

• Concevoir et tester une fenêtre de dialogue modale

  Décider quand interrompre une tâche, organiser ouverture, fermeture et retour du focus, puis tester un dialogue long ou une erreur.

• Organiser les contenus avec des accordéons et des détails

  Choisir ce qui reste visible, nommer les panneaux, gérer plusieurs sections ouvertes et vérifier les liens vers un contenu replié.

• Choisir et tester des onglets dans une interface web

  Distinguer onglets, navigation et sections visibles, gérer activation et chargement, puis préserver les données de chaque panneau.

• Concevoir une autocomplétion pour choisir une valeur

  Distinguer texte libre et sélection, gérer les réponses retardées et les homonymes, puis tester le clavier et l’absence de suggestion.

• Choisir et tester un carrousel ou une galerie d’images

  Comparer galerie et carrousel, garder le contrôle du défilement et vérifier images masquées, commandes, légendes et chargement.

• Concevoir une navigation mobile et ses sous-menus

  Séparer liens et ouverture des rubriques, décider du panneau mobile et tester clavier, fermeture, zoom et changements de largeur.

• Rédiger et annoncer les messages d’état d’une interface

  Distinguer attente, réussite, erreur et résultat vide, annoncer les mises à jour et garder une trace durable des actions importantes.

• Publier des tableaux de données lisibles et accessibles

  Structurer les en-têtes, unités et valeurs manquantes, choisir le tri et l’affichage mobile, puis contrôler lecture et export des données.

• Choisir les liens, boutons et actions d’une interface

  Distinguer navigation et action, écrire des libellés utiles et gérer envoi, indisponibilité, annulation et prévention des doubles demandes.

• Concevoir une saisie de date et un calendrier de réservation

  Distinguer date civile, horaire et disponibilité, choisir saisie ou calendrier, gérer formats et vérifier la confirmation de réservation.

• Permettre de réordonner des éléments sans glisser-déposer

  Compléter le déplacement par des commandes simples, préserver le focus, annoncer la nouvelle position et gérer sauvegarde et annulation.

Comparer deux solutions sur une même tâche

Exemple pédagogique : une équipe hésite entre trois onglets et trois sections visibles pour présenter des offres. Elle demande de retrouver une condition puis de comparer deux prestations sur téléphone. Elle observe les retours en arrière, les détails oubliés et la possibilité de partager la bonne information. Si les visiteurs ont besoin de lire les trois parties ensemble, les sections visibles peuvent être plus adaptées.