Comprendre les WCAG 2.0

Aller au contenu (appuyer sur entrée)

Sur cette page :

-

Parcours du focus :
Comprendre le CS 2.4.3

2.4.3 Parcours du focus : si une page Web peut être parcourue de façon séquentielle et que les séquences de navigation affectent la signification ou l'action, les éléments reçoivent le focus dans un ordre qui préserve la signification et l'opérabilité. (Niveau A)

L'objectif de ce critère de succès est de garantir que lorsque les utilisateurs naviguent séquentiellement dans du contenu, ils parcourent les informations de sorte qu'elles soient cohérentes avec la signification du contenu et qu'elles soient manipulables au clavier. Cela atténue la confusion en permettant aux utilisateurs de se constituer une image mentale cohérente du contenu. Il peut y avoir différents agencements pour refléter des relations logiques dans le contenu. Par exemple, dans un tableau, le déplacement d'une rangée à la fois ou d'une colonne à la fois parmi les composants représentent tous deux des relations logiques dans le contenu. N'importe lequel de ces agencements peut satisfaire ce critère de succès.

La manière dont l'ordre de navigation séquentielle est déterminé dans un contenu, est définie par la technologie du contenu. Par exemple, du simple HTML définit une navigation séquentielle via la notion d'ordre de tabulation. Le HTML dynamique peut modifier la séquence de navigation en utilisant des scripts en plus de l'attribut tabindex pour permettre la prise de focus par davantage d'éléments. Si aucun script ou tabindex n'est utilisé, l'ordre de navigation est l'ordre dans lequel les composants apparaissent dans le flux du contenu. (Voir la spécification html 4.01, 17.11, « donner le focus à un élément »).

Un exemple de navigation au clavier qui n'est pas une navigation séquentielle dont il est question dans ce critère de succès consiste à utiliser les touches fléchées pour parcourir une arborescence. L'utilisateur peut se servir des flèches vers le haut et vers le bas pour passer d'un nœud à l'autre de l'arbre. L'appui sur la flèche vers la droite déplie le nœud, ensuite l'appui sur la flèche vers le bas permet de se déplacer aux nouveaux nœuds ouverts. Cette séquence de navigation suit la séquence attendue pour un contrôle d'arborescence - lorsque des éléments supplémentaires sont ouverts ou refermés, ils sont ajoutés ou supprimés de la séquence de navigation.

Le parcours du focus peut ne pas être identique à l'ordre de lecture déterminé par un programme informatique (voir le critère de succès 1.3.2) dès lors que l'utilisateur peut comprendre et manipuler la page web. Puisqu'il peut y avoir plusieurs ordres de lecture logiques possibles du contenu, le parcours du focus peut correspondre à n'importe lequel d'entre eux. Cependant, lorsque l'ordre d'une présentation spécifique est différent de l'ordre de lecture déterminé par un programme informatique, ceux qui utilisent l'une de ces présentations peuvent trouver la page web difficile à comprendre ou à manipuler. Les auteurs doivent prêter attention à tous ces utilisateurs lorsqu'ils conçoivent leurs pages web.

Par exemple, l'utilisateur d'un lecteur d'écran interagit selon l'ordre de lecture déterminé par un programme informatique, tandis qu'un utilisateur voyant se servant du clavier interagit selon la présentation visuelle de la page. Il faut faire attention à ce que le parcours du focus ait un sens pour ces deux ensembles d'utilisateurs et que ni l'un ni l'autre n'ait l'impression qu'il se balade au hasard.

Ces techniques bénéficient aux utilisateurs du clavier qui naviguent séquentiellement dans les documents et s'attendent à ce que le parcours du focus soit cohérent avec l'ordre de lecture séquentiel.

  • Les personnes ayant des limitations physiques et qui s'appuient sur l'accès au clavier pour manipuler une page, bénéficient d'un parcours du focus logique et utilisable.

  • Les personnes ayant des limitations fonctionnelles qui rendent la lecture difficile peuvent être désorientées si l'appui sur la touche tabulation place le focus à un endroit inattendu. Elles bénéficient d'un parcours du focus logique.

  • Les personnes ayant des limitations visuelles peuvent être désorientées si l'appui sur la touche tabulation place le focus à un endroit inattendu ou lorsqu'elles ne parviennent pas à trouver le contenu qui entoure un élément interactif.

  • Pour une personne utilisant un logiciel d'agrandissement avec un fort taux de grossissement, seule une petite portion de la page peut être visible. Cet utilisateur peut interpréter de façon erronée le contexte d'un champ si le parcours du focus n'est pas logique.

  1. La manière dont l'ordre de navigation séquentielle est déterminé dans un contenu, est définie par la technologie du contenu. Par exemple, du simple HTML définit une navigation séquentielle via la notion d'ordre de tabulation. Le HTML dynamique peut modifier la séquence de navigation en utilisant des scripts en plus de l'attribut tabindex pour permettre la prise de focus par davantage d'éléments. Dans ce cas, la navigation doit suivre les relations et les séquences du contenu. Si aucun script ou tabindex n'est utilisé, l'ordre de navigation est l'ordre dans lequel les composants apparaissent dans le flux du contenu (Voir la spécification html 4.01, 17.11, « donner le focus à un élément »).

  2. Utiliser les flèches vers le haut et vers le bas pour circuler dans une arborescence. L'utilisateur peut se servir des flèches vers le haut et vers le bas pour passer d'un nœud à l'autre de l'arbre. L'appui sur la flèche vers la droite déploie le nœud, ensuite l'appui sur la flèche vers le bas permet de se déplacer aux nouveaux nœuds ouverts. Cette séquence de navigation suit la séquence attendue pour un contrôle d'arborescence - lorsque des éléments supplémentaires sont ouverts ou refermés, ils sont ajoutés ou supprimés de la séquence de navigation.

  3. Une page web implémente des boîtes de dialogue non modales via un script. Lorsque le bouton de déclenchement est activé, une boîte de dialogue s'ouvre. Les éléments interactifs du dialogue sont ajoutés au parcours du focus, immédiatement après le bouton. Lorsque le dialogue s'ouvre, le parcours du focus va du bouton aux éléments du dialogue, puis à l'élément interactif suivant le bouton. Lorsque le dialogue est fermé, le parcours du focus va du bouton à l'élément suivant.

  4. Une page web implémente des boîtes de dialogue modales via un script. Lorsque le bouton de déclenchement est activé, la boîte de dialogue s'ouvre et le focus est placé sur le premier élément interactif du dialogue. Tant que la boîte de dialogue reste ouverte, le focus est restreint aux éléments de la boîte de dialogue. Lorsque la boîte de dialogue disparaît, le focus revient sur le bouton ou sur l'élément suivant le bouton.

  5. Une page html est conçue de sorte que la navigation de gauche soit située après le contenu principal dans le code html, et stylée par CSS de façon à apparaître sur la gauche de la page. Cela afin de permettre au focus de se placer d'abord sur le contenu principal sans avoir à utiliser l'attribut tabIndex ou du javascript.

    Note : bien que cet exemple passe ce critère de succès, ce ne sera pas nécessairement vrai pour tous les positionnements par CSS. D'autres exemples de positionnements plus complexes peuvent ou non préserver la signification et l'opérabilité.

  6. L'exemple suivant ne satisfait pas le critère de succès :

    Le site d'une entreprise contient un formulaire destiné à recueillir des données marketing et permet à l'utilisateur de s'inscrire à plusieurs lettres d'informations publiées par l'entreprise. La section du formulaire destinée à recueillir les données marketing comporte des champs tels que nom, nom de rue, ville, état ou province, et code postal. Une autre section du formulaire comporte plusieurs cases à cocher afin que l'utilisateur puisse indiquer quelle lettre d'information il souhaite recevoir. Cependant, l'ordre de tabulation du formulaire passe d'un champ à l'autre des différentes sections, de sorte que le focus passe du champ nom à une case à cocher, puis au champ nom de rue, puis à une autre case à cocher.

Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.

(Aucune ressource n'est actuellement documentée)

Chaque élément numéroté dans cette section représente une technique ou une combinaison de techniques que le groupe de travail des WCAG considère comme suffisante pour satisfaire à ce critère de succès. Les techniques énumérées satisfont le critère de succès seulement si toutes les exigences de conformité aux WCAG 2.0 ont été appliquées.

  1. G59 : Placer les éléments interactifs dans un ordre qui reflète la séquence et les relations dans le contenu (en anglais)

  2. Donner le focus aux éléments dans un ordre suivant des séquences et des relations dans le contenu en utilisant l'une des techniques suivantes :

  3. Modifier une page dynamiquement en utilisant l'une des techniques suivantes :

Bien qu'elles ne soient pas nécessaires à la conformité, les techniques supplémentaires suivantes devraient être envisagées afin de rendre le contenu plus accessible. Toutes ces techniques ne peuvent pas être utilisées ou ne seraient pas efficaces dans toutes les situations.

  • Fournir un mécanisme de surlignement bien visible pour les liens et les éléments de contrôle lorsqu'ils reçoivent le focus au clavier (lien à venir)

  • Créer des ordres de présentation alternatifs (lien à venir)

Le groupe de travail des WCAG considère les erreurs fréquentes suivantes comme des échecs du critère de succès 2.4.3.

Mots clés

page Web

une ressource autonome obtenue depuis un URI unique grâce au protocole HTTP, accompagnée de toutes les autres ressources utilisées dans la restitution ou conçues pour être restituées simultanément par un agent utilisateur

Note 1 : bien que toutes les « autres ressources » seraient restituées avec la ressource primaire, elles ne sont pas nécessairement restituées simultanément.

Note 2 : à des fins de conformité avec ces règles, une ressource doit être autonome à l'intérieur du périmètre de conformité pour être considérée comme une page Web.

Exemple 1 : une ressource Web incluant toutes les images et médias liés.

Exemple 2 : un programme Web de courrier électronique (Webmail) développé à l'aide d'AJAX (Asynchronous JavaScript and XML, JavaScript asynchrone et XML). Le programme réside intégralement à l'adresse http://exemple.com/mail, mais comprend une boîte de réception, un carnet d'adresses et un calendrier. Des liens et des boutons permettent d'afficher la boîte de réception, les contacts ou le calendrier, mais ne changent pas globalement l'URI de la page.

Exemple 3 : un site portail personnalisable, dans lequel les utilisateurs peuvent choisir le contenu à afficher à partir d'un ensemble de modules de contenu.

Exemple 4 : quand on saisit « http://shopping.exemple.com/ » dans son navigateur, on entre dans un environnement commercial animé et interactif dans lequel on se déplace visuellement dans une boutique, retirant les produits directement depuis les rayons pour les placer dans un panier d'achat face à soi. Cliquer sur un produit déclenche une démonstration avec la fiche technique juste à côté. Cela peut être un site Web à page unique ou simplement une page à l'intérieur d'un site Web.

parcouru de façon séquentielle

parcouru dans l'ordre défini par le déplacement du focus (d'un élément à l'autre) en utilisant une interface clavier

Cette page Web fait partie de Comprendre les WCAG 2.0 : un guide pour comprendre et implémenter les WCAG 2.0. La totalité du document est aussi disponible dans un seul fichier HTML. Consulter les documents des WCAG 2.0 (en anglais) pour des explications sur la façon dont ce document s'articule avec les autres documents des Règles pour l'accessibilité des contenus Web Web Content Accessibility Guidelines (WCAG) 2.0.

Copyright © 2010 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.