MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
HTML5 Cours pour débutants

En Ua Es De

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>).

Sémantique

<button>Signaler une erreur</button>
Try it Yourself »

Non sémantique

<div>Signaler une erreur</div>
Try it Yourself »

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 :

Remarque : Cette page est une introduction à l'accessibilité Web. Visitez notre Tutoriel accessibilité pour plus de détails.



Commentaires