Chapitre 138 minDébutant
Aide-mémoire : checklist ergonomie et accessibilité
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- retrouver vite un critère, une heuristique ou un seuil ;
- vérifier un écran avant de le livrer ou de le présenter.
Cet aide-mémoire rassemble ce qu'il faut retrouver vite pendant un projet ou la veille de l'épreuve : les définitions, les critères de Bastien et Scapin, les heuristiques de Nielsen, les seuils des WCAG, le calcul du SUS, les règles des formulaires et la checklist à passer sur un écran avant de le livrer. Chaque tableau renvoie au chapitre qui l'explique.
Les définitions
| Terme | Définition courte | Chapitre |
|---|---|---|
| IHM | Les moyens matériels et logiciels par lesquels une personne utilise un système ; la discipline qui les étudie | 1 |
| Utilisabilité (ISO 9241-11) | Le degré auquel des utilisateurs identifiés atteignent des buts définis avec efficacité, efficience et satisfaction, dans un contexte donné | 1 |
| UX | Ce que vit l'utilisateur avant, pendant et après l'usage | 1 |
| UI | La partie visible et manipulable de l'interface | 1 |
| Persona | Un utilisateur type, construit à partir de données réelles | 4 |
| Parcours utilisateur | Les étapes, émotions et irritants d'un persona pour atteindre un but | 4 |
| Wireframe, maquette, prototype | La structure, l'apparence, le fonctionnement | 5 |
| Évaluation heuristique | Une inspection de l'interface par 3 à 5 évaluateurs avec une grille | 8 |
| Test utilisateur | L'observation de vrais utilisateurs qui réalisent des tâches, sans aide | 8 |
Les 8 critères de Bastien et Scapin
| Critère | Critères élémentaires | Question à se poser |
|---|---|---|
| 1. Guidage | Incitation ; groupement et distinction (localisation, format) ; feedback immédiat ; lisibilité | L'utilisateur sait-il où il est, quoi faire, ce qui s'est passé ? |
| 2. Charge de travail | Brièveté (concision, actions minimales) ; densité informationnelle | Lui fais-je lire, taper ou cliquer plus que nécessaire ? |
| 3. Contrôle explicite | Actions explicites ; contrôle utilisateur | Le système ne fait-il que ce qu'on lui demande ? Peut-on annuler ? |
| 4. Adaptabilité | Flexibilité ; prise en compte de l'expérience | Le débutant et l'habitué sont-ils servis tous les deux ? |
| 5. Gestion des erreurs | Protection ; qualité des messages ; correction | Les erreurs sont-elles évitées, expliquées, réparables ? |
| 6. Homogénéité et cohérence | — | Les mêmes choses ont-elles la même forme partout ? |
| 7. Signifiance des codes et dénominations | — | Les mots et les icônes disent-ils ce qu'ils font, dans la langue de l'utilisateur ? |
| 8. Compatibilité | — | L'interface respecte-t-elle les habitudes, la tâche réelle et les autres outils ? |
Les 10 heuristiques de Nielsen
| N° | Heuristique | Critère de Bastien et Scapin proche |
|---|---|---|
| 1 | Visibilité de l'état du système | Feedback immédiat |
| 2 | Correspondance avec le monde réel | Compatibilité, signifiance |
| 3 | Contrôle et liberté de l'utilisateur | Contrôle utilisateur, correction des erreurs |
| 4 | Cohérence et standards | Homogénéité |
| 5 | Prévention des erreurs | Protection contre les erreurs |
| 6 | Reconnaissance plutôt que rappel | Charge de travail, incitation |
| 7 | Flexibilité et efficacité d'utilisation | Adaptabilité |
| 8 | Esthétique et design minimaliste | Densité informationnelle, lisibilité |
| 9 | Reconnaître, diagnostiquer et réparer les erreurs | Qualité des messages, correction |
| 10 | Aide et documentation | Incitation |
Les lois et les seuils
| Loi ou repère | Ce qu'il faut retenir |
|---|---|
| Loi de Fitts | Indice de difficulté ID = log2(D / L + 1) : grandes cibles, proches, pour les actions fréquentes ; l'action dangereuse à l'écart |
| Loi de Hick | Le temps de choix croît avec le logarithme du nombre d'options : montrer les choix utiles à l'étape en cours |
| Loi de Jakob | Les utilisateurs connaissent les conventions des autres applications : les suivre |
| Proximité et similarité (Gestalt) | Ce qui est proche ou se ressemble est perçu comme un groupe : le libellé collé à son champ, les badges différents des boutons |
| Temps de réponse | Moins de 0,1 s : instantané ; jusqu'à 1 s : fluide ; au-delà, un indicateur ; au-delà de 10 s, une progression et l'annulation |
Les seuils d'accessibilité (WCAG 2.2, niveau AA)
| Exigence | Seuil | Critère |
|---|---|---|
| Contraste du texte courant | 4,5:1 | 1.4.3 |
| Contraste du grand texte (24 px, ou 18,66 px en gras) | 3:1 | 1.4.3 |
| Contraste des composants (contours, icônes utiles, focus) | 3:1 | 1.4.11 |
| Taille des cibles | 24 × 24 px au minimum ; 44 à 48 px conseillés au toucher | 2.5.8 |
| Zoom | Lisible à 200 % | 1.4.4 |
| Redistribution | Pas de défilement horizontal à 320 px de large | 1.4.10 |
| Couleur | Jamais le seul moyen de transmettre une information | 1.4.1 |
| Focus | Toujours visible, jamais entièrement masqué | 2.4.7, 2.4.11 |
| Glisser-déposer | Une alternative en clics | 2.5.7 |
| Connexion | Pas de test cognitif ; copier-coller autorisé | 3.3.8 |
Rapport de contraste = (L_claire + 0,05) / (L_foncée + 0,05), avec L la luminance relative (chapitre 7).
| Texte | Obligation en France (novembre 2026) |
|---|---|
| Article 47 de la loi du 11 février 2005 | Services publics et entreprises de plus de 250 M€ de chiffre d'affaires en France : RGAA (version 4.1.2 en vigueur, RGAA 5 annoncé pour fin 2026), déclaration d'accessibilité |
| European Accessibility Act (directive (UE) 2019/882) | Depuis le 28 juin 2025 : commerce en ligne, banque, transport, livres numériques, communications électroniques, sites et applications mobiles ; microentreprises de services exemptées |
Le questionnaire SUS
affirmations impaires (1, 3, 5, 7, 9) : note − 1
affirmations paires (2, 4, 6, 8, 10) : 5 − note
score = somme des 10 contributions × 2,5 (de 0 à 100)
moins de 51 : 15 % les plus bas 68 : moyenne plus de 80,3 : 10 % les meilleurs
Un score SUS n'est pas un pourcentage. Il se compare : deux versions, ou l'application et celle qu'elle remplace (chapitre 8).
| Test utilisateur | Repère |
|---|---|
| Participants | 5 par profil pour trouver les problèmes ; plutôt 3 tests de 5 qu'un test de 15 |
| Part des problèmes trouvés | 1 − (1 − 0,31)^n : 67 % pour 3, 84 % pour 5 |
| Gravité (Nielsen) | 0 pas un problème ; 1 esthétique ; 2 mineur ; 3 majeur ; 4 catastrophe |
| Consignes | Un but et un contexte, jamais le nom des boutons |
Les formulaires et les messages
| Règle | En pratique |
|---|---|
| Moins de champs | Ne pas redemander ce qu'on sait ; minimisation des données (RGPD) |
| Une colonne, libellés au-dessus | Ordre de la tâche ; groupes nommés (fieldset, legend) |
| Un libellé visible par champ | Le placeholder n'est pas un libellé |
| L'aide avant l'erreur | Format, limite, exemple, sous le libellé |
| Le bon type de champ | Date : sélecteur ; 2 à 5 options : radio ; codes et téléphones : texte avec inputmode |
| Valider au bon moment | Sortie d'un champ rempli ; envoi ; serveur toujours |
| Message d'erreur | Visible (sous le champ), explicite, constructif, courtois, pas seulement en couleur |
| Ne rien perdre | Saisie conservée après une erreur |
| Un seul bouton principal | Verbe et objet : « Confirmer la réservation » |
| Pas d'interface trompeuse | Pas de case pré-cochée pour un consentement ; refuser aussi simple qu'accepter |
La checklist d'un écran avant livraison
- Le titre dit ce qu'on fait sur l'écran ; on sait où l'on est dans l'application.
- Les libellés, les boutons et les messages sont dans la langue des utilisateurs, sans code ni jargon.
- Les données inutiles à la tâche sont absentes ou repliées.
- Chaque action donne un retour ; une attente de plus d'une seconde affiche un indicateur.
- Les erreurs probables sont empêchées ; les autres ont un message utile, sous le champ ; la saisie est conservée.
- L'irréversible demande une confirmation ; le reste peut s'annuler.
- Les états chargement, vide, erreur et succès existent.
- Les composants, couleurs, libellés et emplacements sont ceux du reste de l'application.
- Les contrastes atteignent 4,5:1 (texte) et 3:1 (composants) ; l'information ne repose jamais sur la seule couleur.
- Tout se fait au clavier, dans l'ordre de lecture, avec un focus visible.
- Les cibles tactiles font au moins 44 pixels ; l'écran fonctionne à 360 px de large et à 200 % de zoom.
- Les images utiles ont un texte alternatif, les boutons-icônes un nom.
- Le serveur revérifie toutes les règles.
- La maquette validée, les critères d'acceptation et l'écran codé disent la même chose.