Cours HTML / Bases de l’accessibilité : titres, liens, images et clavier

Un HTML accessible commence par le choix des éléments en fonction de leur signification. Utilisez les titres dans un ordre logique, écrivez des liens qui révèlent leur destination, fournissez aux images des alternatives appropriées et assurez-vous que les personnes peuvent effectuer les interactions avec un clavier.

Utilisez les titres pour décrire la hiérarchie

Un titre n'est pas simplement un texte en grand. Il marque un niveau dans le document : un sujet de page peut utiliser h1, les sections principales h2, et leurs sous-sections h3. Ne passez pas directement à h4 simplement parce que vous aimez sa taille par défaut ; ajustez l'apparence avec le CSS. Quelqu'un qui lit uniquement les titres devrait être capable de comprendre le plan de la page. Comparez les niveaux de titres et les paragraphes dans les exemples de Titres et Paragraphes.

Par exemple, « Informations de livraison » peut être une section principale, avec « Zones de livraison » et « Horaires de livraison » comme sous-sections. Évitez les titres vides ou les titres qui ne correspondent pas au texte ci-dessous. La hiérarchie des titres aide les personnes à lire visuellement et à naviguer avec les technologies d'assistance.

Rendez les liens et les images compréhensibles

Une liste de liens tous nommés « ici » donne peu d'indications sur leurs destinations. Indiquez l'objectif dans le texte du lien, comme dans <a href="guide.html">Lire le guide utilisateur</a>. Si le lien télécharge un fichier, précisez son type dans le contexte environnant. Passez en revue les alternatives d'image appropriées au rôle et les dimensions dans Images : img, texte alternatif et dimensions.

Le texte alt d'une image informative doit transmettre l'information qu'elle apporte ici. Une image purement décorative qui répète un texte proche peut utiliser alt="". Une image utilisée comme lien doit également indiquer l'objectif du lien, comme « Ouvrir le guide utilisateur ». Évitez de lister chaque couleur ou forme visible lorsque la fonction est ce qui compte. L'arborescence de décision W3C WAI pour les images aide à déterminer quelle alternative est appropriée.

Essayez la page sans souris

1. Utilisez Tab pour naviguer à travers les liens, les champs de formulaire et les boutons.
2. Vérifiez que l'élément focalisé est visiblement identifiable.
3. Activez les contrôles en utilisant Entrée ou Espace selon le cas.
4. Si un formulaire rapporte une erreur, lisez-la, retournez au champ, corrigez la valeur et soumettez à nouveau.

Un div avec uniquement un gestionnaire de clic n'acquiert pas automatiquement la signification ou le comportement clavier d'un bouton. Utilisez a pour la navigation et button pour les actions. Si un menu ou un contenu dépliable s'ouvre et se ferme, vérifiez où le focus clavier se déplace ensuite. Le focus ne doit pas disparaître dans du contenu caché, et l'ordre de navigation doit approximativement correspondre à l'ordre de lecture. Vérifiez l'association explicite des noms de champs avec l'exercice de clic sur le label dans Associer correctement label et input.

Typiquement, un lien focalisé s'ouvre avec Entrée, tandis qu'un bouton s'active avec Entrée ou Espace. Choisir un élément qui correspond à la navigation ou à l'action donne aux utilisateurs clavier le comportement attendu, plutôt que de forcer un lien à imiter un bouton ou inversement.

Une petite page pour les tests manuels

Enregistrez le code complet sous accessible-page.html et placez l'image d'exemple de 960px de la leçon sur les images à côté. Le formulaire est destiné à la validation et à l'inspection des valeurs GET, pas à recevoir des messages.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice de test au clavier</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Aller au contenu principal</a>
  <header>
    <nav aria-label="Sur cette page">
      <a href="#guide">Guide de visite</a>
      <a href="#contact">Exercice de contact</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Guide Petit Jardin</h1>
    <section id="guide">
      <h2>Guide de visite</h2>
      <p>Prévoyez des chaussures confortables et de l’eau.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan" width="960" height="540">
    </section>
    <section id="contact">
      <h2>S’entraîner avec un champ de contact</h2>
      <form method="get">
        <label for="practice-email">E-mail (obligatoire)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Utilisez nom@example.com plutôt qu’une adresse réelle.</p>
        <button type="submit">Examiner les valeurs saisies</button>
      </form>
    </section>
  </main>
</body>
</html>

1. Appuyez une fois sur Tab pour mettre le lien de saut au focus, puis Entrée pour passer le menu répété et atteindre le contenu principal.
2. L'élément principal avec tabindex="-1" permet de recevoir le focus sans ajouter un autre arrêt Tab normal. Vérifiez que le mouvement suivant avec Tab suit un ordre de lecture utile.
3. Atteignez le formulaire et comparez une soumission vide, une valeur invalide comme abc, et une adresse de test correctement formatée. Son étiquette et ses instructions doivent rester disponibles pendant que vous tapez.
4. Vérifiez le texte, l'image et le champ à 390px et avec le zoom. Renommez temporairement l'image pour examiner son texte alternatif, puis restaurez le nom du fichier.

HTML fournit la sémantique et les interactions natives ; CSS fournit la disposition et le traitement visuel du focus. Les erreurs personnalisées ou les menus complexes peuvent nécessiter une gestion supplémentaire de l'état et du focus via JavaScript. Réussir cet exercice n'est pas une garantie que la page satisfait à toutes les exigences d'accessibilité.

Tutoriel sur la structure des pages W3C WAI

Comprendre ce que les tests peuvent et ne peuvent pas prouver

Un vérificateur automatisé peut détecter certaines erreurs de balisage, mais il ne peut pas toujours juger si un lien est compréhensible ou si la description d'une image est utile dans le contexte. Combinez les résultats des outils avec des tests au clavier, le zoom et, le cas échéant, un lecteur d'écran. Commencez par les parcours utilisateur importants du site plutôt que de considérer un rapport sans erreurs comme une garantie. Le guide MDN sur l'accessibilité HTML couvre davantage de modèles HTML natifs.