Apprends Accessibilité (a11y)

Pourquoi l'accessibilité est importante

L'accessibilité web (souvent abrégée a11y — le "11" représente les 11 lettres entre le "a" et le "y") signifie concevoir des sites web pour que tout le monde puisse les utiliser, quelles que soient leurs capacités ou circonstances.

Cela inclut les personnes qui sont :

Aveugles ou malvoyantes — utilisant des lecteurs d'écran comme VoiceOver, NVDA ou JAWS.
Ayant des troubles moteurs — naviguant entièrement avec un clavier, un dispositif de commutation ou une commande vocale.
Sourdes ou malentendantes — s'appuyant sur des sous-titres et des transcriptions.
Neuroatypiques — bénéficiant d'une structure claire et d'un langage simple.

L'accessibilité n'est pas optionnelle. Dans de nombreuses régions, c'est une exigence légale (par exemple, l'ADA aux États-Unis, l'EAA dans l'UE). Plus important encore, c'est la bonne chose à faire. Un site accessible tend également à être mieux structuré, plus convivial pour le SEO et plus facile à maintenir.

Rôles et attributs ARIA

ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs que tu peux ajouter aux éléments HTML pour transmettre du sens aux technologies d'assistance.

Attributs ARIA courants

role — Remplace ou complète le rôle natif de l'élément. Exemple : <div role="navigation"> indique aux lecteurs d'écran que cette div fonctionne comme un repère de navigation. Privilégie le HTML sémantique (<nav>) quand c'est possible ; utilise role uniquement quand tu ne peux pas faire autrement.
aria-label — Fournit un nom accessible lorsque le texte visible est absent. Exemple : <button aria-label="Fermer la boîte de dialogue">X</button>.
aria-describedby — Pointe vers l'id d'un autre élément qui donne une description plus longue. Idéal pour le texte d'aide des formulaires.
aria-hidden="true" — Masque un élément de l'arbre d'accessibilité tout en le gardant visuellement présent. Utile pour les icônes décoratives.
aria-live — Annonce les changements de contenu dynamique. Valeurs : polite (attend une pause) ou assertive (interrompt immédiatement).

Première règle d'ARIA : N'utilise pas ARIA si un élément HTML natif communique déjà la même chose. <nav> est toujours meilleur que <div role="navigation">.

Lien d'évitement et formulaires accessibles

html

<!-- Skip-to-content link: hidden until focused via keyboard -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<nav aria-label="Primary navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main id="main-content">
  <h1>Contact Us</h1>

  <form>
    <label for="email">Email address</label>
    <input
      type="email"
      id="email"
      name="email"
      aria-describedby="email-help"
      required
    >
    <small id="email-help">
      We will never share your email with anyone else.
    </small>

    <button type="submit">Send</button>
  </form>
</main>

Navigation au clavier et bonnes pratiques

De nombreux utilisateurs naviguent entièrement au clavier en utilisant Tab pour se déplacer entre les éléments focalisables et Entrée ou Espace pour les activer.

Pratiques clés

Utilise des éléments interactifs natifs. Les boutons, liens et contrôles de formulaire sont focalisables par défaut. Si tu rends un <div> cliquable, les utilisateurs au clavier ne peuvent pas l'atteindre à moins que tu n'ajoutes tabindex="0" et que tu gères les événements clavier — ce qui est fragile. Utilise simplement un <button>.
Indicateurs de focus visibles. Ne supprime jamais le contour sur les éléments focalisés (outline: none) sans fournir une alternative tout aussi visible.
Ordre de tabulation logique. L'ordre du DOM doit correspondre à l'ordre visuel. Évite d'utiliser des valeurs de tabindex supérieures à 0 — elles créent des séquences de tabulation confuses.
Texte alternatif sur les images. Chaque <img> a besoin d'un attribut alt. Si l'image est décorative, utilise alt="" (vide) pour que les lecteurs d'écran la sautent. Si l'image transmet une information, décris sa signification, pas son apparence.
Lien d'évitement de navigation. Place un lien tout en haut de la page qui saute au contenu principal. Cela évite aux utilisateurs de clavier et de lecteurs d'écran de devoir tabuler à travers toute la navigation à chaque chargement de page.

Quand dois-tu utiliser `aria-hidden="true"` sur un élément ?

Accessibilité (a11y)