Formation accessibilité pour designers et UX
Une part importante des non-conformités se décide en maquette, avant qu'une ligne de code ne soit écrite. Un contraste trop faible, un indicateur de focus supprimé, une cible trop petite, une information portée par la couleur seule : autant de décisions de design que le développement ne fera que traduire fidèlement.
Le programme
| Séquence | Contenu |
|---|---|
| Voir le problème | Démonstration au lecteur d'écran, en navigation clavier et au zoom sur vos maquettes livrées |
| Contrastes | Seuils, calcul, cas limites : texte sur photo, dégradé, transparence, thème sombre |
| États de focus | Spécifier le focus comme on spécifie le survol : forme, épaisseur, décalage, couleur |
| Couleur et information | Ne jamais porter une information par la couleur seule : erreurs, statuts, graphiques |
| Cibles et espacement | Taille minimale, séparation des actions aux conséquences différentes |
| Zoom et reflow | Ce qui casse à 200 %, les hauteurs fixes, l'espacement du texte personnalisable |
| Spécifier pour le développement | Ce qu'une maquette doit documenter : états, comportement clavier, ordre de parcours |
La séquence décisive : l'état de focus
Supprimer l'indicateur de focus par défaut parce qu'il « abîme le design » est la non-conformité la plus répandue du web. Elle se décide en maquette, se propage à tout le site, et rend la navigation clavier impraticable.
La bonne pratique est simple : spécifier le focus au même titre que le survol, avec un contraste d'au moins 3:1 contre le fond et contre la surface. Voir la navigation au clavier.
Le mythe qu'on traite en ouverture
« L'accessibilité va abîmer le design. » Le référentiel ne dicte ni typographie, ni grille, ni identité visuelle. Il fixe des seuils de contraste et impose un focus visible. Tout le reste est un problème de méthode, pas d'esthétique.
La démonstration se fait sur des interfaces réputées bien conçues et par ailleurs conformes — il en existe beaucoup, et c'est l'argument le plus efficace.
Ce que la journée produit
L'objectif n'est pas de former à des règles, mais de faire produire un livrable réutilisable : une page de votre système de design documentant les jetons de couleur avec leur rapport de contraste calculé, et la spécification des états de focus.
C'est ce document qui empêchera le problème de se reproduire sur les écrans suivants. Voir le design system accessible.
Le volet UX
Au-delà des critères, une demi-séquence porte sur ce que la grille ne mesure pas : la longueur d'un parcours au clavier, la clarté d'un message d'erreur, la prévisibilité d'une interface. Un site peut être conforme et rester pénible — voir l'audit utilisateur.
Modalités
- Une journée, sur vos maquettes et votre système de design.
- Groupes de 4 à 10 personnes.
- Vérificateur de contraste installé, et un lecteur d'écran pour la démonstration.
Poursuivre
Sur les certifications existantes et ce qu'elles valent, voyez Opquast.