- Accueil
- > Recueil
- > Quelques notes sur les thématiques du RGAA
- > Navigation
Navigation
31 janvier 2023- Lien d’accès rapide
- Positionnement hors écran
- Landmarks ARIA
- Systèmes de navigation
- Ordre de tabulation, piège au clavier
- Accès au contenu additionnel affiché
- Raccourcis clavier
Lien d’accès rapide
- Accès rapide au contenu principal (obligatoire), d'autres lien possible sans en abuser
- Visible à la prise de focus
- Doit se trouver en premier dans le code HTML de la page
-
tabindex="-1"
sur l'élément cible pour se retrouver sur la zone et non sur un élément à l'intérieur
<a href="#main">contenu</a> <main id="main" tabindex="-1"> .... </main>
Positionnement hors écran
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
Landmarks ARIA
-
Uniques dans la page :
-
role="banner"
pour l’en-tête du document -
role="main"
-
role="contentinfo"
pour le pied de page -
role="search"
pour un formulaire de recherche, a positionner sur le conteneur du formulaire, pas sur la baliseform
-
role="complementary"
pour l'<aside>
-
role="navigation"
: plusieurs occurrences autorisées pour les navigations principales et secondaires
Systèmes de navigation
Il faut en avoir au moins deux parmi :
- Menu de navigation
- Plan du site
- Moteur de recherche
Menu de navigation
- Même place dans chaque ensemble de pages.
- Présentation cohérente dans chaque ensemble de pages.
La page d'accueil peut avoir un mise en page différente, navigation comprise
Plan du site
- Même place dans chaque ensemble de pages.
- Même méthode dans chaque ensemble de pages.
- Représentatif de l’architecture générale du site, pas besoin d'avoir toutes les pages référencer
- Tous les liens sont fonctionnels avec des intitulés pertinents
Moteur de recherche
- Même place dans chaque ensemble de pages.
- Même méthode dans chaque ensemble de pages.
- Doit indexer tous les contenus
Fil d'Ariane
- Pas d'obligation de le mettre dans le
<main>
, peut-être en fin de contenu ou dans le pied de page ! - Tous les liens sont fonctionnels avec des intitulés pertinents
Ordre de tabulation, piège au clavier
- Ordre de tabulation cohérent avec le code ; titre avant paragraphe, ordre des conteneurs ( vérifier avec le site sans styles)
-
Pas de piège au clavier (focus figé, focus sur un élément invisible, bug JS, boucle infinie)
Attention au datepicker, pensez à mettre un bouton calendrier pour ouvrir et surtout fermer le calendrier pour éviter toute boucle -
Ne jamais utiliser des
tabindex
supérieurs à 0, laissez le navigateur faire
Il peut avoir plusieurstabindex="0"
ettabindex="-1"
dans une pagetabindex="0"
Permets de capturer le focus et être atteint via la navigation au clavier
Inclut l'élément dans le parcours séquentiel de tabulation pour un élément qui ne prend pas le focus, unediv
par exempletabindex="-1"
- L'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier
- Exclu du parcours séquentiel un élément qui prend le focus (lien, button…)
- Permets à l'élément ne prenant pas nativement le focus de le recevoir (méthode javascript focus)
- Attention l'élément restera accessible par les techniques d'assistance (différent d'aria hidden="true")
Accès au contenu additionnel affiché
- L'élément doit être atteint au clavier
- La zone doit rester visible tant que le focus se trouve dans l'élément
Penser à mettre un bouton fermer pour pouvoir revenir à l'endroit initial (un bouton qui ouvre un pop-in après le footer dans le code)
Raccourcis clavier
- Désactiver ou permettre de configurer les raccourcis
- Ou le raccourci n'est effectif que lorsque le focus est dans le composant sur lequel il s'applique