Construire les interfaces et vérifier leur comportement dans le navigateur.
Ces fiches décrivent des activités et des exercices pédagogiques. Elles ne constituent ni des offres d’emploi, ni des parcours certifiants, ni des promesses de recrutement.
Toutes les fiches métiers
Implémenter l’interface exécutée par le navigateur : structure HTML, présentation et interactions. Le front-end relie les contenus et les services aux actions du visiteur, avec une attention aux performances et à l’accessibilité.
La validation dans le navigateur améliore l’usage mais ne sécurise pas seule les données. Le back-end reste responsable des contrôles serveur ; les contrats d’API et les messages d’erreur se définissent ensemble.
Développer un formulaire dont le parcours fonctionne au clavier, avec réponse lente et erreur serveur simulée.
Ce repère éditorial décrit des activités fréquentes. Les intitulés et périmètres varient selon les équipes ; il ne constitue pas un référentiel de certification.
W3C : organiser les responsabilités d’accessibilité dans une équipe
Créer un filtre de catalogue utilisable au clavier et partageable par une URL.
Travaillez sur une copie ou un environnement de démonstration. Définissez les données utilisées et le résultat attendu avant de commencer. Conservez vos décisions et les difficultés rencontrées afin de pouvoir expliquer la démarche.
Une interface fonctionnelle, des tests de parcours et une documentation des composants.
Une tâche complète réussit avec différentes entrées et les erreurs restent accessibles.
Pour chaque contrôle, notez le contexte, l’action, le résultat attendu et ce qui a été observé. Distinguez une vérification réussie d’une hypothèse restant à confirmer. Une autre personne doit pouvoir comprendre le livrable sans assister à toute sa fabrication.
Préparer les vérifications du siteUn fonctionnement à la souris sur un seul écran ne suffit pas. L’interface doit annoncer ses changements et préserver un état compréhensible.
Collaboration à explorer : Design UI.
Précisez le partage des responsabilités : qui fournit les informations, qui tranche, qui vérifie et qui entretient le résultat. Un bon passage de relais conserve les contraintes et les décisions, pas seulement le fichier final.
Emploi, métiers et formationsPermettre de retrouver une sélection après un changement de filtre.
Le comportement doit être vérifié sur la page intégrée ; un composant isolé ne couvre pas toutes les interactions.
Pour présenter ce travail, précisez le contexte, votre rôle, les éléments fournis par d’autres et la version examinée. Un exemple de démonstration doit être identifiable comme tel. La personne qui relit doit pouvoir retrouver le besoin, comprendre la décision et reproduire le contrôle sans deviner les étapes manquantes.
Joignez une page qui montre chargement, résultat vide, erreur et réussite. Décrivez le comportement en cas de réponse tardive et vérifiez que l’utilisateur peut reprendre sa tâche sans perdre une saisie utile.
Examinez une fonction visible dans les conditions ordinaires et dégradées. Le livrable doit expliquer son comportement au clavier, sur petit écran et quand une dépendance ne répond pas.
| Compétence | Preuve à examiner | Erreur à repérer |
|---|---|---|
| Sémantique | Les contrôles utilisent des éléments adaptés et des noms compréhensibles. | Un élément cliquable ne fonctionne pas au clavier. |
| Résilience | Les états de chargement, vide et erreur sont reproductibles. | Une erreur réseau laisse une interface bloquée sans explication. |
| Maintenance | Le changement est localisé, les dépendances et vérifications sont connues. | Une correction du composant casse ses autres occurrences. |
Testez le même composant avec JavaScript indisponible lorsqu’un parcours de base est prévu, puis avec une requête lente. Séparez le comportement attendu de la défaillance réellement constatée et corrigez le point qui bloque l’utilisateur.
Exercice approfondi : intégrez une liste filtrable comportant des cartes avec titres, photos et liens. Le HTML doit rester compréhensible avant l’exécution du JavaScript. Testez un titre très long, aucune réponse, une connexion lente et une langue qui s’écrit de droite à gauche. Utilisez des images adaptées à leur taille affichée et des dimensions déclarées. Vérifiez l’ordre du focus après une action : la mise à jour de la liste ne doit pas perdre le contexte de la personne qui cherche.
Ces critères sont une base de travail à adapter au contexte. Pour chacun, notez l’action effectuée, le résultat attendu, le résultat observé et les informations restant à confirmer.
Documentez les dépendances, les commandes utiles et les décisions de structure. Gardez les données de test qui reproduisent les cas longs, vides et multilingues. Lors du passage de relais, expliquez comment ajouter une carte et quelles vérifications relancer. Un rendu correct dans un seul navigateur ne suffit pas à conclure sur toutes les conditions d’usage ; indiquez les environnements effectivement contrôlés.
Choisissez le niveau d’interactivité selon la tâche. Une page lisible et une application riche ne nécessitent pas les mêmes dépendances, états ou conditions de chargement.
Un rendu à une seule largeur ne valide pas les composants. Les contenus longs, zooms, traductions et données absentes modifient la disposition.
Testez la même tâche au clavier, sur petit écran et avec interruption réseau. Fournissez une méthode pour reproduire les erreurs observées.
Il permet de montrer une démarche et ses limites. Il ne constitue ni un diplôme, ni une certification, ni la preuve d’une expérience de production.
Précisez qu’il s’agit d’un exercice, votre rôle, les contraintes, les décisions et les vérifications. Utilisez des données de test et des médias dont les droits sont établis.
Une tâche complète réussit avec différentes entrées et les erreurs restent accessibles. Ajoutez les difficultés rencontrées et ce qui reste à vérifier plutôt que de présenter une validation absolue.
Il peut fournir des conventions utiles, mais la structure, les libellés et comportements dépendent de la réalisation. Vérifiez le parcours final avec ses données, états d’erreur et adaptations d’écran. Le choix d’un outil ne remplace pas ces contrôles.
