Aller au contenu principal

Module HTML.9 – Accessibilité (A11Y)

Objectif​

Maîtriser l'accessibilité web (A11Y) : WCAG, ARIA, navigation clavier, screen readers pour créer des sites accessibles à tous.

Théorie​

Qu'est-ce que l'accessibilité ?​

Accessibilité web = Rendre les sites utilisables par tous, y compris les personnes en situation de handicap.

Types de handicaps :

  • Visuel (cécité, malvoyance)
  • Auditif (surdité, malentendance)
  • Moteur (mobilité réduite)
  • Cognitif (troubles de l'apprentissage)

WCAG (Web Content Accessibility Guidelines)​

Niveaux :

  • A : Minimum (obligatoire)
  • AA : Recommandé (standard)
  • AAA : Optimal (difficile à atteindre)

Principes (POUR) :

  • Perceptible : Visible/audible
  • Opérable : Utilisable (clavier, souris)
  • Universel : Compréhensible
  • Robuste : Compatible (technologies d'assistance)

ARIA (Accessible Rich Internet Applications)​

Rôle : Améliorer l'accessibilité quand HTML seul ne suffit pas.

aria-label​

Texte alternatif pour les éléments.

<button aria-label="Fermer la fenêtre">×</button>
<img src="icon.svg" alt="" aria-label="Icône de recherche">

aria-labelledby​

Référence vers un élément qui étiquette.

<div id="search-label">Rechercher</div>
<input type="search" aria-labelledby="search-label">

aria-describedby​

Référence vers un élément qui décrit.

<input type="email" aria-describedby="email-help">
<span id="email-help">Nous ne partagerons jamais votre email</span>

aria-hidden​

Masquer du contenu décoratif aux screen readers.

<span aria-hidden="true">★</span>
<span class="sr-only">Note: 5 étoiles</span>

aria-current​

Indiquer l'élément actif.

<nav>
    <a href="/" aria-current="page">Accueil</a>
    <a href="/about.html">À propos</a>
</nav>

role​

Définir le rôle d'un élément.

<div role="button" tabindex="0">Cliquer</div>
<div role="alert">Message d'erreur</div>
<div role="banner">En-tête</div>

Rôles courants :

  • button, link, navigation
  • main, complementary, contentinfo
  • alert, status, dialog

Touches essentielles :

  • Tab : Naviguer vers l'avant
  • Shift+Tab : Naviguer vers l'arrière
  • Entrée : Activer un lien/bouton
  • Espace : Activer un bouton
  • Flèches : Navigation dans les listes/menus

Focus visible :

a:focus,
button:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

Ordre de focus :

  • Logique (de haut en bas, gauche à droite)
  • Cohérent
  • Visible

Screen readers​

Principaux :

  • NVDA (Windows, gratuit)
  • JAWS (Windows, payant)
  • VoiceOver (macOS/iOS, intégré)
  • TalkBack (Android, intégré)

Bonnes pratiques :

  • Structure sémantique
  • Labels descriptifs
  • Textes alternatifs
  • Landmarks ARIA

Bonnes pratiques A11Y​

1. Contraste des couleurs​

Ratio minimum (WCAG AA) :

  • Texte normal : 4.5:1
  • Texte large : 3:1

Outils :

  • WebAIM Contrast Checker
  • axe DevTools

2. Textes alternatifs​

Images :

<img src="photo.jpg" alt="Description détaillée">

Icônes :

<button aria-label="Fermer">
    <span aria-hidden="true">×</span>
</button>

3. Formulaires accessibles​

<label for="email">Email :</label>
<input type="email" id="email" name="email" required aria-describedby="email-help">
<span id="email-help">Format: exemple@domaine.com</span>

4. Liens descriptifs​

❌ Mauvais :

<a href="page.html">Cliquez ici</a>

✅ Bon :

<a href="page.html">En savoir plus sur nos services</a>
<a href="#main-content" class="skip-link">Aller au contenu principal</a>

<nav>...</nav>

<main id="main-content">...</main>

Outils de test​

Extensions navigateur :

  • WAVE (Web Accessibility Evaluation Tool)
  • axe DevTools
  • Lighthouse (Chrome)

Tests manuels :

  • Navigation clavier uniquement
  • Screen reader
  • Zoom 200%
  • Contraste des couleurs

Exercices guidés​

Exercice 1 : ARIA de base​

Créez :

  • Un bouton avec aria-label
  • Un input avec aria-describedby
  • Un élément avec aria-hidden

Exercice 2 : Navigation clavier​

Créez une page et :

  • Naviguez uniquement au clavier (Tab)
  • Vérifiez que tous les éléments interactifs sont accessibles
  • Vérifiez que le focus est visible

Exercice 3 : Formulaires accessibles​

Créez un formulaire avec :

  • Labels explicites
  • aria-describedby pour l'aide
  • Messages d'erreur avec role="alert"

Exercice 4 : Contraste​

Testez le contraste de vos couleurs :

  • Utilisez WebAIM Contrast Checker
  • Corrigez les problèmes de contraste

Exercice 5 : Screen reader​

Testez avec un screen reader :

  • Installez NVDA ou utilisez VoiceOver
  • Naviguez sur votre site
  • Identifiez les problèmes

❌ Erreurs fréquentes​

Erreur 1 : Ignorer l'accessibilité​

❌ Mauvais :

<div onclick="doSomething()">Action</div>

✅ Bon :

<button onclick="doSomething()">Action</button>

Pourquoi : Les boutons sont accessibles par défaut.

Erreur 2 : Pas de labels​

❌ Mauvais :

<input type="text" name="nom" placeholder="Nom">

✅ Bon :

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">

Pourquoi : Obligatoire pour l'accessibilité.

Erreur 3 : Contraste insuffisant​

❌ Mauvais :

color: #ccc; /* Gris clair sur blanc */

✅ Bon :

color: #333; /* Gris foncé sur blanc */

Pourquoi : WCAG exige un contraste minimum.

Erreur 4 : Focus invisible​

❌ Mauvais :

*:focus {
    outline: none;
}

✅ Bon :

*:focus {
    outline: 2px solid blue;
}

Pourquoi : Les utilisateurs clavier doivent voir le focus.

Erreur 5 : ARIA mal utilisé​

❌ Mauvais :

<div role="button">Cliquer</div>

✅ Bon :

<button>Cliquer</button>

Pourquoi : Utiliser HTML sémantique d'abord, ARIA seulement si nécessaire.

🚀 Mini-projet​

Mission : Créer un site accessible

Créez un site avec :

Accessibilité :

  1. Structure sémantique complète
  2. Navigation clavier fonctionnelle
  3. Labels sur tous les formulaires
  4. Textes alternatifs sur toutes les images
  5. Contraste WCAG AA
  6. ARIA approprié
  7. Skip links

Tests :

  • WAVE (0 erreurs)
  • Navigation clavier uniquement
  • Screen reader (si possible)
  • Contraste vérifié

Critères :

  • ✅ 0 erreurs WAVE
  • ✅ Navigation clavier complète
  • ✅ Contraste WCAG AA
  • ✅ ARIA approprié
  • ✅ Structure sémantique

Objectif : Créer un site accessible à tous, conforme WCAG AA.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'accessibilité et avez créé un site accessible conforme WCAG AA.