Structure de la page : langue, titres et repères

Un visiteur voyant repère tout de suite le menu, le contenu et le pied de page. Une personne aveugle avec un lecteur d’écran ne le sait que par le code : le lecteur liste les titres ou les zones de la page et l’utilisateur saute directement où il veut. C’est pourquoi la structure compte plus que tout le reste.

Le squelette de la page

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulaires accessibles – Garth.cz</title>
</head>
<body>
  <a class="skip-link" href="#content">Aller au contenu</a>
  <header>
    <a href="/">Garth.cz</a>
    <nav aria-label="Menu principal">
      <ul>
        <li><a href="/tutoriels-php/">PHP</a></li>
        <li><a href="/tutoriels-css/">CSS</a></li>
      </ul>
    </nav>
  </header>
  <main id="content">
    <h1>Formulaires accessibles</h1>
    <p>Introduction de l'article…</p>
    <h2>Étiquettes des champs</h2>
    <p>…</p>
  </main>
  <footer>
    <p>Contact : <a href="/ecrivez-moi/">écrivez-moi</a></p>
  </footer>
</body>
</html>

• lang="fr" – le lecteur d’écran choisit la voix et la prononciation selon la langue. Sans cet attribut, il peut lire une page rédigée en français avec la voix d’une autre langue (critère 3.1.1). Voir l’attribut lang.
• title – le titre de la page est la première chose que lit le lecteur d’écran après le chargement, et il s’affiche aussi dans l’onglet du navigateur. Il doit être univoque : d’abord le contenu de la page, puis le nom du site (critère 2.4.2).
• meta viewport sans maximum-scale=1 ni user-scalable=no – sur un téléphone, la page doit pouvoir s’agrandir avec les doigts.
• Les repères – header au niveau de la page est la bannière (rôle banner), nav la navigation, main le contenu principal (une seule fois par page) et footer le pied de page (rôle contentinfo). Le lecteur d’écran NVDA passe de l’un à l’autre avec la touche D.
• Distinguez plusieurs navigations (menu principal, menu du pied de page, fil d’Ariane) avec aria-label – le lecteur d’écran annonce alors le nom de chaque navigation, par exemple « Menu principal » ou « Fil d’Ariane ». N’écrivez pas le mot navigation dans l’étiquette, le lecteur l’ajoute lui-même.
• L’exemple n’a pas de styles. Dans un vrai menu, donnez aux liens une surface suffisante – au moins 24 × 24 pixels ou un espacement suffisant entre eux (critère 2.5.8). Cela ne concerne pas les liens dans le texte d’un paragraphe.

Les titres

Les titres h1–h6 forment le plan de la page. Les utilisateurs de lecteurs d’écran se déplacent le plus souvent dans une page justement par les titres (touche H dans NVDA, les chiffres 1 à 6 sautent aux titres du niveau correspondant).

• Un seul h1 par page, avec le sujet de la page (nom de l’article ou du produit).
• Ne sautez pas de niveau : après un h2 vient un h3, pas directement un h4. L’utilisateur penserait qu’il manque une partie du plan.
• Choisissez le niveau d’un titre selon sa place dans le plan, pas selon la taille de la police. La taille, c’est l’affaire du CSS.
• Un paragraphe en gras n’est pas un titre – le lecteur d’écran ne le trouvera pas parmi les titres.

Erreur – le titre saute des niveaux parce que l’auteur préférait le h4 plus petit :

<h1>Formulaires accessibles</h1>
<h4>Étiquettes des champs</h4>
<p>Chaque champ a besoin d'une étiquette…</p>

Le lien d’évitement

Qui utilise le site au clavier doit, sur chaque page, traverser tout le menu avant que la touche Tab l’amène au contenu. Un lien placé en début de page ramène cela à un seul appui sur Entrée (critère 2.4.1). Le lien est caché hors de l’écran et apparaît lorsqu’il reçoit le focus :

<a class="skip-link" href="#content">Aller au contenu</a>
<nav aria-label="Menu principal">
  <a href="/tutoriels-php/">PHP</a>
  <a href="/tutoriels-css/">CSS</a>
  <a href="/tutoriels-javascript/">JavaScript</a>
</nav>
<main id="content">
  <h1>Titre de la page</h1>
  <p>Du texte et <a href="/liste-des-sources/">un premier lien dans le contenu</a>.</p>
</main>

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  padding: 8px 14px;
  background: #1a1a1a;
  color: #fff;
  z-index: 100;
}
.skip-link:focus {
  top: 8px;
}

Vérifié dans Chrome et Firefox : le premier appui sur Tab affiche le lien, Entrée déplace la lecture vers le contenu principal et le Tab suivant passe au premier lien du contenu – le menu est sauté. La cible du lien n’a pas besoin de tabindex, les navigateurs déplacent eux-mêmes le point de départ de la touche Tab sur la cible.

Ne cachez pas le lien avec display: none ni visibility: hidden – un tel élément ne reçoit pas du tout le focus. Il est utile même sur les sites au menu court : les personnes qui naviguent au clavier sont plus nombreuses qu’on ne le croit.

La langue d’un passage

Marquez un passage en langue étrangère avec l’attribut lang et le lecteur d’écran le lira avec la bonne prononciation (critère 3.1.2). Cela ne concerne pas les mots empruntés ni les noms propres (week-end, web, Google).

<p>Notre pâtisserie est célèbre pour son <span lang="de">Apfelstrudel</span> – goûtez-le avec un café.</p>
<blockquote lang="en">
  <p>Less is more.</p>
</blockquote>

Un texte réservé aux lecteurs d’écran

Parfois, visuellement, tout est clair grâce au contexte, mais le lecteur d’écran manque d’informations. Le cas typique, ce sont les liens Lire la suite dans une liste d’articles : la liste des liens que peut afficher l’utilisateur d’un lecteur d’écran contient alors dix liens Lire la suite identiques (critère 2.4.4). La solution est un texte masqué aux yeux, que le lecteur d’écran lit malgré tout :

<a href="/accessibilite-web/formulaires-accessibles/">Lire la suite<span class="visually-hidden"> sur les formulaires accessibles</span></a>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Le lecteur d’écran annonce le lien comme « Lire la suite sur les formulaires accessibles ». L’élément mesure un pixel et il est rogné, mais il reste dans la page – contrairement à display: none, qui masque le texte aussi aux lecteurs d’écran. Attention aux liens visibles : la commande vocale (« cliquer sur Lire la suite ») travaille avec le texte visible, c’est pourquoi le nom du lien doit commencer par le texte visible (critère 2.5.3).

Des éléments sémantiques plutôt que des div

Le lecteur d’écran ne reconnaît le sens qu’à la balise. Une liste doit être un élément ul (le lecteur annonce « liste, 5 éléments »), un tableau de données un élément table avec des cellules d’en-tête th et une légende caption, un bouton un élément button et un lien un élément a avec une adresse. N’utilisez pas de tableaux pour la mise en page. Là où le HTML ne suffit pas, ARIA complète le sens – plus d’informations dans l’article ARIA en pratique.