COMPRÉHENSIBLE : Règle 3.2 Prévisible
Règle 3.2 Prévisible : faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.
Comprendre la règle 3.2 (en anglais)
Table des matières
Gestion des changements de contexte
Le problème
Les changements de contexte sont très déroutants pour les personnes aveugles qui ne les voient pas se produire et pour les personnes ayant des limitations cognitives qui ne comprennent pas pourquoi le comportement habituel a été courcircuité.
Les fenêtres « pop-up » à ouverture automatique sont une cause importante de désorientation.
Il est important de rappeler la définition de « changement de contexte » donnée par les WCAG 2.0 :
Changements majeurs dans le contenu d'une page Web qui, s'ils sont faits sans que l'utilisateur en soit conscient, peuvent désorienter l'utilisateur qui ne peut voir l'ensemble de la page en même temps.
Les changements de contexte comprennent les changements :
- d'agent utilisateur ;
- d'espace de restitution ;
- de focus ;
- de contenu qui modifie la signification de la page Web.
Note : Un changement de contenu n'est pas toujours un changement de contexte. Un changement dans le contenu comme le déploiement d'une arborescence, un menu dynamique ou un déplacement de tabulation ne change pas nécessairement le contexte à moins qu'il ne change aussi l'un des éléments énumérés ci-dessus (par exemple le focus).
Exemple : L'ouverture d'une nouvelle fenêtre, le déplacement du focus sur un composant différent, le déplacement vers une nouvelle page (y compris tout ce qui, pour l'utilisateur, aurait l'air d'un déplacement vers une autre page) ou la réorganisation significative du contenu d'une page sont autant d'exemples d'un changement de contexte.
La solution
Évitez donc les fenêtres à ouverture automatique. Sinon, ajoutez un avertissement au lien indiquant « Ce lien s'ouvrira dans une nouvelle fenêtre ». Cet avertissement peut être donné de façon textuelle ou via le alt d'une image visible ou non.
Exemple de code
<a href="lien.html" target="_blank">Lien
externe au site <img src="popup.gif" alt="Ce lien
s'ouvrira dans une nouvelle fenêtre." /></a>
<a href="lien.html" target="_blank">Lien externe
au site (Ce lien s'ouvrira dans une nouvelle
fenêtre.)</a>
Note : la mention d’ouverture doit être incluse à l’intérieur du lien, afin que l’information soit récupérée avec le lien lorsque celui-ci est consulté hors contexte.
Il est possible d'utiliser un script pour l'ouverture d'une nouvelle fenêtre afin d'insérer automatiquement le message d'avertissement. Voir la technique SCR24 : Utiliser un amélioration progressive pour ouvrir les nouvelles fenêtre sur demande de l'utilisateur (en anglais).
On peut toutefois utiliser un attribut onchange pour modifier le contenu des champs de formulaires qui suivent comme dans l’exemple donné dans la technique SCR19 : utiliser un événement onchange sur un élément select sans causer un changement de contexte (en anglais).
Les règles qui s'appliquent
WCAG 2.0
3.2.1 Au focus : quand un composant reçoit le focus, il ne doit pas initier de changement de contexte. (Niveau A)
Comment satisfaire à 3.2.1 (en anglais) | Comprendre 3.2.1 (en anglais)
Techniques suffisantes
Note: A change of content is not always a change of context. This success criterion is automatically met if changes in content are not also changes of context
Erreurs fréquentes à éviter
3.2.2 À la saisie : le changement de paramètre d'un composant d'interface utilisateur ne doit pas initier de changement de contexte à moins que l'utilisateur n'ait été avisé de ce comportement avant d'utiliser le composant. (Niveau A)
Comment satisfaire à 3.2.2 (en anglais) | Comprendre 3.2.2 (en anglais)
Techniques suffisantes
- G80: Providing a submit button to initiate a change of context using a technology-specific technique listed below
- G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
Note: A change of content is not always a change of context. This success criterion is automatically met if changes in content are not also changes of context
Erreurs fréquentes à éviter
- F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value
- F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the status of a radio button, check box or select list is changed
- F76: Failure of Success Criterion 3.2.2 due to providing instruction material about the change of context by change of setting in a user interface element at a location that users may bypass
3.2.5 Changement à la demande : un changement de contexte est initié uniquement sur demande de l'utilisateur ou un mécanisme est disponible pour désactiver un tel changement. (Niveau AAA)
Comment satisfaire à 3.2.5 (en anglais) | Comprendre 3.2.5 (en anglais)
Techniques suffisantes
Situation A: If the Web page allows automatic updates:
Situation B: If automatic redirects are possible:
- SVR1: Implementing automatic redirects on the server side instead of on the client side (SERVER)
- G110: Using an instant client-side redirect using one of the following techniques:
Situation C: If the Web page uses pop-up windows:
- Including pop-up windows using one of the following techniques:
Erreurs fréquentes à éviter
- F60: Failure of Success Criterion 3.2.5 due to launching a new window when a user enters text into an input field
- F61: Failure of Success Criterion 3.2.5 due to complete change of main content through an automatic update that the user cannot disable from within the content
- F9: Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element
- F22: Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the user
- F52: Failure of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a new page is loaded
- F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh with a time-out
SGQRI
008-01 : Accessibilité d'un site Web
- 15 a) permettre d’identifier facilement tout élément de navigation ;
- 18 b) être conçue pour qu’un changement de contexte ne puisse s’effectuer que sur demande ou qu’à la suite d’un avertissement ;
- 18 j) être conçue pour qu’un élément de navigation ouvrant une nouvelle fenêtre soit accompagné d’une image codée de la façon appropriée avec un avertissement mentionnant l’ouverture de la fenêtre ; toutefois, si tous les hyperliens d'une section dans une page Web ouvrent autant de nouvelles fenêtres, cette section de la page Web doit faire apparaître ce même avertissement sous l’en-tête de section correspondant.
- 21 a) à moins que la personne n’en soit informée avant d’utiliser un champ de formulaire, être conçu pour que tout changement de contexte ne puisse être effectué par la seule saisie d’information dans ce champ ;
008-02 : Accessibilité d'un document téléchargeable
- 12 h) Un changement de contexte est initié seulement sur demande de l’utilisateur ou un avertissement est donné avant que l’action ne soit exécutée.
- 12 i) Un élément de navigation qui déclenche l’ouverture d’une nouvelle fenêtre doit être accompagné d’un avertissement comportant au moins la mention « Cette action déclenchera l’ouverture d’une nouvelle fenêtre. »
- 12 k) Un déplacement de la zone active doit éviter d’initier un changement de contexte.
008-03 : Accessibilité du multimédia dans un site Web
- 13. En matière de compréhension, un objet multimédia doit :
- c) un déplacement de la zone active doit éviter d’initier un changement de contexte.
- 14 g) Un changement de contexte est initié seulement sur demande de l’utilisateur ou un avertissement est donné avant que l’action ne soit exécutée.
14 h) Si un élément de navigation déclenche l’ouverture d’une nouvelle fenêtre, il doit être accompagné d’un avertissement comportant au moins la mention « Cette action déclenchera l’ouverture d’une nouvelle fenêtre. »- 15. En matière de formulaire dans une animation vectorielle :
- a) à moins que l’utilisateur ne soit informé avant d’utiliser un champ de formulaire, un changement de contexte ne doit pas être initié uniquement par la saisie d’information dans ce champ.
Proposition de navigation cohérente
Le problème
La cohérence des mécanismes de navigation est essentielle à la navigation et à la compréhension d'un site. Ce devrait être un acquis.
Cette cohérence est particulièrement importante pour les personnes ayant des limitations cognitives.
La solution
- Les éléments de navigation doivent être présentés dans un ordre relatif similaire, ce qui n'exclut pas d'intercaler un sous-menu dans le cas d'un menu extensible ;
- De même, les éléments de navigation ou les boutons offrant une fonctionnalité similaire doivent être identifiés de la même façon ;
- Les raccourcis clavier ne sont utiles que sur des pages où l’utilisateur est appelé à revenir fréquemment comme un Intranet ou une application Web. Sur un site Web public, ils devraient être évités ;
- Ces raccourcis sont utilisés pour se déplacer au lien souhaité, mais ne l'active pas automatiquement. C’est l'utilisateur qui doit l'activer. Il a donc un apprentissage à faire pour comprendre leur utilisation et retenir les raccourcis proposés.
Exemple de code
<a href="index.htm" accesskey="1">Accueil</a>
- Malgré la controverse entourant les accesskeys, voici la liste des clés d’accès ayant dégagé un certain consensu international :
- clé d'accès 0 = Accessibilité ;
- clé d'accès 1 = Accueil ;
- clé d'accès 3 = Plan du site ;
- clé d'accès 4 = Recherche ;
- clé d'accès 9 = Contact ;
- clé d'accès S = Passer la navigation (skip).
- Cette liste n'est pas exclusive et on peut y ajouter, particulièrement dans le cas d'une application Web ou d'un lecteur multimédia.
- Ces raccourcis clavier peuvent aussi être programmés en javascript, ce qui permet plus de variété et peut mieux imiter le comportement auquel les utilisateurs sont habitués.
Les règles qui s'appliquent
WCAG 2.0
3.2.3 Navigation cohérente : dans un ensemble de pages, les mécanismes de navigation qui se répètent sur plusieurs pages Web se présentent dans le même ordre relatif chaque fois qu'ils sont répétés, à moins qu'un changement soit initié par l'utilisateur. (Niveau AA)
Comment satisfaire à 3.2.3 (en anglais) | Comprendre 3.2.3 (en anglais)
Techniques suffisantes
Erreurs fréquentes à éviter
3.2.4 Identification cohérente : dans un ensemble de pages Web les composants qui ont la même fonctionnalité sont identifiés de la même façon. (Niveau AA)
Comment satisfaire à 3.2.4 (en anglais) | Comprendre 3.2.4 (en anglais)
Techniques suffisantes
- G197: Using labels, names, and text alternatives consistently for content that has the same functionality AND following the sufficient techniques for Success Criterion 1.1.1 and sufficient techniques for Success Criterion 4.1.2 for providing labels, names, and text alternatives.
Note 1: Text alternatives that are "consistent" are not always "identical." For instance, you may have an graphical arrow at the bottom of a Web page that links to the next Web page. The text alternative may say "Go to page 4." Naturally, it would not be appropriate to repeat this exact text alternative on the next Web page. It would be more appropriate to say "Go to page 5". Although these text alternatives would not be identical, they would be consistent, and therefore would satisfy this Success Criterion.
Note 2: A single non-text-content-item may be used to serve different functions. In such cases, different text alternatives are necessary and should be used. Examples can be commonly found with the use of icons such as check marks, cross marks, and traffic signs. Their functions can be different depending on the context of the Web page. A check mark icon may function as "approved", "completed", or "included", to name a few, depending on the situation. Using "check mark" as text alternative across all Web pages does not help users understand the function of the icon. Different text alternatives can be used when the same non-text content serves multiple functions.
Erreurs fréquentes à éviter
SGQRI
008-01 : Accessibilité d'un site Web
- 15 h) organiser tout menu de navigation répété de page en page selon le même ordre relatif et avec une présentation similaire ;
- 15 i) nommer uniformément toute fonctionnalité utilisée de page en page ;
008-02 : Accessibilité d'un document téléchargeable
- 11 a) Un élément de navigation doit pouvoir être identifié comme tel.
008-03 : Accessibilité du multimsédia dans un site Web
- 12. En matière de navigation dans une animation vectorielle :
- a) un élément de navigation doit pouvoir être identifié comme tel ;
- e) un menu de navigation répété d’une section à l’autre doit être organisé dans le même ordre relatif et dans une présentation similaire.
