Accessibilité UI Design

P

Les 4 principes WCAG

▼

1

Perceptible — l'information doit être perçue par tous

2

Utilisable — l'interface doit être manipulable par tous

3

Compréhensible — le contenu doit être intelligible

4

Robuste — compatible avec les technologies d'assistance

C

Contrastes

▼

4.5:1 Texte standard

3:1 Grand texte

3:1 Éléments UI

À retenir

Gris minimum sur blanc : #767676

Non conforme

Texte #999 (2.85:1)

Blanc sur jaune

Conforme

Texte #595959 (7.0:1)

Blanc sur bleu

T

Typographie

▼

≥16px Taille de base

≥1.5 Interlignage

45-80 Car./ligne

À éviter

Texte justifié, longs passages en MAJUSCULES ou italique, polices décoratives.

Co

Couleur

▼

Règle d'or

Ne jamais transmettre une information uniquement par la couleur.

Toujours combiner :

a Couleur + icône

b Couleur + texte

c Couleur + forme

Statut	Couleur	Icône	Texte
Succès	Vert	✓	"Validé"
Attention	Orange	⚠	"En attente"
Erreur	Rouge	✕	"Échec"

Z

Zones tactiles

▼

44×44px Taille minimale

≥8px Espacement

Astuce

Icône 24px → ajouter 10-12px de padding pour atteindre 44-48px.

F

Focus clavier

▼

Interdit

*:focus { outline: none; }

Recommandé

*:focus-visible {
  outline: 3px solid;
}

1 Outline visible : 2-3px

2 Contraste : ≥ 3:1

3 Utiliser :focus-visible

Fo

Formulaires

▼

1

Label visible pour chaque champ

2

Champs obligatoires identifiés textuellement

3

Messages d'erreur = couleur + icône + texte

4

Instructions de format (ex : JJ/MM/AAAA)

I

Images

▼

Type	Texte alternatif
Informative	Description du contenu
Décorative	alt=""
Fonctionnelle	Action effectuée

Icônes

"Rechercher" (correct) vs "Loupe" (incorrect)

S

Structure

▼

1 Un seul H1 par page

2 Hiérarchie logique : H1, H2, H3

3 Skip link en haut de page

4 Ordre de lecture = ordre visuel

Outils de test

Testez vos choix directement ici

Contrastes Daltonisme Zone tactile Taille texte Interlignage

Couleur du texte

Couleur de fond

Aperçu du texte

Texte plus petit pour tester

Ratio

21:1

AA

PASS

AAA

PASS

Large

PASS

UI

PASS

Couleur 1

Couleur 2

Largeur : Hauteur : px

44×44

Conforme (min. 44×44px)

Taille :

16px

Exemple de texte pour tester la lisibilité.

Taille recommandée

Interlignage :

1.5

L'interlignage est l'espace vertical entre les lignes. Un interlignage trop serré rend la lecture difficile. Le WCAG recommande au moins 1.5.

Conforme WCAG

O

Outils externes

▼

Plugins Figma

Stark

A11y Contrast Checker

Able

En ligne

WebAIM Who Can Use WAVE

Tests manuels

Tab, Tab, Tab

VoiceOver / NVDA

Niveaux de gris

Checklist express

Contrastes texte ≥ 4.5:1 Contrastes UI ≥ 3:1 Taille texte ≥ 16px Info pas uniquement par couleur Liens distincts Zones cliquables ≥ 44px Focus visible Labels visibles Erreurs avec icône + texte Hiérarchie H1-H2-H3 Alt sur images Zoom 200% OK

Progression 0 / 12

En résumé

1

Naviguer au clavier

2

Passer en gris

3

Vérifier contrastes

"L'accessibilité n'est pas une contrainte — c'est un meilleur design pour tous."