Feuilles de style, touches d'accès, acronymes, tabindex et politique de liens : autant de points à examiner attentivement pour veiller à l'accessibilité d'un site Web (lire notre article précédent). Nous en détaillons deux autres ici.

Faire appel aux bonnes balises pour un formulaire
Avec l'essor du e-commerce et des Web-applications, les formulaires se généralisent. Bien souvent, leur conception ne tient pas compte des possibilités qui existent pour en améliorer la lecture : à savoir les balises fieldset, legend et surtout label qui malgré leur grande utilité sémantique ne sont que trop rarement utilisées.

Ainsi, fieldset permet, comme son nom l'indique, de créer des blocs au sein du formulaire, afin de répartir l'information par thème : par exemple, un bloc "Civilités", un autre "Coordonnées", un troisième "Goûts" (Lire aussi l'article : Comment aligner les cases à cocher (checkboxes) et leur label quel que soit le navigateur ?)

legend fonctionne en accord avec fieldset, et permet de nommer le bloc pour le lecteur. Ce nommage s'affiche en HTML, ou est lu pour les lecteurs appropriés.

label, enfin, permet d'attacher des informations à un (et un seul) élément. Cela permet de sélectionner l'élément en cliquant sur son label, et de faire lire le label par les navigateurs vocaux.

<form>
  <fieldset>
    <legend>Civilités</legend>
    <label for="nom">Nom :</label> <input type="text" id="nom" /><br />
    <label for="prenom">Prénom :</label> <input type="text" id="prenom" /><br />
    <label for="age">Âge :</label> <input type="text" id="age" /><br />
  </fieldset>
  <fieldset>
    <legend>Coordonnées</legend>
    <label for="adresse">Adresse postale :</label> <input type="text" id="adresse" /><br />
    <label for="numtel">Numéro de téléphone :</label> <input type="text" id="numtel" /><br />
    <label for="mail">Adresse E-mail :</label> <input type="text" id="mail" /><br />
  </fieldset>
  <fieldset>
    <legend>Goûts</legend>
    <label for="mathrock">Math-rock :</label> <input type="checkbox" id="mathrock" /><br />
    <label for="sourya">Melancopop :</label> <input type="checkbox" id="sourya" /><br />
    <label for="skarev">Mod revival :</label> <input type="checkbox" id="skarev" /><br />
    <label for="oi">Oi! :</label> <input type="checkbox" id="oi" /><br />
  </fieldset>
</form>

donne :

Trier et nommer les images
Dès que l'on a compris que l'on pouvait combiner table, images découpées et pixels transparents, le Web s'est trouvé rempli d'interfaces graphiques qui le plus souvent desservaient leur contenu plutôt qu'elles ne le mettaient en valeur.

XHTML rend désormais obligatoire le remplissage de l'attribut alt de la balise img. Cet attribut, largement sous-utilisé, permet non seulement de décrire l'image au plus grand nombre (textuellement pour Google, vocalement pour les mal/non-voyants, sous forme de "tooltip" pour IE), mais aussi d'éviter que les navigateurs des non-voyants ne passent leur temps à déclamer les descriptifs de toutes les images "de remplissage" (par exemple, : "shim.gif, shim.gif, shim.gif, shim.gif, Bienvenue sur notre site!, shim.gif..."), en utilisant simplement l'attribut vide alt="".
Note: Pour afficher un tooltip pour tous les navigateurs (pas seulement IE), il faut ajouter l'attribut title="" (optionnel, lui)...

Il faut partir du principe que toutes les images utiles sur une page doivent avoir une description courte et explicite, tandis que toutes les images inutiles doivent arborer l'attribut vide alt="". On pourrait aller plus loin en précisant que toutes les images inutiles n'ont simplement pas leur place au sein du document HTML, et devraient soit être retirées, soit déplacées dans la feuille de style...
A éviter absolumer : <img src="img/pixel.gif" alt="pixel transparent" width="100" height="1" />.

Forum

Réagissez dans les forums de JDN Développeurs

On pourrait ajouter à ces deux pratiques la modération dans l'usage des technos type Flash, JavaScript, Java, QuickTime, etc. Nombre d'améliorations cosmétiques aux pages les plus courantes pourraient parfaitement être sorties du document HTML pour être placée dans des fichiers externes, comme une feuille CSS ou la logique JavaScript, plutôt que les inclure au sein du document principal, encombrant ainsi non seulement la bande passante (qui reste encore très chère de nos jours), mais également les navigateurs textuels ou Braille, et les robots tels le Googlebot ou le Slurp! de Yahoo!...

Et bien sûr, on préférera dans la conception du site Web une sémantique des balises. Exemple : utiliser h1 pour un titre, li/ol pour un menu, plutôt qu'un enchevêtrement de balises table, font, p, br... Mais il faut aussi pouvoir maîtriser son contenu de bout au bout, et donc idéalement disposer d'un système de publication qui prend en charge la validation... ou ne la détruit pas !