Blog One

Le blog

Des articles concernant l'accessibilité numérique, le référencement local, des tutoriels, mais aussi le NoCode, les applications ...

La navigation est l’un des éléments les plus importants pour la convivialité et l’accessibilité d’un site web. Mais pour les utilisateurs ayant des besoins spécifiques en terme d’accessibilité, personnes aveugles ou malvoyantes ou souffrants des troubles cognitifs, la navigation est souvent un obstacle majeur à l’utilisation d’un site web. Il est donc essentiel de prendre en compte l’accessibilité de la navigation de la conception. 

Pour situer le problème, voici quelques exemples :

Si le menu n’est pas accessible:

  • un visiteur utilisant un clavier pour naviguer sur le web, ne peut accéder aux éléments de menu car il ne peut naviguer avec la touche TAB. Il lui est impossible d’accéder a l’information, ou a au service qu’il souhaite consulter.
  • Les utilisateurs de lecteurs d’écran peuvent rencontrer des difficultés à naviguer dans le menu, car le lecteur d’écran ne peut pas lire les options de menu ou décrire clairement les relations hiérarchiques entre les options.
  • Les personnes malvoyantes peuvent rencontrer des difficultés à identifier les options de menu en raison de la taille des polices utilisées, de leur couleur ou des contrastes insuffisants.
  • Les personnes ayant des problèmes de motricité peuvent avoir des difficultés à sélectionner les options du menu déroulant en raison de la petite taille des boutons.

Et ce ne sont que quelques uns des problèmes rencontrés.

Notre travail c’est donc porté sur le menu principal du site présenté dans cet article ainsi que de la navigation en générale.

La navigation

La navigation d’un site accessible ne se résume pas uniquement au menu principal. Un visiteur peut naviguer avec d’autres outils comme, le plan du site, le moteur de recherche ou les liens d’évitement. mais commençons par le menu principal …

Le menu principal du site

En exemple le menu principal de la commune de Hasparren, avec des éléments de menu concis et clair (exemple Vos démarches, Vie culturelle et sportive), avec un contraste fort Noir et Blanc.

Concernant ce menu, un certain nombre d’éléments ont été pris en compte pour que tous les visiteurs puissent naviguer facilement :

  • Le menu a été organisé de manière à refléter la structure du site web, avec des catégories claires et logiques qui permettent aux utilisateurs de comprendre rapidement où trouver l’information qu’ils recherchent.

  • Les libellés des éléments de menu sont concis, descriptifs et compréhensibles pour tous les utilisateurs, même ceux qui ont une compréhension limitée de la langue ou des difficultés de lecture.

  • Le menu s’affiche en haut de la page, dans l’entête et il est être clairement visible sur tous les types d’appareils (ordinateurs de bureau, tablettes, smartphones…).

  • Des couleurs contrastées ont été choisies pour les textes et les arrière-plans.

  • Il est entièrement consultable a l’aide d’un clavier. Les utilisateurs qui ont des difficultés motrices peuvent avoir besoin d’utiliser des raccourcis clavier pour naviguer dans le menu. 

  • Le menu s’ouvre au clic ou lorsque le visiteur utilise la touche TAB. Cette touche permet de se déplacer de lien en lien. La touche Entrée permet de sélectionner un élément de menu. La touche Echappe permet de fermer le menu.
  • D’un point de vue du balisage, il respecte les normes et il utilise les balises et des attributs appropriés :

    • HTML,

    • balise HTML accompagné d’un rôle ARIA <nav role= »navigation »> pour encadrer le menu et puis les combinaisons <ul><li> – liste non-ordonnées, pour les éléments de menu).

    • Lorsque plusieurs menus s’affichent sur un même page, a droite dans une barre latérale, une balise « aria-label » a été ajoutée pour bien différencier les différents menus.

    • Exemple : <nav role="navigation" aria-label="Menu principal">[…]</nav> etc…

Plan du site, Moteur de recherche, fil d’ariane

La navigation du site a été complétée avec :

  • un plan du site
  • un moteur de recherche
  • un fil d’ariane

Chaque page du site doit proposer au moins deux moyens de navigation (dans notre cas particulier, il en comporte plutôt 3) : le menu principal, le fil d’ariane et le formulaire de recherche avec accès complet à tous les contenus du site.

Les liens d’évitement ou skip link

Des liens d’évitement ont été installés sur le site. Le lien d’évitement affiché est intitulé : « Allez à la navigation ». D’autres liens sont disponibles : « Allez au contenu », « Allez au pied de page » et accessibles directement avec la touche TAB.

Ces liens d’évitement sont des liens hypertexte dont le rôle est d’aider les utilisateurs à naviguer rapidement et facilement vers une section ou une partie spécifique de la page : le contenu, le menu ou le pied de page par exemple. 

Ils sont placés en haut d’une page et constituent le premier lien de la page. Ils apparaissent sous la forme de liens texte clairs ou de boutons. Lorsqu’un utilisateur clique sur l’un de ces liens, il est redirigé vers le contenu, l’article, le menu principal ou le pied de page (où sont concentrées les informations concernant le site internet). Le visiteur n’a plus besoin de faire défiler la page et de se « perdre » dans la page.

Les liens d’évitement sont utiles pour les utilisateurs de technologies d’assistance, comme les lecteurs d’écran ou les claviers à commande vocale, pour naviguer sur des sites web. Ces technologies peuvent être configurées pour sauter automatiquement les sections de navigation répétitives ou les en-têtes, en utilisant les liens d’évitement pour accéder directement au contenu principal de la page.

Quelques exemples de menus 

Un menu principal

<nav role= »navigation » aria-label= »Menu »>  <ul>

<li><a href= »# »>Élément de menu 1</a></li><li><a href= »# »>Élément de menu 2</a></li>

  </ul>

</nav>

Dans cet exemple, nous utilisons la balise <nav> pour envelopper le menu, et nous spécifions le rôle ARIA en utilisant l’attribut role= »navigation ».

Cela aide les technologies d’assistance à comprendre que cette partie du contenu est un menu de navigation.

À l’intérieur de la balise <nav>, nous avons une liste non ordonnée <ul> qui contient deux éléments de menu représentés par les balises <li>. Chaque élément de menu est un lien <a> avec un href spécifié.

N’oubliez pas de remplacer les liens « # » par les URLs réelles de vos pages ou fonctionnalités correspondantes.

Assurez-vous également d’ajouter les styles CSS nécessaires pour rendre votre menu attrayant et convivial.

3 menus sur la même page

<nav role= »navigation » aria-label= »Menu principal »><

ul>

    <li><a href= »# »>Accueil</a></li>

<li><a href= »# »>À propos</a></li>

    <li><a href= »# »>Services</a></li>

  </ul>

</nav>

 

<nav role= »navigation » aria-label= »Menu d’aide »>

  <ul>

    <li><a href= »# »>FAQ</a></li>

    <li><a href= »# »>Support</a></li>

    <li><a href= »# »>Contact</a></li>

  </ul>

</nav>

 

<footer>

  <nav role= »navigation » aria-label= »Menu du footer »>

    <ul>

      <li><a href= »# »>Mentions légales</a></li>

      <li><a href= »# »>Politique de confidentialité</a></li>

      <li><a href= »# »>Conditions d’utilisation</a></li>

    </ul>

  </nav>

</footer>

Dans cet exemple, nous avons trois menus différents avec une balise HTML <nav>, un rôle ARIA et un attribut aria-label pour les différentier et indiquer leur but respectif.

Le premier <nav> représente le menu principal avec le rôle role= »navigation » et aria-label= »Menu principal ». Vous pouvez ajouter les éléments de menu pertinents dans la liste non ordonnée <ul>.

Le deuxième <nav> représente le menu d’aide avec le rôle role= »navigation » et aria-label= »Menu d’aide ». Vous pouvez personnaliser les éléments de menu selon vos besoins.

Enfin, nous avons le menu du footer enveloppé dans un élément <footer>. Il a également le rôle role= »navigation » et aria-label= »Menu du footer ». Vous pouvez personnaliser les éléments de menu dans la liste non ordonnée selon vos besoins.

N’oubliez pas, si vous utilisez ce code, d’ajouter les liens réels (href) correspondant à chaque élément de menu pour pointer vers les pages ou fonctionnalités appropriées.

Un fil d’Ariane

<nav aria-label= »fil d’ariane »>

  <ol role= »list » class= »breadcrumb »>

    <li role= »listitem »><a href= »# »>Accueil</a></li>

    <li role= »listitem »><a href= »# »>Catégorie</a></li>

    <li role= »listitem » aria-current= »page »>Page actuelle</li>

  </ol>

</nav>

Dans cet exemple, nous utilisons une liste ordonnée <ol> pour coder le fil d’Ariane. L’attribut role= »list » est utilisé pour indiquer explicitement que cet élément est une liste. Les éléments de liste sont représentés par des <li>.

Chaque élément de liste est un lien <a> qui représente un niveau du fil d’Ariane. Vous pouvez remplacer les liens « # » par les URLs réelles correspondantes.

L’attribut aria-current= »page » est ajouté au dernier élément de liste pour indiquer la page actuelle dans le fil d’Ariane pour aide les utilisateurs à comprendre où ils se trouvent dans la hiérarchie du site.

Le moteur de recherche

<form role= »search »>

<label for= »search-input » class= »visually-hidden »>Rechercher</label>

  <input type= »text » id= »search-input » placeholder= »Rechercher… » aria-label= »Rechercher »>

  <button type= »submit »>Rechercher</button>

</form>

Dans cet exemple, nous utilisons la balise <form> pour encapsuler le moteur de recherche. L’attribut role= »search » est utilisé pour indiquer explicitement que cette zone est un moteur de recherche.

Nous utilisons également une étiquette <label> avec la classe visually-hidden pour fournir une description textuelle du champ de recherche. La classe visually-hidden est utilisée pour masquer l’étiquette visuellement tout en la rendant disponible pour les technologies d’assistance.

L’élément <input> de type « text » est utilisé pour le champ de recherche lui-même. Il a un ID attribué qui est ensuite référencé par l’attribut for de l’étiquette <label>. L’attribut aria-label est utilisé pour fournir une étiquette alternative pour le champ de recherche.

Enfin, nous avons un bouton <button> de type « submit » qui permet de soumettre le formulaire de recherche.

Le plan du site

<nav role= »navigation » aria-label= »Plan du site »>

  <ul>

    <li><a href= »# »>Accueil</a></li>

    <li><a href= »# »>Catégorie 1</a>

              <ul>

        <li><a href= »# »>Sous-catégorie 1.1</a></li>

        <li><a href= »# »>Sous-catégorie 1.2</a></li>

            </ul>

    </li>

    <li><a href= »# »>Catégorie 2</a></li>

    <li><a href= »# »>Catégorie 3</a></li>

  </ul>

</nav>

Dans cet exemple, nous utilisons la balise <nav> pour encapsuler le plan du site. L’attribut role= »navigation » est utilisé pour indiquer explicitement que cette partie du contenu est une navigation.

Nous utilisons une liste non ordonnée <ul> pour représenter les différentes catégories du plan du site. Chaque catégorie est représentée par un élément de liste <li>, avec un lien <a> correspondant à la page ou à la section associée.

Si une catégorie a des sous-catégories, nous utilisons une liste imbriquée dans un élément de liste parent. Ainsi, les sous-catégories sont représentées par une deuxième liste <ul>, avec des éléments de liste <li> pour chaque sous-catégorie.

Les liens d’évitement 

  <body>

  <a class= »evitement » href= »#contenu »>Aller au contenu</a>

  […]

  <main role= »main »>

     <a id= »contenu » tabindex= »-1″></a>

     […]

  </main>

  […]

</body> 

Source : https://www.accede-web.com/notices/html-et-css/navigation-au-clavier/mettre-en-place-un-lien-devitement/

Consulter la page d’implémentation des liens d’evitement – Lien externe

 

 

Chaque projet est unique, souhaitez-vous un devis ?

Parlez-moi de votre projet
Retourner en haut de la page