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 9.3 : Dans chaque page Web, chaque liste est-elle structurée avec les balises appropriées ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les listes doivent être structurées avec les balises appropriées.

Bénéfices pour les utilisateurs

• La structuration d'informations par l'intermédiaire de listes permet aux utilisateurs qui ne voient pas le texte à l'écran de mieux identifier les différentes informations et la relation des unes par rapport aux autres.

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 informations présentées sous forme de listes.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <ul><li>Premier item de la liste</li></ul>) :
     • balise ul avec la balise li
     • balise ol avec la balise li
     • balise dl avec les balises dt/dd
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 9.3.a [Argent] : Dans chaque page Web, les informations regroupées sous forme de listes non ordonnées utilisent-elles les balises ul et li ?
   • Test 9.3.b [Argent] : Dans chaque page Web, les informations regroupées sous forme de listes ordonnées utilisent-elles les balises ol et li ?
   • Test 9.3.c [Argent] : Dans chaque page Web, les informations regroupées sous forme de listes de définitions utilisent-elles les balises dl et dt/dd ?
   
   
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 9.3.a [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Identifier les listes non ordonnées dans la page Web
  3. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les éléments de listes"
  4. Vérifier que dans chaque page Web, les informations regroupées sous forme de listes non ordonnées utilisent les balises ul et li.
  
  
• Pour le test 9.3.b [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Identifier les listes ordonnées dans la page Web.
  3. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les éléments de listes".
  4. Vérifier que dans chaque page Web, les informations regroupées sous forme de listes ordonnées utilisent les balises ol et li.
  
  
• Pour le test 9.3.c [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Identifier les listes de définitins dans la page Web.
  3. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les éléments de listes".
  4. Vérifier que dans chaque page Web, les informations regroupées sous forme de listes de définitions utilisent les balises dl et dt/dd.

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

• Pour le test 9.3.a [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Identifier les listes non ordonnées dans la page Web.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur le mot ul (ctrl + f), vérifier que dans chaque page Web, les informations regroupées sous forme de listes non ordonnées utilisent les balises ul et li.
  
  
• Pour le test 9.3.b [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Identifier les listes ordonnées dans la page Web.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur le mot ol (ctrl + f), vérifier que dans chaque page Web, les informations regroupées sous forme de listes ordonnées utilisent les balises ol et li.
  
  
• Pour le test 9.3.c [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Identifier les listes de définitins dans la page Web.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur le mot dl (ctrl + f), vérifier que dans chaque page Web, les informations regroupées sous forme de listes de définitions utilisent les balises dl et dt/dd.

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

La bonne structuration d'une page doit être pensée dès la conception du site : c'est donc à la fois le travail du rédacteur de contenu mais aussi du développeur, qui insère le code approprié.

Implémentation

Les listes doivent être implémentées avec les éléments suivants :

• balise ul avec la balise li
• balise ol avec la balise li
• balise dl avec les balises dt/dd

Exemple de mauvaise pratique

<p>Voici la liste des 3 gagnants classés par ordre d'arrivée :</p>
1. toto<br />
2. toti<br />
3. tota<br />

Exemple de bonne pratique

<p>Voici la liste des 3 gagnants classés par ordre d'arrivée :</p>
<ol>
<li>toto</li>
<li>toti</li>
<li>tota</li>
</ol>

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

• html techniques for WCAG 1.0 (section 1.2) : Structural grouping
• html techniques for WCAG 1.0 (section 4) : list
• blog-and-blues.org : Perception de la structure d'une page Web par un handicapé visuel
• tecfa.unige.ch : Aborder HTML : ce n'est pas un traitement de texte

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.