Bon nombre de sites web contiennent des blocs qui se répètent sur chaque page, comme le menu de navigation ou un bloc de publicités. Donnez la possibilité aux visiteurs de contourner ces blocs.

Cela évitera aux personnes malvoyantes utilisant un logiciel de synthèse vocale de relire, à chaque page, l’entièreté du menu de navigation ou les publicités et d’accéder ainsi directement aux informations qui les intéressent. En effet, le logiciel de synthèse vocale lit les éléments de la page dans l’ordre dans lequel ils figurent dans le code source.

Les personnes qui naviguent uniquement à l’aide du clavier doivent pouvoir contourner ces blocs pour éviter de passer par tous les liens qui se trouvent sur la page.

Ceci leur permettra de gagner du temps, d’éviter douleurs et frustrations.

Comment vous y prendre ?

Vous avez le choix entre deux méthodes :

  1. ajouter des liens qui permettent de sauter les blocs répétitifs ;
  2. regrouper des éléments de la page à l’aide de code afin de les passer.

Liens pour sauter des blocs

Pour ajouter des liens permettant de sauter des blocs, vous pouvez procéder comme suit. Ces liens sont aussi appelés « skip links » (ou liens d’évitement).

Skip link vers l’élément le plus important

Placez au-dessus de chaque page un lien qui mène directement à l’élément le plus important. Il s’agit généralement du contenu principal de la page.

  • Le lien peut être visible de façon standard ou uniquement quand le visiteur se rend dessus avec la touche de tabulation et que le lien reçoit le focus.
  • Il est essentiel que ce lien se trouve aussi haut que possible dans le code source, de préférence tout en haut.
Exemple :

Le premier lien dans le code source est le suivant :

<a href="#contenu">Aller directement au contenu</a>

Plus bas dans le code source, on retrouve ensuite l’élément avec le contenu principal de la page. Celui-ci a l'ID contenu vers lequel vous renvoyez avec le skip link.

Un lien par bloc pour le passer

Chaque bloc au contenu répétitif est pourvu d’un lien qui permet de le contourner. Placez ce lien juste avant le bloc pour que le visiteur puisse passer directement au texte qui suit.

Cette méthode n’est pas toujours nécessaire ; elle peut s’avérer utile quand il y a des blocs avec de nombreux liens sur une page web. Comme dans le cas d’un index alphabétique où l’on peut cliquer sur chaque lettre de l’alphabet. C’est une longue liste de liens que certains visiteurs souhaitent passer.

Exemple :

Un bloc avec des liens se présente comme suit :

<h2 id="chapitre1">Sources externes</h2>
<a href="#chapitre2">Passez ce bloc</a>
<ul>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.lesoir.be">Le Soir</a></li>
<li><a href="https://www.rtbf.be”>RTBF</a></li>
<li>...</li>
</ul>
<h2 id="chapitre2">À propos de ce rapport</h2>
<p>Texte du chapitre 2…</p>

Grâce au lien sous le premier en-tête, le visiteur peut passer directement au chapitre suivant et sauter les liens qui se trouvent dans le premier chapitre.

Table des matières en haut de la page

Créez une petite table des matières tout en haut de la page, avec des liens vers les éléments principaux. Ceux-ci ne doivent pas uniquement renvoyer vers des éléments du texte, mais aussi vers la fonction de recherche et le menu de navigation. Cette solution est particulièrement utile quand la page contient plusieurs éléments importants.

Regrouper des éléments avec le bon code

Pour répondre à cette exigence, vous pouvez aussi tutiliser du code et des techniques de programmation au lieu de liens. Il existe plusieurs façons de regrouper des éléments de la page avec du code. Vous pouvez par exemple utiliser des en-têtes pour tous les blocs importants sur une page. Pensez au contenu principal, mais aussi à la fonction de recherche, au menu principal, à un formulaire...

Grâce aux en-têtes, les visiteurs qui utilisent une technologie d’assistance peuvent rapidement aller à un élément. Les attributs ARIA dans le code HTML vous permettent quant à eux d’indiquer les sections d’une page. Une autre méthode consiste à afficher ou masquer des blocs avec la fonction qui permet de les réduire et de les développer. Pour ce faire, l’on utilise généralement un langage de programmation tel que JavaScript.

Pour les développeurs

Dans la plupart des cas, le développeur devra s’assurer qu’il est possible de sauter des blocs qui se répètent. Pour ce faire, il peut placer des skip links tout en haut du code source ou regrouper des éléments de la page avec du code.