Editions ENI Livres | Vidéos | e-Formations
La navigation
Introduction
Internet repose sur le concept de pages et de liens entre elles. C’est une notion clé nécessaire pour pouvoir naviguer correctement. La navigation est indispensable pour utiliser un site internet. Malheureusement, certains sites sont inaccessibles pour une partie de la population, car ils ne prennent pas en compte tous les types d’utilisateurs.
Les liens
Les liens sont le moyen le plus utilisé pour naviguer. Ils sont donc essentiels pour que les utilisateurs puissent utiliser un site.
1. Les liens vides
L’élément essentiel à vérifier est que l’intitulé du lien ne soit pas vide. Bien évidemment, vous n’écrirez jamais <a href="..."></a> ! Car l’erreur saute aux yeux ! Mais cela est plus sournois quand vous utilisez une icône pour le lien. Par exemple, le lien <a href="..."><img src="..."></a> ne contenant aucune alternative textuelle est un lien vide. Une personne utilisant un lecteur d’écran n’a alors aucune idée de la destination de ce lien.
Cela est également problématique pour un utilisateur qui navigue en utilisant la reconnaissance vocale puisqu’il ne peut nommer le lien qu’il souhaite utiliser. Il est nécessaire d’utiliser l’attribut alt pour donner cette alternative textuelle :
<a href="..."><img src="..." alt="Contact"></a> Il en est de même avec les icônes réalisées grâce à des polices icônes (icon font) telles que Font Awesome. Le lien <a href="..."><spanclass="fas fa-envelope-open-text"></span></a> est inutilisable pour une personne se servant d’un lecteur d’écran. Il faut le corriger de la manière suivante :
<a href="..." aria-label="Contact">
<span aria-hidden="true" class="fas fa-envelope-open-text"></span>
</a> L’attribut aria-label sur la balise de lien permet la lecture de la destination par le lecteur d’écran et l’attribut aria-hidden sur la balise <span> permet d’éviter la lecture du caractère icône.
Il est également possible de remplacer l’attribut aria-label par un attribut title. Le lecteur d’écran lit l’un comme l’autre. La différence est qu’avec title le titre est visible sous forme d’une info-bulle, alors qu’avec aria-label il n’est pas visible puisque l’attribut est uniquement destiné aux lecteurs d’écran.
2. Les liens explicites...
Les liens d’accès rapide
Les liens d’accès rapide, ou liens d’évitement, permettent d’accéder directement à un élément d’intérêt de la page. C’est généralement le contenu principal de la page. Mais ils peuvent également donner accès au moteur de recherche.
<!DOCTYPE html>
<html lang="fr">
<head>
...
</head>
<body>
<nav>
<a href="#main" class="quickAccess">contenu</a>
<a href="#search" class="quickAccess">recherche</a>
</nav>
...
<div id="search" role="search" tabindex="-1">
...
</div>
...
<main id="main" role="main" tabindex="-1">
....
</main>
</body>
</html> D’aucuns pensent...
Les systèmes de navigation
Les sites doivent proposer au moins deux systèmes de navigation parmi les suivants pour permettre aux visiteurs d’accéder facilement à l’information recherchée :
-
menu
-
moteur de recherche
-
plan de site
Le RGAA précise que les sites dotés d’un nombre très limité de pages peuvent se contenter d’un menu de navigation.
1. Les menus
Le menu semble assez incontournable dans un site internet. C’est le moyen privilégié pour rapidement se faire une idée de ce qui est présent sur le site.
Il est courant sur un gros site d’avoir plusieurs menus, chacun doit alors être positionné dans une balise <nav> avec le rôle navigation. Néanmoins, il est nécessaire de pouvoir identifier facilement le menu principal. Pour ce faire, il peut être indiqué grâce à l’attribut aria-label :
<nav role="navigation" aria-label="Menu principal de navigation">
...
</nav> Les menus contiennent des listes de liens. Il est alors important de bien utiliser une structure de liste avec la balise <ul>. Ceci est particulièrement utile pour que les utilisateurs de lecteurs d’écran obtiennent la structure du menu.
Exemple
<nav role="navigation" aria-label="Menu principal de navigation"> ...Le fil d’Ariane
Le fil d’Ariane est un bon moyen de faciliter la navigation et d’aider l’utilisateur à se repérer dans la structure du site. Le fil d’Ariane constituant un système de navigation, il est souhaitable de le positionner dans une balise <nav>.
Exemple
<nav role="navigation" aria-label="Fil d'Ariane">
<a href="articles/index.html">Articles</a> >
<a href="articles/greenit/index.html">Green IT</a> >
<a href="articles/greenit/faireDurerSonMateriel"
aria-current="page">Faire durer son matériel</a>
</nav> L’attribut aria-label permet la restitution suivante :
-
Fil d’Ariane
-
Navigation région
Et lorsque l’utilisateur de lecteur d’écran arrive sur le dernier lien, grâce à l’attribut aria-current positionné à page, il entend la restitution suivante :
-
Faire durer son matériel
-
Lien
-
Page courante
L’étude d’un cas pratique
1. Le menu burger
Le menu burger qui a été mis en place sur le site n’est pas fonctionnel pour le moment. Il nécessite du code JavaScript pour réaliser son déploiement ou sa réduction.
Le code HTML du menu burger :
<header>
<a href="index.html" title="vers la page d'accueil">
<img src="images/home.svg" alt="Accueil">
</a>
<button aria-expanded="true" class="hidden-sm hidden-big" id="btnMenu">
<span class="hidden-sm" title="déployer le menu" id="burger"
aria-hidden="true">☰</span>
<span title="réduire le menu" id="fermer"
aria-hidden="true">⨯</span><br>
Menu
</button>
<nav role="navigation" aria-label="Menu de navigation principal">
<ul id="menu">
<li>
<span id="accueil" aria-hidden="true">⌂ </span>
<a href="index.html">Accueil</a>
</li>
<li>
<span id="contact" aria-hidden="true">@ </span>
<a href="contact.php">Contact</a>
</li>
<li>
<span id="erratum" aria-hidden="true">⚠ </span>
<a href="erratum.html">Erratum</a>
</li>
<li>
<span id="ressources" aria-hidden="true">⛓...
