L’accessibilité web (souvent abrégée A11Y) vise à garantir que les sites web peuvent être utilisés par le plus grand nombre de personnes, quelles que soient leurs capacités ou leur situation (handicap, technologie, environnement).
Le HTML (HyperText Markup Language) n’est pas seulement le squelette de toute page web, il en est aussi, de par sa conception même, la fondation nativement la plus accessible.

Contrairement à une idée reçue, construire un site accessible ne repose pas principalement sur des outils complexes ou des attributs ARIA (Accessible Rich Internet Applications) ajoutés après coup.
La clé de l’accessibilité réside dans l’utilisation correcte et intentionnelle des éléments HTML standards, ce qu’on appelle le HTML sémantique.

La Sémantique, Pilier de l’Accessibilité

Le principal atout du HTML pour l’accessibilité est sa sémantique.
Les éléments HTML ne servent pas qu’à donner un style visuel ; ils confèrent une signification structurelle et fonctionnelle au contenu.

Donner du sens au contenu

Les balises sémantiques structurent la page de manière logique, permettant aux technologies d’assistance (comme les lecteurs d’écran) de comprendre le rôle de chaque partie du contenu.

• Structure du Document : Des balises comme <header>, <nav>, <main>, <article>, <section>, et <footer> définissent les grandes régions de la page. Elles permettent aux utilisateurs de lecteurs d’écran de naviguer rapidement vers la zone de contenu principale, le menu ou le pied de page, sans devoir parcourir tout le contenu inutile.
• Hiérarchie des Titres : L’utilisation correcte des titres <h1> à <h6> crée un plan du document. Les lecteurs d’écran peuvent lire ce plan, permettant aux utilisateurs de sauter d’une section à l’autre, tout comme une personne voyante parcourt des titres pour trouver rapidement l’information recherchée.
• Listes et Citations : Les éléments comme <ul> (liste non ordonnée), <ol> (liste ordonnée), et <blockquote> (citation longue) indiquent clairement la nature du contenu. Par exemple, un lecteur d’écran annoncera le nombre d’éléments dans une liste, offrant un contexte vital.

⚠️ Règle d’Or : Un <div> stylisé pour ressembler à un titre ne sera jamais interprété comme un titre par un lecteur d’écran, brisant la structure sémantique et l’accessibilité. Il faut toujours utiliser l’élément HTML approprié pour la tâche recherchée.

Éléments interactifs accessibles

Les éléments interactifs natifs du HTML offrent une accessibilité fonctionnelle immédiate et essentielle, notamment pour la navigation au clavier.

L’accessibilité ne se limite pas aux personnes aveugles ; elle est cruciale pour celles qui ne peuvent pas utiliser de souris (utilisateurs de clavier, de commandes vocales, ou de dispositifs de pointage alternatifs).

• Focus Automatique : Les éléments interactifs HTML standards comme les liens (<a> avec attribut href), les boutons (<button>), et les champs de formulaire (<input>, <select>, <textarea>) sont naturellement focusable.
  • Le navigateur leur applique automatiquement un focus visuel (un contour ou un halo), indiquant clairement à l’utilisateur où il se trouve.
  • Ils sont inclus automatiquement dans l’ordre de tabulation (navigation via la touche Tab).
• Interactions Clavier : Ces éléments gèrent nativement les interactions au clavier :
  • Un <button> s’active avec les touches Entrée ou Espace.
  • Un lien (<a>) s’active avec Entrée.

Si un développeur utilise une balise non interactive comme <div> ou <span> pour créer un bouton personnalisé, il doit recoder tout ce comportement (gestion du focus, événements keydown pour Entrée/Espace) et ajouter des rôles ARIA, ce qui est souvent source d’erreurs.

Les médias et les formulaires

Le HTML intègre des mécanismes d’accessibilité spécifiques pour les éléments les plus critiques en termes d’interaction et de perception.

Alternatives Textuelles et Formulaires

• Images : L’attribut alt sur la balise <img> est fondamental. Il fournit le texte alternatif que le lecteur d’écran lit à la place de l’image. S’il n’y a pas d’alternative textuelle (texte non vide pour les images informatives, texte vide alt="" pour les images purement décoratives), l’information est perdue pour les utilisateurs non voyants.
• Formulaires : La balise <label> est cruciale. Lorsqu’elle est correctement associée à un champ de formulaire (via l’attribut for qui correspond à l’ id du champ), elle permet aux lecteurs d’écran d’annoncer la fonction du champ (par exemple, « Champ Nom d’utilisateur, requis ») et augmente la zone cliquable pour les utilisateurs ayant des difficultés motrices.

Multimédia

• Les balises <audio> et <video> modernes permettent d’intégrer facilement des fonctionnalités d’accessibilité.
• L’attribut controls fournit une interface standard pour la lecture.
• La balise <track> est utilisée pour ajouter des sous-titres et des transcriptions (fichiers VTT) essentiels pour les personnes sourdes ou malentendantes.

---

Conclusion : L’Accessibilité est dans le Code

Le HTML est intrinsèquement un langage accessible. En choisissant les éléments sémantiques appropriés dès la conception, les développeurs posent la base la plus solide pour l’inclusion.

L’accessibilité native du HTML est si puissante que l’une des règles fondamentales de l’utilisation d’ARIA est : « N’utilise pas ARIA si tu peux utiliser un élément HTML natif ».
En respectant cette philosophie et en structurant le contenu avec une sémantique correcte, on garantit que le site web est robuste et compréhensible par toutes les technologies d’assistance, faisant de l’accessibilité non pas une contrainte, mais une caractéristique par défaut du développement web bien fait.