Les bases de l’accessibilité Web en HTML.

Prérequis.

Découvrir HTML (en anglais).

Les images.

Une image (balise img) possède un attribut alt, qui permet d’avoir un texte descriptif au cas où elle ne peut être visualisée. Les moteurs de recherche sont très friands du contenu de cet attribut — ce qui ne doit pas pousser à y mettre n’importe quoi. Notons également que, s’il s’agit d’une image purement décorative, l’attribut reste vide.

<img alt="" src="/template/carre-jaune.png" />

<img alt="Nom du site" src="/images/logo.png" />

<img alt="Un chien sort de l'eau. Extérieur ensoleillé."
  src="/images/golden-retriever.jpg" />

<figure>
<img alt="Un chien sort de l'eau. Extérieur ensoleillé."
  src="/images/golden-retriever.jpg" />
<figcaption>
Toby adore la mer !
</figcaption>
</figure>

Les cadres.

Les cadres iframe ont des titres uniques et pertinents. Le contexte de navigation est ainsi compréhensible. Pour rappel, les balises frame et frameset sont désormais des éléments non-standards.

Les tableaux.

Chaque tableau possède un titre qui informe de la nature de son contenu (balise caption). De même, des cellules d’en-tête facilitent la compréhension de chaque rangée (balise th), et la balise colgroup peut préciser le nombre de colonnes. Éventuellement, un résumé du contenu du tableau peut être proposé. Voici différentes techniques pour décrire un tableau (W3C).

<table>
<caption>
 <strong>Résultat des élections.</strong>
 <p>
 Basé sur le suffrage exprimé, sauf
 abstention calculée sur l'ensemble des suffrages.
 </p>
</caption>
<colgroup><col /><col /><colgroup>
<thead>
<tr>
 <th>Candidat A</th>
 <th>Candidat B</th>
 <th>Abstention</th>
</tr>
</thead>
<tbody>
<tr>
 <td>53%</td>
 <td>47%</td>
 <td>7%</td>
</tr>
</tbody>
</table>

Les cadres.

Le lien (balise a) est le fondement de l’hypertextualité et donc du web. Il n’est pas vide. Il est unique, explicite mais pas trop long. Parfois, l’attribut title peut apporter un complément d’informations au contenu du lien. Par convention, le lien est souligné — ce qui permet de l’identifier immédiatement.

La structure du document.

Les titres (balises Hx) structurent le document suivant un système hiérarchisé de parties et de sous-parties. De cette structure dépendent grandement la facilité de lecture et la compréhension du document.

Lorsque la page est composée de plusieurs longues sections, il est judicieux de proposer des liens d’accès rapide (appelés aussi lien d’évitement). Ces liens évitent en effet aux lecteurs d’écran d’avoir à lire toute une partie de la page pour en atteindre une autre. Mais cela évite aussi aux utilisateurs sur mobile d’avoir à scroller à tout-va.

<h2>Section A</h2>
  <a class="skip-content" href="#sec-b">Aller à la section B</a>
  <p>Du contenu inutile pour l'utilisateur...</p>
<!-- fin Section A -->
<h2 id="sec-b">Section B</h2>
  <p>Du contenu utile pour l'utilisateur...</p>

Les formulaires.

Le formulaire a toujours été le parent pauvre de l’accessibilité. Pourtant, quelques règles simples peuvent faciliter son utilisation par tous les internautes :

• Chaque champ est relié à un label, ou à défaut il dispose d’un attribut title explicite.
• Si plusieurs champs doivent être regroupés, on utilise un fieldset. Une balise legend explicite alors ce regroupement.

<form id="contact" method="post"
  action="/admin/contact.php">
 <fieldset>
 <legend>Informations personnelles :</legend>
 <p>
  <label for="name">Nom :
   <input id="name" name="name" type="text" required />
  </label>
 </p>
 <p>
  <label for="email">Email :
   <input id="email" name="email" type="email" required />
  </label>
 </p>
 </fieldset>
 <p>
  <label for="message">Message :</label>
  <textarea id="message" name="message" required>
  Votre message...
  </textarea>
 </p>
 <p>
  <button id="send" name="send" type="submit">Envoi !</button>
 </p>
</form>

Conclusion.

Ces bonnes pratiques sont une base simple et efficace pour rendre ses pages accessibles. On remarque aussi qu’un bon code ne sert à rien si le contenu n’est pas intelligible et cohérent. Enfin, d’autres paramètres entrent en compte, comme le rendu graphique, l’ergonomie et l’expérience utilisateur, ou encore l’architecture de l’information.