UTILISABLE : Règle 2.4 Navigable
Règle 2.4 Navigable : fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site.
Comprendre la règle 2.4 (en anglais)
Table des matières
- Accès au contenu principal de la page
- Soutien à la navigation
- Ordre de tabulation correct
- Clarification de la fonction des liens
Accès au contenu principal de la page
Le problème
Pour une personnes aveugle, il est fastidieux d'avoir à parcourir tous les menus avant d'arriver au contenu, c'est pourquoi il faut prévoir un mécanisme qui permettra à ces personnes d'aller directement au contenu principal de la page en passant par dessus les blocs d'information qui se répètent de page en page.
Une personne ayant des limitations motrices qui ne lui permet pas d'utiliser une souris bénéficiera aussi d'un tel mécanisme qui lui permettra d'atteindre plus rapidement un lien situé dans le contenu principal sans avoir à tabuler à travers tous les liens des menus.
Les personnes ayant des limitations cognitives ont besoin d'aide pour naviguer et se situer dans un site Web. Ces personnes peuvent avoir des problèmes de concentration, de mémoire ou de compréhension qui risquent de les désorienter rapidement si des moyens ne sont pas mis en place pour les soutenir dans leur navigation.
La solution
- La meilleure façon de regrouper les liens est de les coder comme des listes, ce qui permettra à un lecteur d'écran d'indiquer à l'utilisateur la longueur de la liste ;
- Deux solutions s'offrent à vous :
- Incorporer au tout début de la page ou du menu de navigation un lien visible ou non conduisant au contenu principal de la page ;
- Dans le cas ou le menu de navigation est placé à la fin du code de la page, quelle que soit la disposition visuelle de ce menu à l'écran, ce lien devrait plutôt conduire au début du menu de navigation (ce type de mise en page n'est touefois pas conseillé car il rompt avec les habitudes des internautes) ;
- Ce lien peut s'intituler simplement « Aller au contenu » ou « Aller à la navigation » ;
- Vous pouvez aussi placé un en-tête de niveau 1 au début du contenu principal de la page.
- Quelle que soit la stratégie que vous choisissez, il est important de l'implanter de façon systématique afin que l'utilisateur puisse prévoir le moyen qu'il devra utiliser pour accéder directement au contenu ;
- Si vous utilitez un lien en début de page pour aller au contenu principal, vous pouvez si vous le souhaitez y ajouter des liens vers le menu principal et vers le menu de la section, cette technique étant préférable à l'inclusion d'en-têtes de section pour chapeauter chaque niveau de menu.
Les règles qui s'appliquent
WCAG 2.0
SGQRI
008-01 : Accessibilité d'un site Web
- 15 d) permettre de contourner les blocs d’information qui se répètent de page en page en offrant au début d’une page Web un hyperlien interne qui donne accès au contenu principal ou un en-tête de section de premier niveau au début du contenu principal de la page ;
008-02 : Accessibilité d'un document téléchargeable
- S.O.
008-03 : Accessibilité du multimédia dans un site Web
- S.O.
Soutien à la navigation
Le problème
Les personnes ayant des limitations cognitives ont besoin d'aide pour naviguer et se situer dans un site Web. Ces personnes peuvent avoir des problèmes de concentration, de mémoire ou de compréhension qui risquent de les désorienter rapidement si des moyens ne sont pas mis en place pour les soutenir dans leur navigation.
Les personnes ayant des limitations visuelles ont aussi besoin de se repérer dans un environnement dont ils ne perçoivent qu'une petite partie à la fois. Le manque de vision globale de l'écran rend en effet toute tâche de navigation plus difficile et nécessite donc la mise en place de points de repères sur lesquels l'utilisateur pourra compter.
La solution
- La métadonnée la plus importante est le titre de la page qui est placé dans l'élément <title> de la section <head> de la page Web ;
- Ce titre doit être représentatif du contenu de la page et donc différent de page en page ;
- Il y a souvent une forte ressemblance entre le titre de la page et l'élément <h1>, ce qui est tout à fait normal ;
- On peut aussi adjoindre à ce titre un rappel du nom du site si on le souhaite ;
- Ce rappel, a toutefois avantage à être placé à la fin du titre et non au début de sorte que l'utilisateur puisse se concentrer d'abord sur l'information distinctive.
Exemple de code
<head>
...<title>Les règles 2.0 - Communauté de pratique
sur l'accessibilité du Web</title> ...</head>
- Le plan du site est une aide à la navigation et à la compréhension de l'organisation générale d'un site ;
- Le plan du site doit donner accès à tout le contenu du site, directement ou indirectement ;
- En fait, sur un site comptant un nombre important de pages, on peut limiter le plan du site aux trois premiers niveaux de navigation.
- Un lien vers le plan du site devrait être offert sur chaque page ;
- Dans le cas d'un petit site ou chaque page contient un lien vers toutes les autres pages, le plan du site devient évidemment superflu ;
- Une page longue pourrait aussi offrir un menu de navigation interne à la page ;
- Parmi les autres moyens pouvant soutenir la navigation, mentionnons :
- Un moteur de recherche simple ou avancé ;
- Des en-têtes et des étiquettes qui décrivent bien le contenu ;
- Des liens vers les autres pages reliées ;
- Un fil d'Ariane qui doit être précédé d'une mention explicite du type « Vous êtes ici : » afin que l'utilisateur comprenne bien l'utilité de cette liste de liens (liste parmi plusieurs autres).
Note : dans les WCAG 2.0 il n'est exigé d'utiliser des en-têtes de section qu'en priorité AAA. Toutefois, si des en-têtes visuelles sont utilisées elles doivent être codées comme des en-têtes afin de satisfaire au critère de succès 1.3.1.
Les règles qui s'appliquent
WCAG 2.0
SGQRI
008-01 : Accessibilité d'un site Web
- 15 g) pour une page Web informative, comporter un hyperlien vers le plan du site Web permettant d'accéder aux éléments principaux des trois premiers niveaux de navigation du site ;
- 15 k) sauf pour une application Web ou un lecteur multimédia, éviter tout raccourci clavier.
- 16 a) un titre distinctif qui reflète son sujet ou son but, codé de la façon appropriée ;
- 16 f) au moins un en-tête de section de premier niveau qui reflète la nature ou la fonction du contenu de la page.
- 18 c) pour la page d’accueil du site, le plan de site et toute page d’accueil des trois premiers niveaux de navigation d’un site Web, être accompagnée au minimum de l’élément de métadonnée résumé décrit selon la syntaxe de la norme ISO 15836 Information et documentation – L'ensemble des éléments de métadonnées Dublin Core (2003) ;
- 18 d) pour un hyperlien constituant la seule façon d’accéder à une destination à partir de cette page, comporter un libellé permettant de déterminer sa destination hors de son contexte immédiat ;
- 18 e) être conçue pour que tous les hyperliens visés au paragraphe d) ayant le même libellé atteignent la même destination ;
008-02 : Accessibilité d'un document téléchargeable
- 07 a) Un document téléchargeable doit avoir un titre distinctif qui reflète son sujet ou son contenu.
- 07 b) Un document téléchargeable doit avoir au moins un en-tête de section de niveau 1 qui reflète la nature de son contenu ou de sa fonction.
- 11 b) Si la table des matières est présente, elle doit offrir des liens hypertextes utilisables avec une technologie d’adaptation informatique.
- 12 j) Un document téléchargeable doit être accompagné au minimum des métadonnées suivantes :
- le titre du document ;
- si le document est mis en ligne par une organisation autre que celle qui l’a créé, le nom du créateur du document;
- la date de la plus récente mise à jour du document ;
- en l’absence d’une date de la plus récente mise à jour du document, la date de création du document ;
- la description du document.
008-03 : Accessibilité du multimédia dans un site Web
- 6 a) Un objet multimédia doit avoir un titre distinctif qui reflète son sujet ou son contenu.
- 12. En matière de navigation dans une animation vectorielle :
- a) un élément de navigation doit pouvoir être identifié comme tel ;
- b) une information contextuelle sur l’utilisation de l’animation et compatible avec les technologies d’adaptation informatiques doit être mise à la disposition des utilisateurs.
- d) indépendamment de l'affichage horizontal, vertical ou autre :
- si un menu présente des niveaux inférieurs, un maximum de deux niveaux inférieurs est permis ;
- un menu déroulant non persistant doit éviter d'afficher un sous-menu en cascade de second niveau.
Ordre de tabulation correct
Le problème
Les personnes ayant des limitations motrices qui ne leur permettent pas d'utiliser une souris et les personnes ayant des limitations visuelles sévères déplacent le focus dans la page à l'aide de la touche tabulation. Ce parcours au clavier doit donc être logique.
De plus, pour l'utilisateur se déplaçant au clavier mais ayant une vision suffisante, il est important que le repère du focus soit visible afin que la personne ayant des limitations motrices sache sur quel élément est placé le focus afin de pouvoir activer le bon lien ou le bon élément de formulaire.
La solution
- Les navigateurs ont une façon qui leur est propre de mettre cet élément en évidence ;
- Il s’agit généralement d’un encadré pointillé ;
- Toutefois un concepteur peut, volontairement ou non, contrecarrer cette fonctionnalité par la feuille de styles ;
- Vous devez donc vous assurer que cet indicateur est toujours visible, du début à la fin du parcours.
- Pour les menus, il est aussi possible de mettre en évidence le focus par un effet d'illumination, un soulignement, un encadrement ou tout autre moyen ;
- L'ordre de tabulation est contrôlé par l'ordre d'apparition des contenus dans le code source de la page ;
- La façon la plus simple de corriger l'ordre est donc de revoir l'ordre du code source.
- Si vous utilisez des menus déroulants, vous devez vous assurer que les sous-menus seront adjacents, dans l'ordre de tabulation, à l'élément de menu qui en déclenche l'ouverture ;
- En dernier recours , vous pouvez corriger l'ordre de tabulation en utilisant l'attribut tabindex avec des numéros rétablissant un ordre plus approprié :
- Mais attention, les éléments dont l'ordre ne sera pas précisé avec cet attribut seront repris dans leur ordre habituel à la suite de ceux auxquels vous aurez fixé vous-même un ordre. Si vous ne pouvez faire autrement, vérifiez attentivement l'ordre de tabulation sur toute la page pour déceler des problèmes éventuels.
Exemple de code
[...] <label for="pnom">Prénom</label>
<input id="pnom" name="pnom" type="text"
size="15" tabindex="2" /> [...]
<a href="../contact/">Contacter le service à
la clientèle</a >. [...]
<a href="/index.php" tabindex="1">Retour
au site Web</a>. [...] </html>
Les règles qui s'appliquent
WCAG 2.0
SGQRI
008-01 : Accessibilité d'un site Web
- 15 e) comporter un mode d’utilisation où la zone active est visible pour toute interface utilisable au clavier ;
- 16 c) la possibilité de parcourir la page au clavier en respectant un ordre séquentiel logique du contenu ;
008-02 : Accessibilité d'un document téléchargeable
- 7 d) Un document téléchargeable doit pouvoir être parcouru au clavier en respectant l’ordre séquentiel logique du contenu.
- 7 f) Toute interface utilisable au clavier comporte un mode d’utilisation où la zone active est visible.
008-03 : Accessibilité du multimédia dans un site Web
- 6 b) Une animation vectorielle doit pouvoir être parcourue au clavier en respectant l’ordre séquentiel logique du contenu.
- 6 c) Toute interface utilisable au clavier comporte un mode d’utilisation où la zone active est visible.
Clarification de la fonction des liens
Le problème
Les personnes aveugles qui utilisent un lecteur d'écran disposent d'une fonction qui leur permet de dresser la liste de tous les liens de la page. Il s'agit de l'un des moyens qui leur permet de naviguer plus efficacement sans être obligés de lire tout le contenu de la page. Elles peuvent, par exemple trouver un lien très rapidement en tapant ses premières lettres.
Toutefois, il faut que le libellé des liens soit significatif et puisse être compris facilement dans le contexte global de la page. Sinon, l'utilisateur doit retourner au paragraphe où se situe ce lien pour en comprendre la fonction ou activer ce lien pour en voir l'effet.
La solution
- Les liens utilisant de façon répétitive le même texte comme « cliquer ici » ou « pour en savoir plus… » posent donc problème ;
- De même, des liens conduisant à des cibles différentes ne peuvent utiliser le même texte parce que cela créerait de la confusion ;
- C'est souvent le cas des liens de type « pour en savoir plus… » ou « lire la nouvelle… ».
- Une façon de remédier à ce problème pourrait être de convertir ce libellé en image et d'ajouter dans le alt, à la suite de « lire la nouvelle... » le titre de cette nouvelle, ce qui peut être fait automatiquement par certains systèmes de gestion de contenu ;
- Vous pouvez aussi afficher cette dernière partie du lien hors écran en utilisant la feuille de style ;
- Il est enfin possible d'offrir un élément d'inteface en début de page pour modifier le texte des liens afin d'intégrer au texte de lien « lire la nouvelle... » le titre de cette nouvelle.
- Notons aussi que si vous utilisez un lien graphique et un lien texte conduisant à la même destination, vous devriez les intégrer dans la même balise <a> ;
- L'attribut alt de l'image doit alors être vide puisque la signification du lien est déjà donnée par le texte adjacent.
- WCAG 2.0 permet, au niveau A, de comprendre un lien à partir de son contexte immédiat (paragraphe courant, en-tête de section, item de liste, etc.).
- Les lecteurs d’écran n’offre toutefois pas de moyen simple de vérifier ce contexte quand un utilisateur navigue dans la liste des liens, c’est pourquoi nous n’encourageons pas cette pratique.
Exemples de code
<a href="http://www.abc.com/"><img
src="abc.gif" alt="" />ABC</a>
Exemple FAUTIF
<h2>Brigadiers scolaires
recherchés</h2>
<p>Nous sommes à la recherche de
brigadiers scolaires pour travailler sur
les traverses piétonnières de l'Île de Montréal.
Vous connaissez quelqu'un pour qui la
<a href="/communiques.asp?id=435">
»»Lire la suite</a></p>
Solution
<a href="/communiques.asp?id=435">»»
Lire la suite<img src="suite"
alt=" de Brigadiers scolaires recherchés"></a>
Le format des documents non HTML pourrait être spécifié textuellement ou par une icône à l’intérieur du lien de téléchargement.
Exemples de code
<a href="document1.doc">Document 1
[en format Word]</a>
De plus, pour les documents non HTML, des formats alternatifs pourraient être offerts.
<a href="document1.pdf">Document 1
[en format PDF]</a>
<a href="document1.rtf">Document 1
[en format RTF]</a>
Note : il est considéré de l’ordre des bonnes pratiques de spécifier également la taille du fichier à télécharger afin d’en aviser les utilisateurs qui s’apprêtent au téléchargement.
<a href="document1.pdf">Document 1
[en format PDF, 4.5 Mo]</a>
Les règles qui s'appliquent
WCAG 2.0
SGQRI
008-01 : Accessibilité d'un site Web
- 18 d) pour un hyperlien constituant la seule façon d’accéder à une destination à partir de cette page, comporter un libellé permettant de déterminer sa destination hors de son contexte immédiat ;
- 18 e) être conçue pour que tous les hyperliens visés au paragraphe d) ayant le même libellé atteignent la même destination ;
008-02 : Accessibilité d'un document téléchargeable
- 12 f) Dans un même document téléchargeable, tous les liens ayant le même libellé doivent pointer vers la même destination.
- 12 g) Dans la mesure où un lien est la seule façon d’accéder à une destination à partir d’un document téléchargeable, le libellé de ce lien doit être explicite de sorte que sa destination puisse être déterminée hors de son contexte immédiat.
008-03 : Accessibilité du multimédia dans un site Web
- 14 e) Tous les liens ayant le même libellé doivent pointer vers la même destination.
- 14 f) Dans la mesure où un lien est la seule façon d’accéder à une destination à partir d’une animation vectorielle, le libellé de ce lien doit être explicite, de sorte que sa destination puisse être déterminée hors de son contexte immédiat.
