Accessibilité HTML
Accessibilité HTML
É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 ayant un sens ; si vous avez besoin d'un bouton, utilisez l' <button>élément (et non un
<div>élément).
Sémantique
<button>Report an Error</button>
Non sémantique
<div>Report an Error</div>
Le HTML sémantique donne un contexte aux lecteurs d'écran, qui lisent le contenu d'une page à haute voix.
Avec l'exemple de bouton à l'esprit :
- 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 qui utilisent uniquement la navigation au clavier ; il peut être cliquable à la fois 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 en-têtes sont définis avec les balises <h1>to :<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>
Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de vos pages Web.
Les utilisateurs parcourent vos pages par ses titres. Il est important d'utiliser des en-têtes pour montrer la structure du document et les relations entre les différentes sections.
Les lecteurs d'écran utilisent également les en-têtes comme outil de navigation. Les différents types d'en-tête précisent le contour de la page.
<h1>Les en-têtes doivent être utilisés pour les en-têtes principaux, suivis des en <h2>-têtes, puis les moins importants
<h3>, et ainsi de suite.
Remarque : Utilisez les en-têtes HTML uniquement pour les en-têtes. N'utilisez pas d'en-têtes pour rendre le texte BIG ou bold .
Texte alternatif
L' altattribut fournit un texte alternatif pour une image, si l'utilisateur ne peut pas l'afficher pour une raison quelconque (à cause d'une connexion lente, d'une erreur dans l'
src
attribut ou si l'utilisateur utilise un lecteur d'écran).
La valeur de l' altattribut doit décrire l'image :
Exemple
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Si un navigateur ne trouve pas une image, il affichera la valeur de l' alt
attribut :
Exemple
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Déclarer la langue
Vous devez toujours inclure l' lang
attribut à l'intérieur de la <html>balise, 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, facile à comprendre. Essayez également d'éviter les caractères qui ne peuvent pas être lus clairement par un lecteur d'écran. Par example:
- Faites des phrases 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
Un texte de lien doit expliquer clairement quelles informations le lecteur obtiendra en cliquant sur ce lien.
Exemples de bons et mauvais liens :
Bon
Mal
Remarque : Cette page est une introduction à l'accessibilité Web. Visitez notre tutoriel d'accessibilité pour plus de détails.