HTML Accessibilité
Accessibilité HTML
Écrivez toujours du code HTML en tenant compte de l'accessibilité !
Offrez à 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
L'HTML sémantique signifie utiliser les éléments HTML appropriés pour leur but correct autant que possible. Les éléments sémantiques sont des éléments ayant une signification ; si vous avez besoin d'un bouton, utilisez l'élément <button> (et non un élément <div> ).
Sémantique
<button>Signaler une erreur</button> Non-sémantique
<div>Signaler une erreur</div> L'HTML sémantique donne un contexte aux lecteurs d'écran, qui lisent le contenu d'une page à haute voix.
Avec l'exemple du bouton en tête :
- les boutons ont un style par défaut plus approprié
- un lecteur d'écran l'identifie comme un bouton
- focalisable
- cliquable
Un bouton est également accessible pour les personnes qui dépendent de la navigation uniquement au clavier ; il peut être cliqué avec la souris et les touches, et il peut être parcouru (en utilisant la touche tab sur le clavier).
Exemples d'éléments non-sémantiques : <div> et <span> - Ne donnent aucune indication sur leur contenu.
Exemples d'éléments sémantiques : <form> , <table> , et <article> - Définissent clairement leur contenu.
Les Titres Sont Importants
Les titres sont définis avec les balises <h1> à <h6> :
Exemple
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 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 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 spécifient le plan de la page. Les titres <h1> doivent être utilisés pour les titres principaux, suivis des titres <h2> , puis des titres moins importants <h3> , et ainsi de suite.
Remarque : Utilisez les titres HTML uniquement pour les titres. N'utilisez pas de titres pour rendre le texte GRAND ou gras .
Texte Alternatif
L'attribut alt fournit un texte alternatif pour une image, si l'utilisateur ne peut pas la voir pour une raison quelconque (en raison d'une connexion lente, d'une erreur dans l'attribut 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="Une rue étroite de la ville avec des fleurs à Chania"> Si un navigateur ne peut pas trouver une image, il affichera la valeur de l'attribut alt :
Exemple
<img src="wrongname.gif" alt="Une rue étroite de la ville avec des fleurs à Chania"> Déclarez la Langue
Vous devez toujours inclure l'attribut lang à l'intérieur de la balise <html> , pour déclarer la langue de la page Web. Cela 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 exemple :
- Gardez les 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év, écrivez Février
- Évitez les mots d'argot
Créez 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 de mauvais liens :
Bon
Mauvais
Remarque : Cette page est une introduction à l'accessibilité web. Visitez notre Tutoriel sur l'accessibilité pour plus de détails.