Aller au contenu
PROJET WEB DYNAMIQUE

a11y : Coder pour les humains

L'Accessibilité (a11y) : Coder pour les humains (les vrais) 🌍

Slides

https://gamma.app/docs/LAccessibilite-Web-a11y--rz7jd9f9xywvprl

Introduction

L'accessibilité web est souvent abrégée a11y (car il y a 11 lettres entre le a et le y dans le mot “accessibility”).

Ce n'est pas une "feature bonus" pour la fin de sprint. C'est la base.

Si votre site n'est pas accessible, vous bloquez la porte à une immense partie de la population.

Pourquoi s'en préoccuper ? (Data & Business) 🧠

L'OMS estime que 15% de la population mondiale vit avec une forme de handicap.

  • 📉 C'est 1 milliard de personnes.

  • 🚫 Un site non accessible = 1 utilisateur sur 7 refusé à l'entrée.

L'effet "Curb Cut" (Bateau de trottoir) 🛹

L'accessibilité aide tout le monde, pas juste les personnes handicapées.

C'est le principe du bateau de trottoir :

  1. Conçu pour les fauteuils roulants. 🦽

  2. Utilisé par les livreurs, les poussettes et les skateurs. 🛹

Les 4 Fantastiques (Types de handicap) 🦸

Pour coder juste, il faut comprendre les contraintes. Voici les 4 catégories majeures et leur impact technique.

1. 👁️ Visuel (Aveugles, Malvoyants, Daltoniens)

  • Outil principal : Le Lecteur d'écran (Screen Reader). Il lit le HTML à haute voix.

  • Le problème : Un bouton div sans label est invisible pour eux.

  • Contraste : Le texte gris clair sur fond blanc est illisible pour un malvoyant (ou quelqu'un en plein soleil).

Outils à connaître :

  • NVDA (Gratuit, Windows) - Le standard.

  • VoiceOver (Natif Mac/iOS).

  • JAWS (Payant, très utilisé en entreprise).

2. 👂 Auditif (Sourds, Malentendants)

  • Impact : Vidéos et sons.

  • Solution : Sous-titres et transcriptions.

  • Bonus pour tous : Regarder une vidéo dans le métro sans écouteurs. 🚇

3. 🦾 Moteur (Parkinson, Paralysie, Bras cassé)

Certains utilisateurs ne peuvent pas utiliser de souris. Ils naviguent uniquement au clavier.

  • Tab pour avancer.

  • Shift + Tab pour reculer.

  • Enter / Space pour valider.

Test immédiat : Lâchez votre souris. Essayez d'ouvrir un lien sur cette page juste avec Tab et Enter. Si vous n'y arrivez pas, le site est cassé.

4. 🧠 Cognitif (TDAH, Dyslexie, Troubles mnésiques)

C'est ici que l'UX rencontre le code.

  • TDAH (ADHD) :

    • ❌ Murs de texte compacts.

    • ❌ Animations qui clignotent partout (distraction).

    • ✅ Feedback clair (ex: "Erreur sur le champ Email" vs "Erreur").

  • Dyslexie :

    • ❌ Polices "artistiques" ou serif complexes.

    • ❌ Texte justifié (crée des "rivières" blanches illisibles).

    • ✅ Texte aligné à gauche.

Notre Stack & L'Accessibilité 🛠️

Un framework ne fait pas de magie. On peut créer un site horrible avec les meilleurs outils.

Heureusement, notre stack part avec une longueur d'avance :

  1. Shadcn UI : Basé sur Radix UI. Gère nativement le Focus Trap (garder le clavier dans une modale) et la navigation fléchée. 🏹

  2. Inertia <Form> : Permet une gestion d'état propre sans bidouillage excessif du DOM.

  3. Laravel : La validation backend renvoie des erreurs structurées qu'on peut facilement lier aux inputs avec aria-describedby.

⚠️ La Règle d'Or :

"No ARIA is better than bad ARIA"

Mieux vaut aucun attribut d'accessibilité qu'un attribut faux qui ment à l'utilisateur.

Dans la suite, on va configurer nos formulaires Inertia pour qu'ils soient parfaits pour tout le monde.

Synthèse