Créer une page HTML sémantique et accessible dès le premier fichier

Une page HTML peut s’afficher correctement tout en restant difficile à comprendre pour un moteur de recherche, un lecteur d’écran ou un utilisateur qui navigue au clavier. La différence vient souvent de la structure du document : utiliser un titre pour son apparence, multiplier les div ou oublier l’étiquette d’un formulaire produit un HTML visuellement acceptable, mais peu exploitable.

Pour partir sur une base solide, il faut distinguer trois sujets : la hiérarchie du contenu, le rôle de chaque zone de la page et les conditions d’utilisation des personnes qui ne consultent pas le site de la même manière. Voici une méthode progressive pour créer une page simple, sémantique et accessible.

Commencer par la structure minimale du document

Un fichier HTML commence par une déclaration indiquant au navigateur qu’il doit interpréter le document selon la version moderne du langage. L’élément html contient ensuite deux grandes parties : head, qui regroupe les informations destinées au navigateur, et body, qui contient ce que l’utilisateur voit ou peut utiliser.

Dans l’élément head, prévoyez au minimum l’encodage des caractères, la configuration de l’affichage sur mobile et un titre de page descriptif. L’encodage évite les problèmes avec les accents ; la balise viewport permet au contenu de s’adapter aux petits écrans ; le titre apparaît notamment dans l’onglet du navigateur et peut être utilisé dans les résultats de recherche.

Le titre de la page doit décrire son contenu plutôt que son apparence. « Accueil » est peu informatif si la page présente une activité précise. Un intitulé comme « Création de sites web pour indépendants » aide davantage les visiteurs à identifier la page.

Organiser la page avec des éléments qui ont un rôle

Les éléments sémantiques indiquent la fonction d’une zone, et pas seulement sa position visuelle. Ils rendent la structure plus lisible pour les technologies d’assistance et facilitent aussi la maintenance du projet.

Ces éléments ne remplacent pas automatiquement les conteneurs génériques. Un div reste utile lorsqu’aucun rôle sémantique plus précis ne convient, par exemple pour regrouper des éléments uniquement afin de leur appliquer une mise en page CSS. En revanche, utiliser des div pour toutes les zones prive le document d’indices utiles.

Construire une hiérarchie de titres compréhensible

Les titres ne servent pas seulement à agrandir du texte. Ils organisent le contenu comme un plan. La page possède généralement un titre principal avec h1, puis des titres de niveau inférieur avec h2 et, si nécessaire, h3.

Une page peut contenir plusieurs zones visuellement importantes, mais son contenu principal doit rester identifiable. Évitez de choisir un niveau de titre en fonction de sa taille à l’écran : la taille se règle avec CSS, tandis que le niveau indique la relation entre les idées.

Un plan cohérent pourrait suivre cette logique :

• h1 : Créer un site vitrine accessible
• h2 : Définir les objectifs du site
• h2 : Préparer les contenus
• h3 : Rédiger les textes de présentation
• h3 : Choisir les images
• h2 : Tester la page avant publication

Ne sautez pas directement d’un h2 à un h4 uniquement pour obtenir une taille plus petite. Si le contenu mérite un sous-niveau, utilisez h3, puis ajustez son apparence avec la feuille de style.

Donner une navigation utilisable au clavier

Une navigation accessible doit être utilisable sans souris. Les liens et les boutons natifs sont conçus pour recevoir le focus et être activés au clavier. Il vaut donc mieux utiliser un élément a pour accéder à une autre page et un élément button pour déclencher une action sur la page.

Un lien doit annoncer sa destination. Une succession de textes comme « cliquez ici » ne permet pas de comprendre la destination lorsqu’un lecteur d’écran parcourt uniquement les liens. Préférez des formulations telles que « consulter les tarifs » ou « lire le guide de préparation ».

Le menu principal peut être placé dans un élément nav. Si la page comporte plusieurs navigations, ajoutez un intitulé accessible pour les distinguer. Un lien d’évitement placé au début du document peut également permettre de rejoindre directement le contenu principal, ce qui évite de parcourir le même menu à chaque page.

Ne supprimez pas systématiquement le contour visible du focus avec CSS. Lorsqu’un utilisateur appuie sur la touche Tabulation, il doit pouvoir repérer l’élément actif. Si vous personnalisez cet indicateur, veillez à conserver un contraste clairement visible.

Rendre les images et les formulaires compréhensibles

Une image informative doit disposer d’un texte alternatif qui transmet son sens. Ce texte décrit la fonction de l’image dans le contexte de la page, plutôt que chaque détail visuel. Une photo montrant un atelier peut avoir pour texte alternatif « équipe réunie autour d’une maquette de site » si cette information est utile à la compréhension.

Une image purement décorative ne doit pas détourner l’attention d’un lecteur d’écran. Dans ce cas, son attribut alternatif peut rester vide. Il ne faut pas écrire « image de » ou « photo de » par réflexe : le contexte indique déjà qu’il s’agit d’une image.

Les formulaires demandent une attention particulière. Chaque champ doit être associé à une étiquette visible et explicite. Le texte placé uniquement dans l’espace réservé du champ ne suffit pas : il disparaît pendant la saisie et peut être difficile à percevoir pour certaines personnes.

Regroupez les informations lorsque cela clarifie la tâche. Par exemple, les coordonnées, les préférences de contact et le message peuvent former des ensembles distincts. Indiquez aussi le format attendu lorsqu’une donnée est particulière, comme une date ou un numéro de téléphone.

Soigner les textes, les contrastes et les états d’erreur

L’accessibilité ne dépend pas uniquement des balises. Un texte rédigé avec des phrases claires, des liens explicites et des instructions précises est plus facile à utiliser par tout le monde. Ne transmettez jamais une information par la couleur seule : « les champs en rouge sont obligatoires » exclut les personnes qui ne distinguent pas certaines couleurs.

Les contrastes doivent rester suffisants entre le texte et l’arrière-plan. Vérifiez aussi les éléments interactifs, les messages d’erreur et les textes secondaires, souvent oubliés lorsque la palette est définie. Une interface élégante mais trop peu contrastée devient fatigante à lire, particulièrement sur mobile ou dans un environnement lumineux.

Lorsqu’un formulaire est envoyé avec une erreur, le message doit expliquer le problème et la manière de le corriger. « Champ invalide » est moins utile que « Indiquez une adresse e-mail au format nom@domaine.fr ». Le message doit être associé au champ concerné et ne pas reposer uniquement sur une couleur ou une icône.

Vérifier la page avant de la considérer comme terminée

Un premier contrôle peut être réalisé sans outil particulier. Parcourez la page avec la touche Tabulation, activez les liens et les boutons, puis vérifiez que l’ordre de lecture reste logique. Réduisez également la largeur de la fenêtre pour repérer les débordements et les informations devenues difficiles à consulter sur mobile.

Relisez ensuite le document comme un plan : y a-t-il un titre principal identifiable ? Les sections ont-elles un titre pertinent ? Le contenu principal est-il distinct du menu et du pied de page ? Les images importantes ont-elles une alternative adaptée ?

• Vérifier que chaque champ possède une étiquette associée.
• Contrôler que les liens décrivent leur destination.
• Tester la navigation au clavier sans utiliser la souris.
• Observer les états de focus, de survol et d’erreur.
• Vérifier le contraste du texte et des composants interactifs.
• Utiliser un outil d’audit automatique comme point de départ, sans considérer son résultat comme une validation complète.

Les outils automatiques détectent certains problèmes, mais ils ne savent pas toujours juger la pertinence d’un texte alternatif, la logique d’un intitulé ou la clarté d’un message. Un contrôle humain reste nécessaire, idéalement avec plusieurs modes de navigation.

La base à retenir pour un premier projet

Une page HTML de qualité ne repose pas sur un grand nombre de balises, mais sur des choix cohérents. Définissez le rôle de chaque zone, construisez un plan de titres logique, utilisez les contrôles natifs du navigateur et décrivez correctement les contenus non textuels. Cette base améliore à la fois la compréhension du document, son référencement et son utilisation quotidienne.

Commencez par une seule page et testez-la avant d’ajouter des composants complexes. Une structure simple, vérifiée au clavier et relue comme un plan, sera plus facile à faire évoluer qu’un assemblage de conteneurs et d’éléments interactifs recréés inutilement.