Utiliser le bon balisage HTML

Ça veut dire quoi ?

Utiliser un balisage HTML sémantique, c’est choisir les bonnes balises HTML pour le bon contenu, sans tout remplacer par des « div » ou des « span » génériques qui n’ont aucune signification sémantique.

En clair, il s’agit de respecter la sémantique HTML, c’est-à-dire de décrire le rôle réel et la signification de chaque élément dans ta page, et non juste son apparence visuelle.

Retour aux bases

Pourquoi ?

Le bon balisage natif est la clé de voûte de l’accessibilité et offre de nombreux avantages. Il permet aux technologies d’assistance (lecteurs d’écran, navigateurs vocaux, etc.) de comprendre le contenu et sa structure.

Un lecteur d’écran sait qu’un « h1 » est un titre principal, et une « ul » est une liste, ce qui est crucial pour la navigation. Il aide ainsi les utilisateurices à naviguer plus vite et plus efficacement, notamment en se déplaçant de titre en titre, de tableau en tableau, ou de champ en champ dans un formulaire.

C’est un peu comme mettre les bons panneaux de signalisation sur une route : tout le monde se repère plus facilement.

Cela t’évite aussi du code inutile : HTML fournit déjà des comportements natifs et accessibles (comme le focus clavier sur un « button ») que tu n’aurais pas à recréer en JavaScript.

De plus, un contenu bien structuré avec des balises sémantiques (titres, listes, etc.) est mieux compris par les moteurs de recherche, ce qui améliore le référencement naturel de ta page.

Comment m’y prendre ?

Pour un balisage HTML sémantique efficace, tu peux déjà appliquer ces principes fondamentaux :

Déclare la langue principale (lang attribute) : Ajoute l’attribut lang à la balise « html » pour spécifier la langue principale de ton contenu (ex: « html lang= fr »). C’est crucial pour la bonne prononciation des textes par les lecteurs d’écran. Si tu utilises un CMS tu peux aussi gérer la langue dans les Réglages -> Général.
Hiérarchise tes titres correctement : Utilise « h1 » pour le titre principal de la page, « h2 » pour les sous-titres, et ainsi de suite. Respecte toujours l’ordre logique de lecture et ne saute jamais de niveaux de titre (par exemple, ne passe pas d’un « h1 » à un « h4 » sans raison). Les lecteurs d’écran annoncent automatiquement ces titres, permettant une navigation rapide et structurée.
Utilise les balises sémantiques HTML5 pour la structure : Structure les grandes régions de ta page avec « header », « nav », « main », « section », « article », « aside », « footer ». Ces balises, appelées aussi « landmarks », aident les technologies d’assistance à identifier rapidement les blocs de contenu majeurs et permettent une navigation rapide par zones.
Choisis la bonne balise pour chaque fonction (« button », « a », « input », etc.) : Par exemple pour un bouton d’action, utilise toujours « button ». Un « button » a déjà les comportements clavier natifs (focus, activation avec Espace ou Entrée) et est automatiquement annoncé comme un bouton par les lecteurs d’écran, contrairement à une « div » stylée qui nécessiterait du JavaScript et des attributs ARIA complexes pour reproduire ces comportements.
Exploite les attributs HTML natifs (required, type, etc.) : Utilise au maximum les attributs que le langage HTML te fournit. Ils ajoutent de la sémantique et du comportement sans nécessiter de JavaScript complexe. Les attributs ARIA (aria-*) sont là pour compléter le HTML natif dans des cas complexes où la sémantique ne peut être exprimée autrement, mais ils ne doivent pas remplacer un balisage HTML correct et sémantique. Souviens-toi : si tu peux le faire en HTML, fais-le en HTML.
Préserve la lisibilité même sans CSS ni JS : Un site bien balisé en HTML natif doit rester fonctionnel et compréhensible même si les styles (CSS) ou les scripts (JavaScript) ne se chargent pas. C’est essentiel pour les personnes qui utilisent des aides techniques ou en cas de problèmes de chargement.

Les astuces

N°1.

Prends l’habitude de valider ton code HTML avec un outil.

N°2.

Utilise des extensions de navigateur pour visualiser l’arborescence de tes titres (« h1 » à « h6 »). Cela t’aide à t’assurer qu’il n’y a pas de saut de niveau ou d’ordre illogique qui pourrait perturber la navigation des lecteurs d’écran.

N°3.

Navigue sur ta page uniquement au clavier (avec la touche Tab, Entrée, Espace, etc.). Assure-toi que tous les éléments interactifs sont atteignables, activables et que l’ordre de tabulation est logique. Ce test simple révèle rapidement les problèmes de sémantique pour les boutons, liens et formulaires.

N°4.

Pense aux attributs ARIA seulement si nécessaire : Rappelle-toi que les lecteurs d’écran annoncent automatiquement les titres, liens, tableaux, listes, etc., lorsque le balisage HTML est correct. Tu n’as donc pas besoin d’ajouter d’attributs ARIA dans la majorité des cas si le balisage natif suffit. ARIA est un complément, pas un substitut.

N°5.

Utilise la balise « strong » pour marquer les mots ou phrases importants. « strong » indique une importance sémantique, alors que « b » est purement visuel (mise en gras).

Ressources & outils

Validator : Outil pour checker son code HTML

Accessible Web Helper : Une extension pour vérifier globalement les erreurs de structure

Comment bien utiliser les attributs ARIA ? (Anglais)

La doc de référence sur les éléments HTML

Un guide complet pour comprendre les attributs ARIA