Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 11.7 : Dans chaque formulaire, chaque liste de choix est-elle structurée de manière pertinente ?

revenir en haut de la page

Carte d'identité du critère 11.7 [niveau AccessiWeb : Argent]

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les listes de choix de tous les formulaires doivent être structurées de manière pertinente. Par exemple: les départements français peuvent être ordonnés soit de manière alphabétique, soit par code postal... mais aussi d'une manière dépendante d'une information spécifique comme un circuit touristique, les étapes du Tour de France...

Bénéfices pour les utilisateurs

• Pour les utilisateurs aveugles la lecture des éléments de liste se fait élément par élément.
  Ces éléments de liste apparaissent dans l'ordre dans lequel ils sont écrits dans le code source dans le code source de la page. Il vaut donc mieux suivre un ordre logique pour les présenter afin que l'utilisateur puisse ainsi repérer plus rapidement l'élément qu'il recherche.
  Pour la liste des départements français, par exemple, il est préférable de les classer par ordre alphabétique. Dans d'autres circonstances, il peut s'agir d'un ordre chronologique, un ordre de pertinence etc...

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester :
   • Identifier dans un navigateur graphique toutes les listes de choix.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <select><option>Pays 1</option></select>) :
     • balise select avec la balise option
     • balise select avec la balise optgroup et l'attribut label
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 11.7.a [Argent] : Dans chaque formulaire, pour chaque liste de choix (balise select), l'ordre des items (balise option) est-il donné de manière pertinente dans le code source ?
   • Test 11.7.b [Argent] : Dans chaque formulaire, pour chaque liste de choix (balise select), l'ordre des balises optgroup est-il donné de manière pertinente dans le code source ?
   • Test 11.7.c [Argent] : Chaque balise optgroup a-t-elle un attribut label ?
   • Test 11.7.d [Argent] : Pour chaque balise optgroup ayant un attribut label, le contenu de cet attribut est-il pertinent ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la Barre d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 11.7.a [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mise en avant le code source" puis l'option "Code source [Mise en avant des formulaires]".
  3. Vérifier que pour chaque formulaire, pour chaque liste de choix (balise select), l'ordre des items (balise option) est donné de manière pertinente.
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.7.b [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mise en avant le code source" puis l'option "Code source [Mise en avant des formulaires]".
  3. Vérifier que pour chaque formulaire, pour chaque liste de choix (balise select), l'ordre des items (balise optgroup) est donné de manière pertinente
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.7.c [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mise en avant le code source" puis l'option "Code source [Mise en avant des formulaires]".
  3. Vérifier que chaque balise optgroup a un attribut label.
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.7.d [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mise en avant le code source" puis l'option "Code source [Mise en avant des formulaires]".
  3. Vérifier que pour chaque balise optgroup ayant un attribut label, le contenu de cet attribut est pertinent.
  4. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

• Pour le test 11.7.a [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot select (ctrl + f), vérifier que pour chaque formulaire, pour chaque liste de choix (balise select), l'ordre des items (balise option) est donné de manière pertinente.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.7.b [Argent] :
  1. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  2. Une nouvelle fenêtre apparaît contenant le code source de la page.
  3. En faisant une recherche sur le mot select (ctrl + f), vérifier que pour chaque formulaire, pour chaque liste de choix (balise select), l'ordre des items (balise optgroup) est donné de manière pertinente.
  4. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.7.c [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot optgroup (ctrl + f), vérifier que chaque balise optgroup a un attribut label.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 11.7.d [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot optgroup (ctrl + f), vérifier que pour chaque balise optgroup ayant un attribut label, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

Qui est concerné ?

Le développeur doit veiller au respect de ce critère.

Implémentation

Les éléments de liste apparaissant dans l'ordre dans lequel ils sont codés, il suffit d'en définir la logique d'ordonnancement avant d'entreprendre leur implémentation dans le code.

Syntaxe générale :

<select>
<option>elément 1</option>
<option>Elément 2</option>
<option>Elément 3</option>
...
</select>

Exemple de mauvaise pratique

Dans l'extrait de code qui suit, les éléments de liste représentés par les noms de pays, ne sont pas ordonnés de manière pertinente.

<label for="pays">* pays</label> :
<select name="pays" size="1" id="pays">
<option value="france">France</option>
<option value="allemagne">Allemagne</option>
<option value="luxembourg">luxembourg</option>
<option value="italie">Italie</option>
<option value="luxembourg">luxembourg</option>
</select>

Exemple de bonne pratique

En reprenant l'exemple précédent, il suffit d'adopter, par exemple, un ordre alphabétique pour classer les éléments de liste.

<label for="pays">* pays</label> :
<select name="pays" size="1" id="pays">
<option value="allemagne">Allemagne</option>
<option value="france">France</option>
<option value="italie">Italie</option>
<option value="luxembourg">luxembourg</option>
</select>

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

revenir en haut de la page

Références

• WebAIM : Create accessible forms (Ensure Forms are Keyboard Accessible, Logical, and Easy to Use)

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.