L'accessibilité et le SEO sont deux aspects fondamentaux du développement web moderne.
Accessibilité
Rendre votre site utilisable par tous :
- Personnes malvoyantes
- Personnes en situation de handicap
- Navigateurs alternatifs
- Appareils mobiles
SEO (Search Engine Optimization)
Rendre votre site plus visible :
- Google
- Bing
- Autres moteurs de recherche
- Réseaux sociaux
En résumé :
Un site accessible et bien optimisé pour le SEO est plus facile à trouver, plus agréable à utiliser et atteint un public plus large.
Certains attributs HTML sont essentiels pour améliorer l'accessibilité :
alt
Texte alternatif pour les images
<img src="photo.jpg" alt="Description">
tabindex
Contrôle l'ordre de tabulation
<button tabindex="1">OK</button>
aria-*
Attributs ARIA pour l'accessibilité avancée
<div aria-label="Description"></div>
Bon à savoir
Les attributs ARIA (Accessible Rich Internet Applications) complètent le HTML pour rendre les interfaces complexes accessibles.
L'attribut alt est essentiel pour décrire le contenu des images :
Bon exemple
<img src="chaton.jpg"
alt="Chaton jouant avec une pelote de laine">
Description précise et utile
À éviter
<img src="chaton.jpg" alt="image123">
Texte non descriptif
Règles pour un bon texte alternatif :
- Décrire l'image de manière concise mais précise
- Pour les images décoratives, utiliser
alt=""
- Ne pas commencer par "Image de..." (redondant)
- Inclure le texte présent dans l'image si pertinent
Une hiérarchie de titres claire est essentielle pour l'accessibilité et le SEO :
<h1>Titre principal de la page</h1>
<h2>Section importante</h2>
<h3>Sous-section</h3>
<h2>Autre section importante</h2>
Bonnes pratiques
- Un seul
<h1> par page (le titre principal)
- Ne pas sauter de niveaux (pas de
<h1> suivi d'un <h4>)
- Utiliser les titres pour structurer le contenu, pas pour le style
- Garder les titres concis mais descriptifs
Éléments clés pour le SEO :
- Hiérarchie des titres :
<h1> à <h6> bien organisés
- Contenu de qualité : Texte clair, pertinent et original
- Balises sémantiques :
<header>, <nav>, <main>, etc.
- Liens internes : Navigation cohérente entre les pages
- URLs descriptives :
mon-site.com/articles/html plutôt que mon-site.com/page123
Exemple de structure optimisée
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Métadonnées SEO -->
</head>
<body>
<header>
<nav><!-- Navigation --></nav>
</header>
<main>
<article>
<h1>Titre principal</h1>
<section>
<h2>Section 1</h2>
<p>Contenu pertinent...</p>
</section>
</article>
</main>
<footer><!-- Pied de page --></footer>
</body>
</html>