Quand on débute en HTML, on pense souvent que le SEO et l’accessibilité sont des sujets compliqués réservés aux experts. En réalité, ils commencent par des bases très simples : un HTML propre, logique et sémantique.
L’accessibilité vise à permettre à tous les utilisateurs d’utiliser un site : personnes malvoyantes, aveugles, daltoniennes, utilisateurs de clavier, lecteurs d’écran, ou connexions lentes.
Le SEO (Search Engine Optimization) vise à permettre aux moteurs de recherche de comprendre correctement le contenu de vos pages.
Bonne nouvelle : ce qui est bon pour l’accessibilité est presque toujours bon pour le SEO.
👉 Accessibilité + HTML sémantique = meilleure expérience + meilleur référencement.
1) Qu’est-ce que l’accessibilité web ?
Un site accessible est un site qui peut être utilisé :
- sans souris (clavier uniquement)
- avec un lecteur d’écran
- avec une vision réduite
- avec des difficultés cognitives
Exemple concret :
- Un bouton doit être atteignable au clavier
- Une image doit être compréhensible sans être vue
- La structure de la page doit être logique
L’accessibilité n’est pas une option : c’est une bonne pratique professionnelle et, dans certains pays, une obligation légale.
2) HTML sémantique : la base de tout
Le HTML sémantique consiste à utiliser les bonnes balises pour décrire le rôle du contenu, et pas seulement son apparence.
Mauvais exemple (non sémantique) :
<div class="header"> <div class="title">Mon site</div> </div>
Bon exemple (sémantique) :
<header> <h1>Mon site</h1> </header>
Le navigateur, les lecteurs d’écran et Google comprennent immédiatement le rôle de chaque élément.
3) Les principales balises sémantiques
Voici les balises sémantiques essentielles à connaître.
<header> et <footer>
<header> <nav>Navigation</nav> </header> <footer> <p>© 2026</p> </footer>
<main>
<main> <article>Contenu principal</article> </main>
<main> doit être unique sur la page.
<section> et <article>
<section> <h2>Tutoriels</h2> <article>Article 1</article> <article>Article 2</article> </section>
Astuce :
article= contenu autonomesection= groupe logique de contenu
4) Hiérarchie des titres (h1 → h6)
Les titres sont essentiels pour :
- la compréhension du contenu
- les lecteurs d’écran
- le SEO
Bonne hiérarchie :
<h1>Titre principal</h1> <h2>Section</h2> <h3>Sous-section</h3>
Erreurs à éviter :
- plusieurs
h1sans logique - sauter des niveaux (h1 → h4)
- utiliser les titres juste pour le style
5) L’attribut alt : images accessibles et SEO
L’attribut alt décrit le contenu d’une image.
Exemple correct :
<img src="ordinateur.jpg" alt="Développeur travaillant sur un ordinateur portable">
Bonnes pratiques pour alt :
- décrire l’image de façon claire
- être utile, pas trop long
- ne pas répéter “image de”
Image décorative :
<img src="decor.png" alt="">
6) Formulaires accessibles : labels et champs
Un formulaire accessible doit être compréhensible sans voir l’écran.
Bon exemple :
<label for="email">Adresse email</label> <input type="email" id="email" name="email">
Évitez :
- inputs sans label
- placeholder utilisé comme label
7) ARIA : quand le HTML ne suffit pas
ARIA (Accessible Rich Internet Applications) permet d’ajouter des informations aux lecteurs d’écran quand le HTML sémantique ne suffit pas.
Exemple simple :
<button aria-label="Fermer la fenêtre">X</button>
Exemple menu :
<nav aria-label="Navigation principale"> <a href="#">Accueil</a> </nav>
⚠️ Règle importante : utilisez ARIA seulement si le HTML sémantique ne suffit pas.
8) Pourquoi l’accessibilité améliore le SEO
Google “lit” votre site comme un lecteur d’écran :
- structure claire
- titres logiques
- contenu compréhensible
- images décrites
Un HTML accessible :
- réduit le taux de rebond
- améliore la compréhension du contenu
- renforce la crédibilité du site
9) Erreurs fréquentes en accessibilité et SEO HTML
- utiliser uniquement des div partout
- oublier les attributs alt
- titres mal hiérarchisés
- formulaires sans labels
- abuser d’ARIA inutilement
10) Mini checklist accessibilité & SEO
- HTML sémantique utilisé
- 1 seul h1 par page
- structure logique h2/h3
- images avec alt pertinent
- labels associés aux champs
- ARIA seulement si nécessaire
Vous avez maintenant les bases solides de l’accessibilité et du SEO HTML. En écrivant un HTML propre, sémantique et accessible, vous améliorez à la fois l’expérience utilisateur et le référencement.
Dans la Partie 18, nous passerons à un mini-projet final : création d’une page complète et responsive en appliquant toutes les bonnes pratiques vues dans ce tutoriel.
✅ Accessibilité et SEO commencent par un bon HTML.