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