Service de mise à l'essai de l'accessibilité du Web (WATS) pour les concepteurs de pages Web du gouvernement du Canada
FAQ du soutien technique WATS
pour septembre 2002
Le rapport WATS recommande le remplacement de nos boutons radio et cases à cocher
par des menus déroulants afin de faciliter l'accessibilité. Toutefois, il existe des
circonstances dans lesquelles le recours à des boutons radio et des cases à cocher
est nécessaire sur notre site. Quelle est la taille approximative des cases et des
boutons qui permettrait de maximiser l'accessibilité?
À l'heure actuelle, il n'est pas possible de modifier la taille des boutons radio
et des cases à cocher. Si vous DEVEZ employer de tels boutons et cases sur votre
site, faites-le; il ne s'agit pas de la méthode recommandée, mais elle est
acceptable. Assurez-vous que les étiquettes des zones de saisie emploient également
l'élément <label> et les attributs <id>, et assurez-vous que les
étiquettes sont suffisamment « grandes » pour permettre aux utilisateurs de cliquer
dessus dans leur navigateur, si ce dernier prend correctement en charge ces éléments
(IE version 5.5 et sup. Netscape version 6 et sup., Opera version 5 et sup.).
<snip>
<label for="address" title="Adresse">Address:</label><br />
<textarea cols="20" rows="5" name="address" id="address" tabindex="3"
title="Adresse"></textarea>
</snip>
<snip>
Êtes-vous heureux?<br />
<input type="radio" name="happy" value="yes" id="happyyes" /> <label
for="happyyes" title="yes">Oui je le suis</label><br />
<input type="radio" name="happy" value="no" id="happyno" /> <label
for="happyno" title="no">Non je ne le suis pas</label>
<!-- Les étiquettes « Oui » et « Non » auraient probablement été trop petites pour
qu'il soit aisé de cliquer dessus, c'est pourquoi les étiquettes Oui je le suis et
Non je ne le suis pas sont plutôt employées -->
</snip>
où la valeur « for » (dans la balise <label>) est identique à l'attribut
<id> employé dans les formulaires de saisie. N'oubliez pas que chaque
identificateur doit être unique, ce qui explique la nécessité d'utiliser les
identificateurs « happyyes » et « happyno » dans le second exemple.
L'équipe WATS suggère de ne pas employer les tables simplement pour améliorer
l'apparence des formulaires. Que devons-nous utiliser pour aligner correctement le
texte et les éléments de formulaire?
Pour une accessibilité et facilité d'utilisation maximales, les formulaires
doivent être disposés selon un format linéaire :
<form...>
<fieldset title="Information sur le demandeur">
<legend> Information sur le demandeur </legend>
<label for="r_name" title="Prénom">Name:</label><div
class="small">(Required)</div><br />
<input type="text" name="r_name" size="20" maxlength="50" id="r_name"
title="Nom - obligatoire" tabindex="1" /><br />
<label for="r_familyname" title="Nom de famille">Family
Name:</label><div
class="small">(Required)</div><br />
<input type="text" name="r_familyname" size="20" maxlength="50"
id="r_familyname" title="Nom de famille - obligatoire"
tabindex="2" /><br />
<label for="r_email" title="Courrier électronique">email
Address:</label><div
class="small">(Required)</div><br />
<input type="text" name="r_email" id="r_email" size="20" maxlength="50"
title=" Courrier électronique - obligatoire" tabindex="3" /><br />
<label for="address" title="Adresse">Address:</label><br />
<textarea cols="20" rows="5" name="address" id="address" tabindex="4"
title="Adresse"></textarea><br />
</fieldset>
</form>
Si vous DEVEZ utiliser les propriétés de mise en page, il est recommandé
d'utiliser les feuilles de style en cascade. Il faut utiliser les tables uniquement
en dernier recours, et si elles SONT utilisées il faut s'assurer que les attributs
<label> et peut-être les éléments <tabindex> sont également utilisés.
Enfin, pour les formulaires particulièrement longs, pensez à utiliser les attributs
<fieldset> et <legend>. Bien que ces options ne soient pas prises en
charge par tous les navigateurs, l'absence de soutien universel ne devrait jamais
être une raison de NE PAS utiliser une technologie existante approuvée.
Le rapport WATS recommande de doubler la hauteur des images afin d'accroître la
surface de l'aire active dans le menu principal. Nous n'utilisons pas d'images, mais
plutôt des boutons à taille modifiable. Devrions-nous utiliser une technique
similaire à celle employée pour les images, ou bien les polices à taille modifiable
sont-elles suffisantes?
Le texte à taille modifiable est la méthode privilégiée; le commentaire faisait
référence aux sites qui utilisent des boutons graphiques plutôt que du texte.
|
