Phase 6 — Accessibilité et inclusion

Principe clé

« Le pouvoir du Web est dans son universalité. L'accès par tous, quel que soit le handicap, en est un aspect essentiel. » — Tim Berners-Lee, inventeur du World Wide Web

L'accessibilité n'est pas une option, c'est une nécessité pour un web inclusif.

Pourquoi l'accessibilité ?

Statistique	Impact
15% de la population mondiale	vit avec un handicap (OMS)
8% des hommes	sont daltoniens
100% des utilisateurs	bénéficient d'un site accessible

L'accessibilité aide bien plus que les personnes handicapées :

Permanent	Temporaire	Contextuel
Aveugle	Cataracte post-op	Plein soleil
Sourd	Otite	Environnement bruyant
Bras amputé	Bras dans le plâtre	Parent avec bébé
Trouble cognitif	Manque de sommeil	Stress, distraction

WCAG — la référence

Les Web Content Accessibility Guidelines définissent 4 principes (POUR) et 3 niveaux.

Principe	Description	Exemple
Perceptible	Présentable de manière perceptible	Texte alternatif pour les images
Opérable	Utilisable	Navigation au clavier
Understandable	Compréhensible	Langage clair
Robuste	Interprétable par les technologies	HTML valide

Niveau	Exigence	Usage
A	Minimum absolu	Éviter les barrières majeures
AA	Standard recommandé	Objectif pour la plupart des sites
AAA	Maximum	Sites spécialisés (santé, gouvernement)

Visez AA minimum

C'est l'exigence légale dans de nombreux pays.

Vision et contraste

Règles WCAG

Élément	AA	AAA
Texte normal (< 18px)	4.5:1	7:1
Grand texte (≥ 18px ou 14px bold)	3:1	4.5:1
Éléments graphiques / UI	3:1	3:1

Exemples de combinaisons

Combinaison	Ratio	Niveau
Noir (#000) sur Blanc (#FFF)	21:1	✅ AAA
Gris foncé (#333) sur Blanc	12.6:1	✅ AAA
Bleu (#1976D2) sur Blanc	6.1:1	✅ AA
Gris moyen (#767676) sur Blanc	4.5:1	✅ AA (limite)
Gris clair (#999) sur Blanc	2.8:1	❌ Insuffisant

Outil : WebAIM Contrast Checker.

Taille de texte

Élément	Min	Recommandé
Corps de texte	16px	18px
Texte secondaire	14px	16px
Légendes, notes	12px	14px
Boutons	16px	16px+

Unités relatives

Utilisez rem ou em pour permettre le zoom utilisateur. Évitez px sur le texte.

body { font-size: 100%; }  /* 16px par défaut */
h1 { font-size: 2.5rem; }  /* 40px, scalable */
p { font-size: 1rem; }     /* 16px, scalable */

Daltonisme

8% des hommes et 0,5% des femmes sont atteints — principalement de la confusion rouge/vert.

Les 4 types de daltonisme

Type	Prévalence	Confusion
Deutéranopie	5% ♂	Rouge/Vert (vert)
Protanopie	1% ♂	Rouge/Vert (rouge)
Tritanopie	0.01%	Bleu/Jaune
Achromatopsie	Très rare	Vision en gris

Ne jamais utiliser la couleur seule

Ajoutez toujours un indicateur complémentaire : icône, texte, motif, soulignement.

Information	❌ Couleur seule	✅ Couleur + alternative
Erreur	Texte rouge	Texte rouge + icône ⚠️
Succès	Texte vert	Texte vert + icône ✓
Lien	Texte bleu	Texte bleu + souligné
Obligatoire	Bordure rouge	Bordure + astérisque *
Graphique	Couleurs différentes	Couleurs + motifs / formes

Combinaisons sûres pour les daltoniens

Préférez bleu + orange, bleu + jaune, noir + jaune, violet + jaune. Évitez rouge + vert, rouge + orange, vert + marron, bleu + violet.

Navigation au clavier

De nombreux utilisateurs naviguent sans souris : handicap moteur, lecteurs d'écran, power users.

Règle	Description
Focus visible	L'élément actif doit être identifiable
Ordre logique	Tab suit l'ordre visuel
Pas de piège	Toujours pouvoir sortir d'un élément
Skip links	Lien « Aller au contenu » au début de page

/* ❌ Mauvais : supprime le focus */
:focus { outline: none; }

/* ✅ Bon : focus visible au clavier uniquement */
:focus-visible {
  outline: 3px solid #1976D2;
  outline-offset: 2px;
}

Test rapide

Naviguez votre page avec Tab seulement, sans souris. Si vous perdez le focus ou ne pouvez pas activer un bouton avec Entrée, c'est un bug d'accessibilité.

Textes alternatifs (alt)

Toute image qui transmet une information doit avoir un alt descriptif.

<!-- ❌ Mauvais : pas d'alt, ou alt vide / inutile pour image informative -->
<img src="graphique-ventes.png">
<img src="graphique-ventes.png" alt="">
<img src="graphique-ventes.png" alt="graphique">

<!-- ✅ Bon : description de l'information -->
<img src="graphique-ventes.png"
     alt="Ventes en hausse de 25% au T3 2024 par rapport au T2">

<!-- ✅ Image décorative : alt vide -->
<img src="decoration-fleur.png" alt="">

Type d'image	Alt text
Photo informative	Décrire le contenu / le message
Graphique, diagramme	Décrire les données ou conclusions
Bouton / lien image	Décrire l'action
Logo	Nom de l'entreprise
Image décorative	alt="" (vide) ou en CSS

Structure sémantique

Utilisez les bonnes balises HTML : les lecteurs d'écran s'appuient dessus.

<!-- ❌ Mauvais : tout en div -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="title">Titre</div>
</div>

<!-- ✅ Bon : sémantique -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h1>Titre</h1>
  </article>
</main>

Hiérarchie des titres : h1 → h2 → h3, sans saut de niveau. Un seul <h1> par page.

Formulaires accessibles

Chaque champ doit avoir un label associé (pas juste un placeholder).

<!-- ❌ Mauvais : label non associé -->
<label>Email</label>
<input type="email">

<!-- ✅ Bon : label avec for + id -->
<label for="email">Email</label>
<input type="email" id="email">

Messages d'erreur accessibles (ARIA)

<label for="email">Email</label>
<input type="email"
       id="email"
       aria-describedby="email-error"
       aria-invalid="true">
<span id="email-error" role="alert">
  ⚠️ Veuillez entrer une adresse email valide
</span>

ARIA — quand l'utiliser

Règle d'or

N'utilisez pas ARIA si HTML natif suffit. Préférez <button> à <div role="button">.

Attributs ARIA utiles

Attribut	Usage
aria-label	Label invisible pour les lecteurs d'écran
aria-labelledby	Référence un élément comme label
aria-describedby	Référence une description
aria-hidden="true"	Cache aux lecteurs d'écran
aria-live="polite"	Annonce les mises à jour dynamiques
aria-expanded	Indique si un élément est déplié

3 règles ARIA :

1. N'utilisez pas ARIA si HTML natif suffit
2. Ne changez pas la sémantique native
3. Tout élément interactif doit être utilisable au clavier

Checklist de la Phase 6

Contraste et couleurs

• Ratio ≥ 4.5:1 (texte normal) / ≥ 3:1 (grand texte)
• Information jamais transmise par la couleur seule
• Site testé avec un simulateur de daltonisme

Texte et lisibilité

• Taille minimum 16px (corps de texte)
• Unités relatives (rem, em)
• Texte zoomable à 200% sans perte d'information
• Interligne ≥ 1.5

Images et médias

• Toutes les images informatives ont un alt pertinent
• Images décoratives : alt="" ou en CSS
• Vidéos sous-titrées (si applicable)

Navigation et interaction

• Site entièrement navigable au clavier
• Focus visible sur tous les éléments interactifs
• Ordre de tabulation logique
• Zones cliquables ≥ 48×48px (voir Phase 4)

Structure et sémantique

• HTML sémantique utilisé (header, nav, main...)
• Hiérarchie des titres respectée (h1 → h2 → h3)
• Formulaires avec labels associés
• Messages d'erreur accessibles

Prochaine étape

Les critères d'accessibilité sont définis. Passez à la Phase 7 — Outils de test pour découvrir comment vérifier tout cela.