BaliseTonSite

Accessibilité (a11y)

Balises et attributs pour aider tous les utilisateurs.

Imagine : tu construis un immeuble. Tu penses aux escaliers, mais aussi à l’ascenseur et aux rampes pour que tout le monde puisse entrer. En HTML, c’est pareil : l’accessibilité (ou a11y) sert à rendre ton site facile à utiliser pour tous, même ceux qui ne voient pas, n’entendent pas, ou naviguent au clavier. Un bon plan, c’est un plan où personne n’est laissé dehors.

9.1Les bonnes pratiques essentielles

  • alt : toujours décrire tes images (ou laisse vide si c’est décoratif)
  • Utiliser les balises sémantiques (<header>, <nav>…) : ça aide les lecteurs d’écran
  • aria-label : ajoute une explication si le sens n’est pas clair (ex. : un bouton juste avec une icône)
  • Respecter la hiérarchie des titres : <h1>, puis <h2>, etc.
<img src="plan-evacuation.png" alt="Plan d'évacuation de l'immeuble">

<button aria-label="Ouvrir le menu de navigation">

</button>

<h1>Présentation du projet</h1>
<h2>Étape 1 : Fondations</h2>

Pourquoi c’est important ?

L’accessibilité, ce n’est pas un bonus : c’est un pilier. Un site lisible par tous est plus agréable, mieux référencé, et surtout plus inclusif. Et entre nous… tu n’as pas envie d’un bâtiment avec une porte que certains visiteurs ne peuvent pas franchir

Verifie tes acquis

3 questions pour valider ce chapitre

1. Que signifie l'abreviation a11y ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM complété s'enregistre comme un checkpoint dans ton tableau de bord personnel. Crée ton profil de développeur gratuitement pour débloquer toutes les évaluations du site et suivre ta progression étape par étape.

Commencer l'aventure
Déjà membre ?Connecte-toi