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é est importante

Les chiffres

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

Les situations concernées

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

Handicap permanent	Situation temporaire	Situation contextuelle
Aveugle	Cataracte post-opération	Écran en plein soleil
Sourd	Otite	Environnement bruyant
Un bras amputé	Bras dans le plâtre	Parent avec bébé dans les bras
Trouble cognitif	Manque de sommeil	Distraction, stress

Un site accessible profite à tous les utilisateurs.

Les normes WCAG

Les Web Content Accessibility Guidelines (WCAG) sont la référence mondiale.

Les 4 principes POUR

Principe	Description	Exemple
Perceptible	L'information doit être présentée de manière perceptible	Texte alternatif pour les images
Opérable	L'interface doit être utilisable	Navigation au clavier
Understandable	Le contenu doit être compréhensible	Langage clair
Robuste	Le contenu doit être interprétable	HTML valide

Les niveaux de conformité

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)

Objectif minimum

Visez toujours le niveau AA au minimum. C'est l'exigence légale dans de nombreux pays.

Accessibilité visuelle

Personnes malvoyantes

Les personnes malvoyantes ne sont pas toutes aveugles. Beaucoup ont une vision partielle.

Type	Description	Besoin
Vision floue	Difficile de distinguer les détails	Texte agrandi
Vision tunnel	Champ de vision réduit	Navigation claire
Taches aveugles	Zones sans vision	Information pas uniquement centrale
Sensibilité à la lumière	Éblouissement	Mode sombre, contrastes modérés

Règles de contraste WCAG

Taille de texte	Niveau AA	Niveau 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

Calculer le ratio de contraste

Ratio = (L1 + 0.05) / (L2 + 0.05)

L1 = luminance de la couleur la plus claire
L2 = luminance de la couleur la plus foncée

Pas besoin de calculer manuellement : utilisez les outils de la Phase 7.

Exemples de contrastes

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

Taille de texte

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

Unités relatives

Utilisez des unités relatives (rem, em) pour permettre le zoom :

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

Daltonisme

Types de daltonisme

Environ 8% des hommes et 0,5% des femmes sont atteints de daltonisme.

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

Vision normale vs daltonisme

VISION NORMALE          DEUTÉRANOPIE          PROTANOPIE
───────────────────────────────────────────────────────────

🔴 Rouge                🟤 Brun/Olive         🟤 Brun foncé
🟢 Vert                 🟤 Brun/Olive         🟡 Jaune/Brun
🔵 Bleu                 🔵 Bleu               🔵 Bleu
🟡 Jaune                🟡 Jaune              🟡 Jaune
🟣 Violet               🔵 Bleu               🔵 Bleu
🟠 Orange               🟡 Jaune/Brun         🟤 Brun

Ne jamais utiliser la couleur seule

La couleur ne doit jamais être le seul moyen de transmettre une information.

❌ Mauvais : Couleur seule

┌─────────────────────────────────────────────────┐
│                                                 │
│   Champs obligatoires en rouge                  │
│                                                 │
│   Nom     [__________]  ← rouge (invisible     │
│   Prénom  [__________]     pour un daltonien)  │
│   Email   [__________]                         │
│                                                 │
└─────────────────────────────────────────────────┘

✅ Bon : Couleur + autre indicateur

┌─────────────────────────────────────────────────┐
│                                                 │
│   * Champs obligatoires                         │
│                                                 │
│   Nom *   [__________]  ← astérisque visible   │
│   Prénom  [__________]     par tous            │
│   Email * [__________]                         │
│                                                 │
└─────────────────────────────────────────────────┘

Alternatives à la couleur

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

Palette accessible aux daltoniens

Certaines combinaisons sont plus sûres :

✅ Combinaisons sûres	❌ Combinaisons à éviter
Bleu + Orange	Rouge + Vert
Bleu + Jaune	Rouge + Orange
Noir + Jaune	Vert + Marron
Violet + Jaune	Bleu + Violet

Navigation au clavier

Importance

De nombreux utilisateurs naviguent sans souris :

• Personnes avec handicap moteur
• Utilisateurs de lecteurs d'écran
• Power users (raccourcis clavier)

Règles essentielles

Règle	Description
Focus visible	L'élément actif doit être clairement identifiable
Ordre logique	Tab suit l'ordre visuel de la page
Pas de piège	L'utilisateur peut toujours sortir d'un élément
Skip links	Lien "Aller au contenu" pour éviter la navigation

Focus visible

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

/* ✅ Bon : améliore le focus */
:focus {
  outline: 3px solid #1976D2;
  outline-offset: 2px;
}

/* ✅ Encore mieux : focus-visible pour le clavier uniquement */
:focus-visible {
  outline: 3px solid #1976D2;
  outline-offset: 2px;
}

Tester la navigation clavier

1. Accédez à votre page
2. Appuyez sur Tab pour naviguer
3. Vérifiez que :
   • Chaque élément interactif reçoit le focus
   • L'ordre est logique
   • Le focus est visible
   • Vous pouvez activer les boutons avec Entrée
   • Vous pouvez cocher les cases avec Espace

Textes alternatifs (alt)

Images informatives

Toute image qui transmet une information doit avoir un texte alternatif.

<!-- ❌ Mauvais -->
<img src="graphique-ventes.png">

<!-- ❌ Mauvais : alt vide pour image informative -->
<img src="graphique-ventes.png" alt="">

<!-- ❌ Mauvais : description inutile -->
<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">

Images décoratives

Les images purement décoratives doivent avoir un alt vide.

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

<!-- ✅ Ou en CSS (préférable pour les décorations) -->
.decorative::before {
  content: url('decoration-fleur.png');
}

Règles pour le texte alternatif

Type d'image	Alt text
Photo informative	Décrire le contenu/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)
Image complexe	Description + lien vers description longue

Structure sémantique

Utiliser les bonnes balises HTML

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

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

Hiérarchie des titres

Les titres doivent suivre un ordre logique.

<!-- ❌ Mauvais : saute des niveaux -->
<h1>Titre principal</h1>
<h3>Sous-titre</h3>  <!-- Manque h2 ! -->
<h5>Détail</h5>      <!-- Manque h4 ! -->

<!-- ✅ Bon : hiérarchie respectée -->
<h1>Titre principal</h1>
  <h2>Section 1</h2>
    <h3>Sous-section 1.1</h3>
    <h3>Sous-section 1.2</h3>
  <h2>Section 2</h2>

Formulaires accessibles

Labels obligatoires

Chaque champ doit avoir un label associé.

<!-- ❌ Mauvais : pas de label -->
<input type="email" placeholder="Email">

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

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

<!-- ✅ Bon aussi : label englobe l'input -->
<label>
  Email
  <input type="email">
</label>

Messages d'erreur accessibles

<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 et comment

Règles d'or

1. N'utilisez pas ARIA si HTML natif suffit
2. Ne changez pas la sémantique native
3. Tous les éléments interactifs doivent être utilisables au clavier

<!-- ❌ Mauvais : ARIA inutile -->
<button role="button">Cliquez</button>

<!-- ✅ Bon : HTML natif suffit -->
<button>Cliquez</button>

<!-- ✅ Bon : ARIA nécessaire pour un div cliquable -->
<div role="button" tabindex="0">Cliquez</div>
<!-- Mais préférez toujours <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é

Checklist de la Phase 6

Avant de passer à la phase suivante, vérifiez :

Contraste et couleurs

• [ ] Ratio de contraste ≥ 4.5:1 pour le texte normal
• [ ] Ratio de contraste ≥ 3:1 pour le grand texte
• [ ] Information jamais transmise par la couleur seule
• [ ] Site testé avec un simulateur de daltonisme

Texte et lisibilité

• [ ] Taille de police minimum 16px
• [ ] Unités relatives (rem, em) utilisées
• [ ] Texte zoomable à 200% sans perte d'information
• [ ] Interligne suffisant (1.5 minimum)

Images et médias

• [ ] Toutes les images informatives ont un alt pertinent
• [ ] Images décoratives ont alt="" ou sont 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 suffisamment grandes (48×48px)

Structure et sémantique

• [ ] HTML sémantique utilisé (header, nav, main, etc.)
• [ ] Hiérarchie des titres respectée (h1 → h2 → h3...)
• [ ] Formulaires avec labels associés
• [ ] Messages d'erreur clairs et 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.