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;
}

Improved par #FFOODD

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 balise form
- role="complementary" pour l'<aside>
role="navigation" : plusieurs occurrences autorisées pour les navigations principales et secondaires

Il faut en avoir au moins deux parmi :

Menu de navigation
Plan du site
Moteur de recherche

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

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 plusieurs tabindex="0" et tabindex="-1" dans une page
tabindex="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, une div par exemple
tabindex="-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