HTML Accessibilité
HTML Accessibilité
Écrivez toujours du code HTML en gardant l'accessibilité à l'esprit !
Fournissez à l'utilisateur un bon moyen de naviguer et d'interagir avec votre site. Rendez votre code HTML aussi sémantique que possible.
HTML sémantique
Le HTML sémantique signifie utiliser autant que possible des éléments HTML corrects pour leur objectif correct. Les éléments sémantiques sont des éléments qui ont un sens ; si vous avez besoin d'un bouton, utilisez l'élément <button> (et non un élément <div>).
Le HTML sémantique donne du contexte aux lecteurs d'écran, qui lisent le contenu d'une page à haute voix.
En gardant à l'esprit l'exemple du bouton :
- les boutons ont un style plus approprié par défaut
- un lecteur d'écran l'identifie comme un bouton
- focalisable
- cliquable
Un bouton est également accessible aux personnes utilisant une navigation au clavier uniquement ; il peut être cliqué avec la souris et les touches, et il peut être tabulé entre (en utilisant la touche de tabulation du clavier).
Exemples d'éléments non sémantiques : <div> et <span> - Ne dit rien sur son contenu.
Exemples d'éléments sémantiques : <form>, <table> et <article> - Définit clairement son contenu.
Les titres sont importants
Les titres sont définis avec les balises <h1> à <h6> :
Exemple
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try it Yourself »
Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de vos pages Web.
Les utilisateurs parcourent vos pages en fonction de leurs titres. Il est important d'utiliser des titres pour montrer la structure du document et les relations entre les différentes sections.
Les lecteurs d'écran utilisent également les titres comme outil de navigation. Les différents types de titres précisent le contour de la page. <h1> les titres doivent être utilisés pour les titres principaux, suivis des titres <h2>, puis des titres <h3> les moins importants, et ainsi de suite.
Remarque : Utilisez les titres HTML uniquement pour les titres. N'utilisez pas de titres pour rendre le texte GROS ou gras.
Texte alternatif
L'attribut alt fournit un texte alternatif pour une image, si l'utilisateur, pour une raison quelconque, ne peut pas la visualiser (en raison d'une connexion lente, d'une erreur dans le src, ou si l'utilisateur utilise un lecteur d'écran).
La valeur de l'attribut alt doit décrire l'image :
Exemple
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Try it Yourself »
Si un navigateur ne trouve pas d'image, il affichera la valeur de l'attribut alt :
Exemple
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Try it Yourself »
Déclarer la langue
Vous devez toujours inclure l'attribut lang dans la balise <html> pour déclarer la langue de la page Web. Ceci est destiné à aider les moteurs de recherche et les navigateurs.
L'exemple suivant spécifie l'anglais comme langue :
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Utilisez un langage clair
Utilisez toujours un langage clair et facile à comprendre. Essayez également d'éviter les caractères qui ne peuvent pas être lus clairement par un lecteur d'écran. Par exemple :
- Faites en sorte que les phrases soient aussi courtes que possible
- Évitez les tirets. Au lieu d'écrire 1 à 3, écrivez 1 à 3
- Évitez les abréviations. Au lieu d'écrire février, écrivez février
- Évitez les mots d'argot
Créer un bon texte de lien
Le texte d'un lien doit expliquer clairement quelles informations le lecteur obtiendra en cliquant sur ce lien.
Exemples de bons et de mauvais liens :
Bien
En savoir plus sur le langage HTML
En savoir plus sur comment manger sainement
Try it Yourself »
Remarque : Cette page est une introduction à l'accessibilité Web. Visitez notre Tutoriel accessibilité pour plus de détails.
