English | Contactez-nous | Aide | Recherche | Site du Canada | |||||
Quoi de neuf? | À notre sujet | Politiques | Documents | Site du SCT |
Calendrier | Liens | FAQ | Présentations | Accueil |
|
Remplacement des boutons radio par des sélections
AperçuAu fil des ans, on a utilisé des boutons radio dans d'innombrables formulaires en ligne pour permettre aux utilisateurs de répondre à des questions à choix multiples. Ces boutons étaient très populaires en raison de leur grande similitude aux solutions utilisées dans les formulaires papier. Problèmes d'accessibilité liés aux boutons radioMalheureusement, dans l'univers des communications en direct, les boutons radio posent des problèmes d'accessibilité qui peuvent empêcher certains utilisateurs de remplir des formulaires en ligne. Voici quelques uns de ces problèmes :
Utilisation d'éléments de sélection comme alternative aux boutons radioHeureusement, il existe, au plan de l'accessibilité, une alternative aux boutons radio. L'élément de sélection permet de reproduire les caractéristiques des boutons radio tout en évitant les problèmes d'accessibilité qu'ils posent.
Voici les deux scénarios possibles de remplacement des boutons radio par des éléments de sélection :
Options décrites par un texte de petite ou moyenne tailleLes options décrites par un texte de petite ou moyenne taille tiennent facilement dans la rangée unique d'un élément de sélection. Pour mettre cette solution en œuvre, on remplace chaque bouton radio par une option que l'on inclut dans l'élément de sélection, tel qu'indiqué ci-dessous. Assurez-vous de préciser le nombre d'options dans l'attribut " size " de l'élément de sélection afin que toutes les options s'affichent simultanément, comme c'est le cas pour les boutons radio. Ancienne solution <div><label for="q1">Quelle est votre couleur préférée?</label><br /><input type="radio" name="q" id="q1" value="bleu" /><label for="q1">Bleu</label><br /> <input type="radio" name="q" id="q2" value="rouge" /><label for="q2">Rouge</label><br /> <input type="radio" name="q" id="q3" value="vert" /><label for="q3">Vert</label><br /> <input type="radio" name="q" id="q4" value="orange" /><label for="q4">Orange</label><br /> </div> Nouvelle solution <div><label for="q"> Quelle est votre couleur préférée?</label><br /><select size="4" name="q" id="q"> <option>Bleu</option> <option>Rouge</option> <option>Vert</option> <option>Orange</option> </select></div> Options décrites par un texte de grande tailleLes options décrites par un texte de grande taille ne tiennent pas facilement sur la rangée unique d'un élément de sélection. Un texte très long, sans retour à la ligne, qui étire l'élément horizontalement, est susceptible de créer des problèmes d' accessibilité et d'affichage. Les utilisateurs peuvent également être submergés lorsque vient le temps de choisir parmi plusieurs options décrites par des textes de grande taille, situation plus particulièrement problématique pour les utilisateurs de lecteur d'écran qui auront de la difficulté à mémoriser les options proposées dans de longs textes. On recommande de formuler les questions de manière que le texte des options soit le plus court possible. On pourra alors utiliser la solution décrite à la section Options décrites par un texte de petite ou moyenne taille. Voici un exemple de question reformulée de manière à réduire le plus possible la taille du texte des options. Ancienne solution Lequel des énoncés ci-dessous concernant la NSI et l'accessibilité est le plus approprié?
Nouvelle solution Lequel parmi les facteurs ci-dessous n'est pas un facteur clé dans la conception de sites Web accessibles à tous et interprétables par les technologies qu'ils utilisent?
|
||||||||||||||||||||||||||||
|
|
Haut de la page |
Avis importants |