La navigation est certainement l’un des éléments les plus importants de votre site web. En effet, c’est elle qui va permettre à vos utilisateurs de parcourir votre site et de naviguer entre les pages.
Les menus de navigation ont donc une importance cruciale pour l’ensemble de vos utilisateurs. Ils doivent être :
utilisables aussi bien à la souris qu’au clavier ou sur votre téléphone portable ;
lisibles ; autrement dit, sur quelle page se trouve l’utilisateur actuellement, et vers quelle(s) page(s) peut-il aller ? Et comment sont gérés les menus déroulants ?
Dans ce chapitre, nous allons construire une navigation accessible, puis nous verrons comment gérer l'interaction et les changements d’état possible d’un menu de navigation ; et enfin, nous mettrons en pratique sur le projet Tonight in Gotham.
Réalisez un système de navigation robuste
Comme souvent, une bonne utilisation du HTML5, le respect de bonnes pratiques de développement, ainsi que l’utilisation des attributs ARIA, vont permettre la création d’une navigation fluide, complète et intelligible pour l’ensemble de vos utilisateurs.
Utilisez les bonnes balises pour la navigation
Avant de vous présenter les attributs ARIA en lien avec la navigation, nous allons voir dans un premier temps les bonnes et mauvaises pratiques, ainsi que leur incidence sur la navigation.
Rappel sur la navigation
Construire une navigation accessible requiert d’utiliser les balises suivantes :
la balise
navqui va déclarer ce bloc d’éléments comme un menu de navigation ;la balise
aqui va déclarer l’élément comme un lien de navigation ;l’ensemble des balises comprises dans la balise `nav` sera le plus souvent intégré au sein d’une liste à puces (
uletli).
Masque de collision (hitbox)
Le masque de collision doit être suffisamment important pour permettre la navigation. Autrement dit, la surface cliquable, ou pressable si vous êtes sur mobile, doit être suffisamment importante pour être utilisée dans de bonnes conditions. :)
Utilisez Aria pour consolider votre menu de navigation
Nous allons maintenant enrichir notre navigation avec les attributs ARIA pour renforcer sa compréhension par les technologies d'assistance.
Le rôle navigation
Comme nous l’avons vu plus haut, l’attribut role=”navigation” peut être utilisé en complément d’une balise nav. L’intérêt de l’ajouter est d'accroître la compatibilité avec les technologies d'assistance, notamment les moins récentes.
Les ARIA aria-label et aria-labelledby pour identifier vos menus
Dans le cas où vous avez plusieurs types de navigation, vous pouvez utiliser les attributs aria-label et aria-labelledby pour identifier vos différents menus de navigation. Cela permettra notamment aux technologies d'assistance de comprendre le sens des différents types de navigation.
Les rôles MenuBar et MenuItem pour les menus complexes
Si vous travaillez sur un frontend complexe, par exemple un dashboard, vous pourriez être amené à créer un "MenuBar". Concrètement, c’est un bloc de navigation secondaire avec de nombreux menus dropdown et menus imbriqués.
Pour construire ce dernier de façon accessible, vous allez être amené à utiliser les attributs menubar et menuitem, où le premier vous permet de déclarer le bloc (ou conteneur) comme un élément de type menubar , et le second comme un élément de type menuitem .
Vous trouverez ici un exemple d’implémentation d’un tel système de navigation (voir image ci-dessous) avec le code HTML associé. Comme vous pouvez le constater, il s’agit de quelque chose d’assez poussé, et dont vous aurez assez peu besoin dans votre carrière.
Nous avons vu comment construire une navigation robuste sur le plan de l’accessibilité. Nous allons maintenant nous concentrer sur la gestion des états de navigation.
Gérez les différents états de votre navigation
Une fois le squelette de votre navigation enrichie, vous allez devoir améliorer la gestion des états du menu de navigation. En d’autres termes, cela veut dire :
fournir un feedback à l’utilisateur concernant la page courante (autrement dit, celle que l’utilisateur est en train de consulter), ainsi que les autres pages qu’il peut consulter ;
gérer les états de menu dropdown, ainsi que notre fameux menu burger que j’ai mentionné un peu plus haut ;
permettre une navigation au clavier des menus déroulants.
Cette section de ce chapitre va nous permettre d’aller un plus loin avec les attributs ARIA, et de faire un peu de CSS.
Donnez un feedback à l'utilisateur
Décrivez un lien comme la page courante
La première méthode pour décrire la page courante est de transformer le balise a de la page courante en span , et d’ajouter un texte “invisible” (masqué via le CSS) pour l’indiquer.
Dans l’exemple ci-dessous, la page courante est “Pull requests” et a été mise dans un span plutôt qu'un a comme les autres.
<nav aria-label="Global">
<span class="current">
<span class="hidden">Current page:</span>
Pull requests
</span>
<a aria-label="Issues you created" href="/issues">
Issues
</a>
<div class="mr-3">
<a href="/marketplace">
Marketplace
</a>
</div>
<a href="/explore">
Explore
</a>
</nav>La deuxième méthode utilise l’attribut ARIA aria-current et permet une intégration de l’accessibilité plus naturelle.
Dans l’exemple ci-dessous, la page courante est toujours la page “Pull requests”. Vous pouvez noter l’utilisation de l’attribut aria-current=”page” qui indique aux technologies d'assistance que c’est cette page qui est consultée.
<nav aria-label="Global">
<a aria-label="Pull requests you created" aria-current="page" href="/pulls">
Pull requests
</a>
<a aria-label="Issues you created" href="/issues">
Issues
</a>
<div class="mr-3">
<a href="/marketplace">
Marketplace
</a>
</div>
<a href="/explore">
Explore
</a>
</nav>Gérez le focus des éléments survolés et cliqués
Il est aussi important de donner un feedback visuel aux personnes n’utilisant pas de technologies d'assistance. Nous allons ici utiliser le CSS et ses pseudo-classes !
La plus connue est la pseudo-classe :hover . Attention à ne pas confondre une pseudo-classe et un pseudo-élément (qui, lui, permet de sélectionner un élément précis).
Les pseudo-classes dont vous aurez besoin pour les liens seront :
:active qui “permet de cibler un élément lorsque celui-ci est activé par l'utilisateur” (par exemple, quand l’utilisateur a cliqué dessus) ;
:hover qui permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer ;
:link qui cible tous les liens n’ayant pas encore été visités ;
:visited concernant tous les liens visités ;
:focus qui permet de cibler un élément lorsque celui-ci reçoit le focus (élément sélectionné au clavier ou à la souris).
Gérez les éléments dynamiques de votre page
Les menus de navigation peuvent être très simples, mais ils peuvent aussi petit à petit se complexifier au fur et à mesure que votre site grandit. Par exemple, les deux menus ci-dessous sont très différents : l'un est très simple, l'autre est plus complexe et contient différents niveaux de navigation, et une navigation imbriquée utilisant des menus dropdown.
Nous allons voir dans cette section que quelques attributs ARIA peuvent vous permettre de grandement faciliter l’accessibilité de votre site.
L’attribut aria-haspopup
Cet attribut permet de déclarer que le menu de navigation comporte un sous-menu. Ses valeurs possibles sont true ou false. Si le menu de navigation ne comporte pas de sous-menu, il est inutile de renseigner cet attribut.
Cela dit, il se peut parfois que votre menu ait plusieurs liens de navigation agrégés les uns dans les autres. Pour ce type de cas, vous pouvez tout à fait ajouter les roles tree, tabindex et treeitem.
L’attribut aria-expanded
Cet attribut s’utilise souvent de pair avec l’attribut aria-haspopup . Comme vous pouvez le voir dans l’exemple ci-dessous, l’attribut aria-expanded permettra d’indiquer si le menu de navigation est ouvert ou fermé.
<ul>
<li>
<a aria-haspopup="true" aria-expanded="false">
v4.4
</a>
<div aria-labelledby="bd-versions">
<a href="/docs/4.4/">Latest (4.4.x)</a>
<a href="https://getbootstrap.com/docs/4.3/">v4.3.1</a>
<a href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
<a href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
</div>
</li>
<!-- autres balises li avec des liens -->
</ul>Le cas des menus burgers
Le menu burger est utilisé sur mobile, mais pas uniquement. Vous le retrouverez aussi parfois sur des navigations sur ordinateur. Ils sont utiles pour les personnes ayant une mauvaise vue. Par exemple, le site de Courrier international utilise le menu “burger” tant sur téléphone portable que sur ordinateur.
Dans ce type de cas, c’est un bouton qui permet d’ouvrir le menu de navigation. L’attribut aria-controls permet d’indiquer que l’élément ayant cet attribut contrôle l’état de la balise portant le même id.
Dans l’exemple ci-dessous, le bouton contrôle le bloc d’éléments ayant l’id toggleNavbar . On notera aussi un aria-label pour donner un sens enrichi à cet élément.
<div>
<div id="toggleNavbar">
<div>
<!-- le contenu de votre menu de navigation ici -->
</div>
</div>
<nav>
<button aria-controls="toggleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
</nav>
</div>Utilisez un fil d’Ariane (ou breadcrumb)
Comme vous pouvez le voir dans l’exemple ci-dessous, pour créer un fil d’Ariane accessible, vous aurez besoin de deux attributs ARIA :
un attribut
aria-labelpour définir le bloc comme un fil d’Ariane ;un attribut
aria-currentpour définir la page courante.
<nav aria-label="breadcrumb">
<ol>
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>Vous noterez aussi l’utilisation d’une liste ordonnée ol qui permet de créer une imbrication des éléments.
Bien, c’est maintenant l’heure de passer à la pratique et de réaliser notre menu de navigation.
Tonight In Gotham : Implémentez le menu de navigation
Comme nous l’avons vu dans la partie précédente, notre projet comprend plusieurs menus de navigation. L’un est dans le header, l’autre dans le footer.
Si vous reprenez le code du projet, vous verrez que les deux sont identifiés via des attributs aria-label, où le premier a pour valeur aria-label="main navigation" et le second aria-label="footer navigation" . De plus, l’ensemble des liens utilisent les balises a .
Nous allons maintenant nous intéresser au menu de navigation principal. Le premier élément de ce menu est l’icône de Batman. Elle est englobée dans une balise a . Pour signifier à quoi cette balise se rapporte, nous utilisons l’attribut aria-label .
L’autre point concernant les menus de navigation : comme vous avez pu le lire dans ce chapitre, il est important de donner un feedback visuel à l'utilisateur.
Si vous parcourez le fichier CSS associé à ce projet, vous pourrez voir les règles suivantes :
Dans le premier snippet de code, le SVG de l’icône de Batman change de couleur au focus et au hover.
Dans le deuxième snippet, les textes du menu de navigation changent de `font-weight`.
.header-svg:hover {
background-color: #000;
}
.header-svg:hover path {
fill: #FFEA94;
stroke: #FFEA94;
}.header-navigation-item:hover,
.header-navigation-item:focus {
font-weight: 700;
}Comme vous avez pu le lire dans le cours, ces règles permettent de donner un feedback visible à l’utilisateur. En effet, l’accessibilité, ce n’est pas seulement s’adresser aux personnes ayant des troubles de la vision. C’est aider tous les utilisateurs qui pourraient rencontrer des difficultés en parcourant votre site.
Intéressons-nous maintenant au menu déroulant présent à la droite de notre menu de navigation.
Dans un premier temps, sachez que cette interaction est réalisée avec le JavaScript, et vous pouvez la trouver dans le fichier app.js . Concernant l’accessibilité de la page, deux points sont à signaler :
premièrement, l’élément du menu de navigation utilise la balise
aavec les attributsaria-haspopupetaria-expanded, pour signaler de façon sémantique la présence d’un menu déroulant ;deuxièmement, le lien du menu déroulant ainsi que les liens compris dedans ont tous les règles au
hoverainsi qu’aufocus. Ces derniers ont aussi un contraste fort qui leur permet d’indiquer quand ils ont été sélectionnés.
En résumé
Un bon menu de navigation utilise une bonne sémantique : tirez parti des balises
naveta.Enrichissez votre menu de navigation avec l’attribut
role=”navigation”.Utilisez les attributs ARIA
haspopupetisexpandedpour décrire les états de votre menu de navigation.Pensez enfin à gérer les états pour les personnes n’utilisant pas de technologies d'assistance.
Nous allons maintenant nous intéresser au contenu et au moyen de le rendre accessible. Nous verrons notamment dans le prochain chapitre une section sur les images.
