Prérequis.
sommaireLes 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.
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).
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>
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.
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>
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 attributtitle
explicite. - Si plusieurs champs doivent être regroupés, on utilise un
fieldset
. Une baliselegend
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>
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.
sommaireAccessibilité 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]