Guide AccessiWeb
- Accueil
- Mode d'emploi
- Structure d'une fiche
- 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
- Glossaire
- Aide à l'évaluation
- Référentiel AccessiWeb
- Tables de correspondance
- Moteur de recherche
- Références
- Remerciements
- Plan du guide
Critère 10.4 : Dans chaque page Web, l'ordre de tabulation est-il logique ?
Carte d'identité du critère 10.4 [niveau AccessiWeb : Argent]
Test(s) AccessiWeb permettant de vérifier le critère 10.4
Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].
- Test 10.4.a [Argent] : Dans chaque page Web, l'ordre de tabulation est-il logique ?
Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web
- Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 10.3 [Bronze]
- WCAG 1.0 (05/05/1999) : 9.4 [P3]
- UWEM 1.0 (05/07/2006) : pas de correspondance.
- WCAG 2.0 (30/04/2008) : 2.4.3 [A]
- mobileOK 1.0 (02/11/2006) : 5.5 [mobileOK Pro]
- RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).
Comprendre
Comprendre le critère
L'ordre de tabulation de toutes les pages Web doit être logique.Bénéfices pour les utilisateurs
Le respect de ce critère profitera aux internautes qui naviguent de façon séquentielle sur les pages Web. Il s'agit, en particulier des utilisateurs suivants :
- Les personnes ayant des difficultés motrices qui naviguent exclusivement à l'aide de la touche tabulation pour se déplacer dans la page.
- Les internautes ayant des difficultés de lecture pourront plus aisément s'orienter dans la page si l'ordre logique de tabulation est respecté. Avec la touche tabulation, elle pourront suivre le focus et se repérer facilement si celui-ci reste logique.
- Les personnes déficientes visuelles qui se servent d'un lecteur d'écran se repéreront mieux dans la page si l'ordre logique de tabulation est respecté.
- Enfin, les personnes malvoyantes, qui utilisent un logiciel d'agrandissement, ne voient qu'une petite portion de la page à la fois. Elles suivent le focus du curseur, et elles appréhenderont mieux le contexte de la page et où elles se situent dans la page, si l'ordre de tabulation est respecté et logique.
Valeur ajoutée pour le site
Il n'y a pas d'élément d'information pour cette rubrique.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
- Sélectionner le(s) élément(s) à tester :
- Ouvrir la page Web dans un navigateur graphique
- Tabuler via le clavier
- Appliquer le(s) test(s) suivant(s) :
- Test 10.4.a [Argent] : Dans chaque page Web, l'ordre de tabulation est-il logique ?
- Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.
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 10.4.a [Argent] :- Sous Internet Explorer, ouvrir la page à analyser.
- Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les tabindex" pour vérifier la présence des attributs
tabindexsusceptibles de modifier l'ordre logique de la tabulation. - Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Afficher l'ordre de tabulation".
- Vérifier que l'ordre de tabulation est logique.
- 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 10.4.a [Argent] :- Sous Firefox, ouvrir la page à analyser.
- Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
- Une nouvelle fenêtre apparaît contenant le code source de la page.
- En faisant une recherche sur le mot tabindex (ctrl + f), vérifier que l'ordre de tabulation est logique.
- Si c'est le cas, le test est validé.
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 est concerné par la mise en oeuvre de ce critère.
Implémentation
L'ordre de tabulation naturel est donné par l'ordre dans lequel les éléments html sont implémentés dans le code source.
Il faut veiller à ce que la mise en page css ne provoque pas de parcours de tabulation illogique ou incompréhensible, particulièrement pour les propriétés de positionnement (position, float...).
Il faut veiller également que l'utilisation de l'attribut tabindex, qui permet de déterminer un ordre de tabulation soit utilisé à bon escient.
Exemple de mauvaise pratique
Dans cet exemple, les liens du sous-menu sont traités de manières innapropriée (float:right) : lorsqu'un utilisateur tabule il commence par le lien de droite ce qui n'est pas logique.
Consulter l'exemple de mauvaise pratique pour le critère 10.4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<style type="text/css">
a{
display:block;
padding:5px;
text-decoration:none;
background-color:#616161;
color:#fff;
border:1px solid #fff;
}
a:hover, a:focus{
background-color:#000099;
}
#menu li{
list-style-type:none;
float:left;
width:7em;
text-align:center;
}
a.active{
background-color:#000;
}
a.active:hover, a.active:focus{
background-color:#000099;
}
#smenu{
margin:0;
padding:0;
width:23em;
}
#smenu li{
float:right;
width:7em;
margin:0;
padding:0;
}
</style>
<title>Untitled</title>
</head>
<body>
<ul id="menu">
<li><a href="#" class="active">Rubrique</a>
<ul id="smenu">
<li><a href="#">Sous rubrique</a></li>
<li><a href="#">Sous rubrique</a></li>
<li><a href="#">Sous rubrique</a></li>
</ul>
<li><a href="">Rubrique</a><li>
<li><a href="">Rubrique</a><li>
<li><a href="">Rubrique</a><li>
</ul>
</body>
</html>
Exemple de bonne pratique
Dans cet exemple, identique au précédent, l'utilisateur tabule correctement le sous-menu en partant du lien gauche.
Consulter l'exemple de bonne pratique pour le critère 10.4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<style type="text/css">
a{
display:block;
padding:5px;
text-decoration:none;
background-color:#616161;
color:#fff;
border:1px solid #fff;
}
a:hover, a:focus{
background-color:#000099;
}
#menu li{
list-style-type:none;
float:left;
width:7em;
text-align:center;
}
a.active{
background-color:#000;
}
a.active:hover, a.active:focus{
background-color:#000099;
}
#smenu{
margin:0 0 0 2em;
padding:0;
width:23em;
}
#smenu li{
float:left;
width:7em;
margin:0;
padding:0;
}
</style>
<title>Untitled</title>
</head>
<body>
<ul id="menu">
<li><a href="#" class="active">Rubrique</a>
<ul id="smenu">
<li><a href="#">Sous rubrique</a></li>
<li><a href="#">Sous rubrique</a></li>
<li><a href="#">Sous rubrique</a></li>
</ul>
<li><a href="#">Rubrique</a><li>
<li><a href="#">Rubrique</a><li>
<li><a href="#">Rubrique</a><li>
</ul>
</body>
</html>
Illustrations
Il n'y a pas d'illustration pour cette fiche.
Références
Il n'y a pas de référence pour cette fiche.
revenir au sommaire de la fiche
Copyright © 2008 Association BrailleNet. Tous droits Réservés.