Les bases de l’accessibilité Web en HTML.

Un site accessible, c’est bon pour les utilisateurs et les moteurs de recherche ! Voici le résumé d’une présentation de la société Qelios sur l’accessibilité Web. J’ai ajouté des exemples de codes et quelques remarques personnelles.

Prérequis.

Découvrir HTML (en anglais).

sommaire

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.

Exemples d’intégration d’images.

<img alt="" src="/template/carre-jaune.png" />
Pour une image décorative.
<img alt="Nom du site" src="/images/logo.png" />
Pour le logo d’un site.
<img alt="Un chien sort de l'eau. Extérieur ensoleillé."
  src="/images/golden-retriever.jpg" />
Pour cette photo de chien.
<figure>
<img alt="Un chien sort de l'eau. Extérieur ensoleillé."
  src="/images/golden-retriever.jpg" />
<figcaption>
Toby adore la mer !
</figcaption>
</figure>
La même photo de chien, intégrée avec la balise figure.
sommaire

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.

sommaire

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

Exemple d’intégration d’un tableau.

<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>
sommaire

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.

sommaire

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.

Exemple de lien d’évitement.

<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>
sommaire

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.

Exemple de formulaire de contact.

<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>
sommaire

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.

sommaire
Référence.

Accessibilité du Web : méthodes d’évaluation rapide. Présentation en 15 panneaux du groupe Qelios. Conférence Romande sur l’Accessibilité du Web, Lausanne, . [retour à la référence]