JOUR 4 — Accessibilité appliquée + Fichier Figma “Pro”

Ce cours fait l’objet d’une présentation complète en diaporama. Le contenu de la page est un rappel plutôt synthétique.

Il existe un autre cours complet dédié uniquement à l’Accessibilité

Objectifs pédagogiques

• Comprendre comment intégrer concrètement l’accessibilité dans les maquettes.
• Savoir évaluer une maquette (audit UI / accessibilité) avec des outils.
• Apprendre à corriger des écrans non accessibles.
• Structurer un fichier Figma de manière professionnelle (pour un vrai projet).
• Préparer le mini-projet final (Jour 4 et 5).

---

1. Rappel : pourquoi l’accessibilité dès le design ?

L’accessibilité, ce n’est pas seulement :

• des alt sur les images
• des labels dans le HTML
• du ARIA

C’est aussi :

• des couleurs lisibles
• une hiérarchie claire
• des zones cliquables suffisantes
• des messages compréhensibles
• une navigation simple et logique au clavier et avec d’autres moyens

---

1.1. Quelques profils à garder en tête

• Personne malvoyante (contrastes faibles = illisible)
• Personne daltonienne (rouge/vert confondus)
• Personne avec tremblements (petits boutons injouables)
• Personne dyslexique (alignements, polices, gros blocs, difficulté)
• Personne stressée / fatiguée (surcharge cognitive)

Un bon design accessible facilite la vie de tout le monde, pas seulement des personnes en situation de handicap.

---

2. Checklist d’accessibilité pour maquettes

2.1. Couleurs & contrastes

• Contraste suffisant texte / fond (au moins AA).
• Pas seulement la couleur pour transmettre une information (il faut ajouter des icônes, du texte, des motifs,…)

---

2.2. Typographie

• Taille de texte confortable (16px minimum pour le body, c’est de plus en plus courant).
• Interligne suffisant (1.4 à 1.6).
• Si possible, utiliser des polices spécifiques lisbles par tout le monde (dislexiques)
• Éviter :
  • tout en MAJUSCULE sur de longues phrases
  • textes trop condensés

---

2.3. Composants interactifs

• Boutons et zones cliquables : minimum 44 x 44.
• Focus visible (dans le design UI, on peut déjà prévoir un état “focus”).
• Libellés explicites : “Valider le paiement” > “Valider”.

---

2.4. Structure & hiérarchie

• Titres clairement hiérarchisés (visuellement).
• Groupes cohérents (sections visuelles).
• Parcours simple, pas plus d’options que nécessaire.

---

2.5. Contenu

• Texte clair, concret, sans jargon.
• Messages d’erreur utiles :
  • Mot de passe incorrect
  • Votre mot de passe doit contenir au moins 8 caractères, dont un chiffre.
• Instructions visibles avant l’action.

---

3. TP 1 — Corriger une maquette non accessible

---

Objectif

On peut partir d’une maquette volontairement mauvaise et la transformer en version accessible & propre. En fait, on va découvrir différents sites (Libération, leMonde, autre, du point de vue accessibilité)

---

Étapes du TP

1. Recréer la maquette non accessible dans Figma (ou utiliser une maquette existante).
2. Lister les problèmes (5 minimum) :
   • Couleurs
   • Contraste
   • Tailles
   • Espacement
   • Formulation
3. Pour chaque problème, indiquer :
   • Le problème
   • Le type d’utilisateur impacté
   • La correction proposée
4. Créer une deuxième version de la maquette :
   • couleurs corrigées
   • zones cliquables agrandies
   • contenu réécrit
   • hiérarchie clarifiée

---

4. Audit d’interface : apprendre à voir les problèmes (45 min)

4.1. Champs principaux de l’audit

• Informations générales
• Résumé global
• Couleurs & contrastes
• Typographie
• Composants interactifs
• Parcours utilisateur
• Contenu & messages
• Priorisation (urgent / important / à planifier)

---

5. Structurer un fichier Figma

---

5.1. Pages recommandées

Rappel / consolidation :

00 - Cover / Moodboard
01 - UX Research
02 - Personas /User Journey
03 - Wireframes
04 - UI Kit / Design System
05 - Maquettes HD
06 - Prototype
07 - Accessibilité / Notes

5.2. Documentation dans Figma

• Utiliser les notes / commentaires.
• Ajouter une page “README” dans le fichier Figma.
• Expliquer :
  • comment utiliser les composants
  • les règles d’accessibilité appliquées
  • les contraintes projet

---

6. Préparation du mini-projet final

Projet en groupe : Reprise du projet Handya11y (sur le handicap)

• Concevoir une mini-application (web ou mobile).
• Produire :
  • Personas
  • User Journey
  • Wireframes
  • Maquettes HD
  • Prototype Figma
  • Corrections d’accessibilité
  • Mini audit UI/Accessibilité

---

6.1. Autres Thèmes possibles

• Application de gestion d’emploi du temps étudiant
• Appli de réservation de terrains de sport
• Mini plateforme de covoiturage local
• Application de gestion de budget étudiant
• Appli météo des transports (retards, conditions…)

Uniquement si nous avons le temps.

---

6.2. Constitution des équipes

• Groupes de 3–4.
• Rôles répartis :
  • 1 UX lead
  • 1 UI lead
  • 1 accessibilité / QA
  • 1 prototypage” (si groupe de 4)

---

7. Travail à présenter

Pour chaque groupe :

Poursuite du travail sur le projet et finalisation.

• Prendre les personas de Orange
• Elaborer un User Journey simple
• 1 écran wireframe
• 1 écran HD (première version)
• 1 liste de contraintes d’accessibilité à respecter

---