Au 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 radio
Malheureusement, 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 :
Il est impossible de faire varier la taille des boutons radio avec le reste du texte de la page, ce qui pose aux utilisateurs malvoyants et (ou) à mobilité réduite les problèmes suivants :
Les utilisateurs malvoyants ont de la difficulté à déterminer si un bouton radio est sélectionné.
Les utilisateurs à mobilité réduite ont de la difficulté à sélectionner un bouton radio en raison de la taille réduite de la cible.
La question doit être associée, par voie de programmation, à un contrôle de formulaire pour être traitée par un lecteur d'écran; toutefois, il n'y a pas de moyen idéal de réaliser cette association avec des boutons radio en raison des nombreux contrôles qu'ils nécessitent. Quelle que soit la méthode utilisée, les utilisateurs de lecteur d'écran seront confrontés à des questions exagérément intrusives, pas toujours disponibles, quant elles ne sont pas carrément inaccessibles.
Le boutons radio introduisent des contrôles de formulaire multiples dans l'ordre de tabulation, ce qui exige des utilisateurs de lecteur d'écran davantage d'efforts pour naviguer dans un formulaire.
Utilisation d'éléments de sélection comme alternative aux boutons radio
Heureusement, 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.
La taille de l'élément de sélection et du texte correspondant varie avec le reste du texte de la page.
a. Les utilisateurs malvoyants peuvent facilement déterminer l'option sélectionnée puisque toute la rangée de l'option choisie est en évidence.
b. Les utilisateurs à mobilité réduite peuvent facilement sélectionner une option cible puisque sa taille peut varier et qu'il est facile de naviguer parmi les options et de les sélectionner au clavier.
La question peut facilement, et de manière accessible, être associée à l'élément de sélection puisqu'un seul contrôle de formulaire est en cause. La question ne posera donc aux utilisateurs de lecteur d'écran aucun problème d'accessibilité pour autant qu'elle soit associé, par voie de programmation, au contrôle de formulaire.
L'élément de sélection introduit un seul contrôle dans l'ordre de tabulation, ce qui exige des utilisateurs de lecteur d'écran moins d'efforts pour naviguer dans un formulaire que ne l'exige l'utilisation de boutons radio.
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 taille
Les 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.
<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 taille
Les 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.
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é?
La facilité d'utilisation, les interfaces axées sur les médias et les transformations continues sont tous des facteurs clés dans la conception de sites Web accessibles à tous et interprétables par les technologies qu'ils utilisent.
Les interfaces axées sur les médias, le contexte, l'orientation et la facilité d'utilisation sont tous des facteurs clés dans la conception de sites Web accessibles à tous et interprétables par les technologies qu'ils utilisent.
Les transformations continues, le contexte, l'orientation et la facilité d'utilisation sont tous des facteurs clés dans la conception de sites Web accessibles à tous et interprétables par les technologies qu'ils utilisent.
Le contexte, l'orientation, les transformations continues et les interfaces axées sur les médias sont tous des facteurs clés dans la conception de sites Web accessibles à tous et interprétables par les technologies qu'ils utilisent.
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?
