ARCHIVÉ - Remplacement des boutons radio par des sélections

Avertissement Cette information est archivée parce qu'elle est désuete et n'est plus pertinente.

Contenu archivé

Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.

Table des matières

1.0 Aperçu

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.

2.0 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 :

  1. 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 :
    1. Les utilisateurs malvoyants ont de la difficulté à déterminer si un bouton radio est sélectionné.
    2. Les utilisateurs à mobilité réduite ont de la difficulté à sélectionner un bouton radio en raison de la taille réduite de la cible.
  2. 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.
  3. 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.

3.0 Utilisation d'éléments « select » comme alternative aux boutons radio

Heureusement, il existe, au plan de l'accessibilité, une alternative aux boutons radio. L'élément « select » permet de reproduire les caractéristiques des boutons radio tout en évitant les problèmes d'accessibilité qu'ils posent.

  1. La taille de l'élément « select » et du texte correspondant varie avec le reste du texte de la page.
  2. Les utilisateurs malvoyants peuvent facilement déterminer l'option sélectionnée puisque toute la rangée de l'option choisie est en évidence.
  3. 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.
  4. La question peut facilement, et de manière accessible, être associée à l'élément « select » 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.
  5. L'élément « select » 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 « select » :

  1. Options décrites par un texte de petite ou moyenne taille
  2. Options décrites par un texte de grande taille

3.1 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 « select ».

Pour mettre cette solution en oeuvre, on remplace chaque bouton radio par une option que l'on inclut dans l'élément « select », tel qu'indiqué ci-dessous.

Assurez-vous de préciser le nombre d'options dans l'attribut « size » de l'élément « select » afin que toutes les options s'affichent simultanément, comme c'est le cas pour les boutons radio.

3.1.1 Ancienne solution

3.1.1.1 Exemple





3.1.1.2 Code (X)HTML
<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>

3.1.2 Nouvelle solution

3.1.2.1 Exemple

3.1.2.2 Code (X)HTML
<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>

3.2 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 « select ». 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.

3.2.1 Ancienne solution

Lequel des énoncés ci-dessous concernant la NSI et l'accessibilité est le plus approprié?

  1. 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.
  2. 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.
  3. 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.
  4. 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.

3.2.2 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?

  1. Transformations continues
  2. Contexte et orientation
  3. Interfaces axées sur les médias
  4. Facilité d'utilisation