Navigation - Accessibilité web

Chapitre accessibilité -> Navigation

Info

Nous allons étudier l'accessibilité concernant la navigation. C'est a dire la structure de votre page, les liens.

Structure identique

Même structure

Une structure différente pour chaque page, rend votre site difficile d'utilisation.
L'internaute risque d'être troublé, car il devra rechercher de nouveaux repères dans chaque page. Cela entraîne pour lui une perte de temps, il finira par se lasser et quittera votre site.

Il est donc important pour l'accessibilité des personnes handicapées (mais cela est valable pour tous les internautes) d'avoir une page structurée.
Regroupez les menus principaux au même endroit, et structuré votre contenu de façon clair (titre, sous titre, paragraphe).

Un fois que vous avez trouvez la structure qui vous semble idéale, garder la dans toutes les pages de votre site.

Plan du site et moteur de recherche.

Info

De nombreuses personnes ayant un handicap visuel recherche en priorité le plan du site ou le moteur de recherche.

Pour facilité l'accessibilité des personnes ayant un handicap visuel; faites toujours un plan du site et donnez en l'accès dans toutes les pages. Si vous avez un moteur de recherche, faites en de même.

Raccourcis claviers sur les liens

ACCESSKEY, TABINDEX

Pour faciliter l'accessibilité aux personnes handicapées, notamment pour celles qui utilisent le clavier, vous devez mettre des raccourcis claviers sur les liens principaux grâce à l'attribut ACCESSKEY et gardez les sur tout le site.
Exemple de code :
<a href="accessibilite.html" ACCESSKEY="0">Cours accessibilité</a>

Voici un exemple de raccourcis clavier qui portent sur une combinaison de lettres et surtout de chiffres.
Vous pouvez vous inspirez de la liste suivante :
- s : passer le menu,
- 1 : page d'accueil,
- 2 : page d'actualités,
- 3 : plan du site,
- 4 : moteur de recherche,
- 5 : FAQ,
- 6 : Page d'aide,
- 7 : contact,
- 8 : conditions d'utilisation,
- 9 : livre d'or,
- 0 : lien vers la liste des raccourcis clavier utilisés dans la page.

Pour les autres liens penser à mettre un attribut TABINDEX pour spécifier l'ordre de tabulation.
Exemple de code :
<a href="accessibilite.html" TABINDEX="1">Cours accessibilité</a>

L'énoncé des liens

title et énoncé

Un même énoncé dans des liens différents peuvent induire l'internautes en erreur.

Pour faciliter l'accessibilité aux personnes handicapées, évitez de mettre un énoncé identique dans plusieurs liens.
L'accessibilité passe aussi par la compréhension des énoncés employé, soyez plus le explicite possible. Ne pas mettre par exemple "cliquez ici".
Si vous ne pouvez pas, mettez un attribut TITLE.
Exemple de code :
<a href=balise.hml title="Article complet sur l'accessibilité du web">En savoir plus</a>

En règle général, l'attribut TITLE va vous permettre de donner des informations en plus de l'énoncer.
Comme l'attribut ALT, l'attribut TITLE est limité à 60 caractères (j'ai lu aussi 80).

L'énoncé ne doit pas être trop long.
Pour facilité l'accessibilité, l'énoncé du lien ne doit pas contenir plus de 60 caractères (j'ai lu aussi 80).

Liens javascript

Noscript

Il est possible que l'internaute ai désactivé le javascript ou que le navigateur spécial ne soit pas capable de l'interpréter. Dans ce cas, l'utilisation des liens de type <a href= javascript :>Lien</a> n'est pas possible.
Vous devez mettre une balise NOSCRIPT dans laquelle vous mettrez un équivalent du "javascript:".
Si vous ne pouvez le faire vous devrez faire un lien sur une page qui fournira une information équivalente.
Exemple de code :
<a href="javascript: window.open('accessibilite.html', '_blank')"> Accessibilité pour tous </a>
<noscript>

<a href="accessibilite.html" target="_blank" Title="Article sur Accessibilité pour tous (nouvelle fenêtre)"> Accessibilité pour tous </a>

</noscript>

Il semblerai que la plupart des lecteurs synthèse vocale ou des d'écran en braille ne supportent pas la technologie javascript.
L'utilisation du javascript comme moyen de navigation par exemple les menus déroulant est donc à proscrire si vous ne pouvez pas fournir d'équilant simple.

Des informations sur les documents

La langue

Lorsque qu'un lien cible un document HTML qui n'est pas dans la même langue que le document sur lequel se trouve le liens, spécifiez la langue avec l'attribut HREFLANG de la balise HTML A
Exemple de code :
<a href="traduction.html" hreflang="de">lien</a>

Le type

Lorsque qu'un lien pointe sur un document qui n'est pas html, vous devez spécifier son type mine avec l'attribut TYPE de la balise HTML A.
Exemple de code :
<a href="mondocument.doc" type="application/msword">lien</a>

Vous pouvez aussi à la place utiliser l'attribut TITLE qui va vous permettre d'être plus précis sur les informations du document cible. Par exemple, vous pourrez en plus de son type spécifier sa taille.
Exemple de code :
<a href="mondocument.doc" type="Document word sur l'accessibilité web taille:300Ko"> L'accessibilité web </a>

N'oubliez pas de donner à l'internaute, la possibilité de télécharger le plug-ing.

Ouverture de fenêtres.

Alt

Il se peut que vous ayez une image contenant des zones cliquables, vous devez spécifier un équivalent texte pour chaque zones.
Vous devez dans ce cas mettre un l'attribut ALT de la balise HTML IMG.
Et mettre un attribut ALT dans chaque balise HTML AREA.

Exemple :

Exemple de code :
<img src="menu_image.gif" width="221" height="25" border="0" usemap="#Map" alt="barre de navigation principale">

<map name="Map">

<area shape="rect" coords="10,3,58,22" href="#" alt="Menu 1">
<area shape="rect" coords="67,3,112,22" href="#" alt="Menu 2">
<area shape="rect" coords="119,3,165,22" href="#" alt="Menu 3">
<area shape="rect" coords="172,3,215,22" href="#" alt="Menu 4">

</map>

pop up

L'ouverture d'une fenêtre non prévue (ex : pop up) perturbe la navigation notamment pour les personnes qui utilisent des aides techniques pour naviguer.
En règle générale, l'ouverture d'une nouvelle fenêtre est déstabilisant pour les personnes aveugles.

Evitez d'ouvrir une nouvelle fenêtre.
Cependant, si cela est nécessaire, annoncez le avec l'attribut TITLE : ouverture dans une nouvelle fenêtre.
Exemple de code :
<a href="www.w3c.org" title="Accès au site sur l'accessibilité (nouvelle fenêtre)">Le site sur l'accessibilité</a>

Nombre de liens

9 Liens

Evitez de mettre trop de liens dans vos menus.
9 éléments semblent être le chiffre idéal, mais cela reste à vérifier.