Modes de navigations alternatifs sur le Web

Modes de navigations alternatifs sur le Web

La souris règne en maître comme élément d'interaction avec un site Web. Pourtant, il existe d'autre d'autres moyens de naviguer sur une page d'un site Web. Même si beaucoup de designers ont encore du mal avec ces modes alternatifs, et que tout le monde s'en fout (ou presque de l'accessibilité numérique), la généralisation de la navigation sur le Web via des tablettes (iPad, ...) ou des smartphones tactiles (iPhone, Android, Blackberry, Windows Phone, ... ) et l'arrivé imminente des Web TV devrait changer quelque peu les habitudes de conceptions.

Navigation au clavier

Par choix ou par obligation, la navigation au clavier est une alternative crédible à la souris. La touche Tabulation permet d'aller d'un élément qui peut avoir le focus à un autre élément du même type.

Les éléments qui peuvent avoir le focus sont les éléments de formulaires (boutons, champs de saisies, bouton radio, cases à cocher, ... ) et les liens. La propriété ARIA tabindex positionné à 0 permet d'ajoute la capacité à avoir le focus pour les éléments qui ne l'on pas (Cette propriété est disponible sur tous les navigateurs supérieur à IE 5) mais provoque une erreur XHTML.

C'est un des critères d'accessibilités extrêmement important, car sans ce mode de navigation aucun utilisateur souffrant d’arthrose, de tremblement, les mal-voyant et les aveugles ne peuvent naviguer sur une page Web.

Sur les sites de qualités, les premières tabulations se font sur des liens du types "Aller au menu" et "Aller au contenu" qui ne sont que des ancres vers les principales zones d'une page Web.

Par ailleurs, pour que ce soit possibles de naviguer au clavier, il ne faut pas supprimer la propriété CSS outline autour des liens (léger liseré gris), au contraire il faut marquer encore plus la prise de focus. Pour une fois, Flash avec sa bordure de 2px jaune nous donne un exemple à suivre.

Navigation à l'aide des titres

Une autre manière de naviguer est d'utiliser les titres. L'extension headingMaps de Firefox propose un panneau latéral qui permet de naviguer dans une page Web en servant de la hiérarchie de titre comme d'un index mécanisme que l'on retrouve dans les documents bureautique et dans les fichiers PDF.



HeadingsMap avec la page Internet Explorer 7 : le nouveau standard du Web

Ceci implique que la hiérarchie de titre est du sens et soit correctement faites. Comme c'est bon pour le référencement et pour l'accessibilité, il ne devrait pas y avoir trop de problèmes à ce niveau là. Mais dans les faits, tout le monde s'en fout du référencement et de l'accessibilité, donc c'est un carnage. 2 exemples :

Un des mauvais élève : le site de l'élysée

Le site de l'Élysée adopte une structure en h3 c'est à dire que tous les liens de la page sont des h3. La raison : une légende urbaine qui dit que Google vous fait un bisous si vous mettez un lien dans un titre.



Hierarchie de titre du site de l'Élysée

C'est n'est pas le seul site qui est dans ce cas, loin de là. Mais le site de l'Élysée aurait du être un exemple puisqu'il est soumis à la loi sur l'accessibilité numérique, et qu'une hiérarchie correcte fait partie des critères. En plus, le site dispose d'une politique d'accessibilité ventant son respect des normes du W3C.

Heureusement, certains sites sont mieux réalisés que d'autres et mode de navigation n'est pas des plus inintéressants.

On peut compléter la hiérarchie de titre avec des titres cachés, c'est ce que fait Google.

Navigation à la smartphone

Un dernier mode de navigation alternatif est celui que propose le Web Mobile. Un navigateur comme Fennec (version mobile de Mozilla Firefox) offre une un navigateur optimisé pour les smartphones, 2 fonctionnalités clés :

  • Pouvoir scroller facilement
  • Pouvoir zoomer facilement

Ces fonctionnalités sont également celles que j'utilise le plus sur mon navigateur de bureau, donc utiliser ce genre de navigateur pour naviguer sur son bureau n'est pas totalement débile, surtout pour lorsque qu'il s'agit de parcourir des sites en lecture (journaux, wikipedia, ...). Ca m'évite de chercher la touche Ctrl dès que j'arrive sur un site dont la taille de la police est inférieur à 13 pixels.

Ici encore, suivant les sites que l'on rencontre, la navigation est plus simple ou simplement impossible, tout dépendra du respect des bonnes pratiques d'ergonomie, de design et d'accessibilité qui auront été mis en place sur le site.

J'espère que l'année 2011 nous sortira de cette sortira de cette "Souris" dépendance.

Commentaires

fennec

C'est bien connu le h3 est le titre qui référence le mieux !!!

Les tweets qui ...

[...] Ce billet était mentionné sur Twitter par Veille Techno Web. Veille Techno Web a dit: RT @truffo: Modes de navigations alternatifs sur le Web http://bit.ly/gbDP6P #accessibilite #smartphone [...]

firefox

j'utilise la touche espace pour defiler verticalement quand je suis sur un forum par exemple... ca marche sous firefox, pas testé avec les autres...

Ajouter un commentaire

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
By submitting this form, you accept the Mollom privacy policy.