Le Design Accessible

Pourquoi c'est important

Pourquoi ?15% de la population mondiale vit avec un handicap. Le contraste est la violation d'accessibilite la plus courante, et la plus facile a corriger. Un design accessible est un meilleur design, point.

Le framework

1. 01

   Contraste minimum

   Ratio 4.5:1 pour le texte courant, 3:1 pour les gros titres. Utilisez un checker comme WebAIM. Si ca passe pas, changez la couleur ou le fond. Pas de negociation.

2. 02

   Taille de texte

   16px minimum en body. En dessous, meme les voyants plissent les yeux. Prevoyez un line-height genereux (1.5) pour que le texte respire.

3. 03

   Alt text sur les images

   Chaque image informative a un texte alternatif qui decrit son contenu. Les images decoratives prennent un alt vide. Ne mettez jamais "image de...", decrivez ce qu'on voit.

4. 04

   Navigation clavier

   Tout doit etre accessible au Tab, Enter et Escape. Si vous ne pouvez pas naviguer votre interface sans souris, c'est un echec. Testez-le, c'est rapide.

5. 05

   Semantique HTML

   Utilisez les bonnes balises : h1-h6, nav, main, button. Un div avec un onclick n'est pas un bouton. Les lecteurs d'ecran lisent la structure, pas votre CSS.

6. 06

   Couleur pas seule

   Ne transmettez jamais une info uniquement par la couleur. Un champ en erreur en rouge doit aussi avoir un icone ou un texte. Pensez aux daltoniens.

7. 07

   Tests utilisateurs

   Testez avec de vrais utilisateurs en situation de handicap, ou au minimum avec un lecteur d'ecran. L'audit automatique ne detecte que 30% des problemes.

Pour aller plus loin