Développement Web et navigation au clavier

Avant-propos

Selon vous, quel est le point commun entre tous ces sites ?

Ils sont en effet tous plutôt récents, et beaucoup d’entre eux abordent des techniques de mise en forme avancées, n’est-ce pas ? On peut donc penser qu’ils sont réalisés par des spécialistes du métier ; d’autant que certains d’entre eux sont très connus.

Pourtant, ils souffrent tous d’un problème récurrent : il est compliqué, voire impossible de naviguer pleinement au clavier sur ces sites.

Naviguer… au clavier ?

Vous savez sans doute que tout bon logiciel propose des raccourcis afin d’offrir une alternative à la souris.

À l’aide d’une touche ou d’une combinaison de touches, on parvient à effectuer une action sans avoir à déplacer le curseur dans les menus habituels. On gagne ainsi un temps précieux lorsqu’il s’agit de tâches récurrentes.

Certains raccourcis sont communs à tous les systèmes d’exploitation, d’autres plus spécifiques à votre environnement, et d’autres encore seront communs au type d’application que vous utilisez, voire dédiés à votre logiciel courant.

Notons par exemple le fameux basculement entre applications (alt + tab), le copier / coller (ctrl + c / ctrl + v), l’enregistrement d’un document (ctrl + s), la création d’un nouvel onglet dans votre navigateur (ctrl + t) ou encore la création d’un nouveau calque sous Photoshop (ctrl + shift + n).

Nos navigateurs proposent aussi de nombreuses touches récurrentes avec lesquelles nous pouvons interagir avec l’interface, et plus spécifiquement la page Web.

On pourra ainsi contrôler le défilement de celle-ci à l’aide de la barre d’espace, des touches de saut de page, ou des touches directionnelles. La navigation au sein de la page se fera, elle, d’item en item à l’aide de la touche de tabulation principalement. Enfin, la manipulation de ces items se fera à l’aide des touches directionnelles, de la touche espace et de la touche de validation.

Vous pouvez essayer sur une page toute simple sans toucher à votre souris, vous constatez que toutes les options sont accessibles au clavier.

• Note aux utilisateurs sous Mac : il sera peut-être nécessaire d’activer l’accès au clavier complet pour que cela fonctionne.
• Note aux utilisateurs sous Opera : ce navigateur propose une navigation au clavier un peu différente, consultez la documentation si vous n’êtes pas à votre aise.

Si vous n’en avez pas l’habitude, commencez par appuyer plusieurs fois sur la touche tabulation de votre clavier jusqu’à identifier un cadre pointillé se déplaçant. C’est ce qu’on appelle le focus, et il permet de se situer lors de la navigation dans la page. Quand un composant prend le focus il est alors manipulable.

Une case à cocher sera par exemple actionnée en appuyant sur espace ; un lien validé par la touche entré  ; une liste d’options parcourue avec les touches directionnelles.

Vous noterez que seuls certains éléments HTML prennent le focus ; ceux qui n’ont pas vocation à être manipulés ne le reçoivent pas. C’est le cas des paragraphes, des titres ou des images.

Autres possibilités

Notez qu’il existe d’autres modes de navigation au clavier :

• les lecteurs d’écrans proposent de se déplacer rapidement dans une page Web en listant ses titres ou ses liens par exemple ;
• certains navigateurs proposent une navigation dans la page à l’aide d’un curseur que l’on peut déplacer grâce aux touches directionnelles. (C’est le cas de Firefox lorsque l’on active ce mode avec la touche F7.)

N’hésitez pas à expérimenter cela sur la page de test précédemment vue si vous le souhaitez.

(Il est même possible techniquement de définir vos propres raccourcis claviers sur le site Web que vous concevez. La pratique a cependant montré qu’il s’agissait là d’un objectif difficile à atteindre.)

À qui cela sert-il ?

Comme bien souvent lorsque l’on parle accessibilité, les techniques mises en place profitent à un large panel d’utilisateurs, souffrant de handicap ou non.

Ainsi, la navigation clavier va être incontournable pour les handicapés moteur qui ne pourront effectuer que des mouvements très limités. Bien souvent, ils peuvent utiliser un trackball et ainsi ne pas être contraints par d’amples mouvements à réaliser, mais parfois ils ne peuvent interagir qu’avec un nombre restreint de touches. Ces touches sont alors déportées sur un appareil spécifique et parmi elles, la touche de tabulation et la touche de validation sont bien sûr en premières places.

C’est évidemment le meilleur exemple possible puisque la technique est ici indispensable.

Mais la navigation au clavier va aussi se révéler bien pratique lorsqu’il s’agit de remplir un formulaire rapidement. Il n’est alors plus nécessaire d’alterner frappe au clavier et mouvement de souris entre chaque champ à compléter. Il suffira après la complétion d’un champ d’appuyer sur la touche de tabulation pour passer à la saisie suivante. On pourra même envoyer l’intégralité du formulaire à l’aide de la touche de validation.

Nous sommes ici dans une situation ou les fonctions d’accessibilité apportent un confort supplémentaire.

Et dans des cas plus rares, la navigation clavier offrira une échappatoire pratique. Lorsque la souris n’a plus de batteries par exemple, ou que le trackpad ne répond plus depuis que vous avez renversé du café dessus.

Il s’agit là de dépanner ponctuellement. Exactement comme dans une situation de handicap, mais à court terme.

Mais pourquoi ça casse parfois alors ? Que faut-il faire ?

Que s’est-il passé alors sur notre petit échantillon de site, pour que les composants HTML accessibles par défaut au clavier ne le soient plus ?

Il existe plusieurs raisons techniques à cela (nous allons les détailler), mais le plus souvent, il va s’agir de méconnaissance ou d’inattention. (C’est de fait la raison d’être de cet article.)

Pouvoir se repérer

Prenons l’exemple de The Fancy. Si vous commencez à naviguer sur la page, vous constaterez bien vite que le focus n’apparaît pas : il n’y a aucun moyen de savoir avec quel élément vous êtes en train d’agir.

C’est un souci qui provient de la mise en forme de la page. En effet si vous analysez les feuilles de styles du site, une mise en forme bien particulière est apportée sur les liens :

a { outline: none; }

La propriété outline est justement celle qui agit sur la présentation du focus, et ici il est carrément supprimé visuellement.

De manière générale, il est donc conseillé de ne jamais altérer ce style par défaut afin de laisser aux utilisateurs un retour visuel identique et connu quel que soit le site visité.

Utiliser les bons composants

Autre exemple : cette sympathique animation 3D de feuille qui se déplie proposée par Codrops.

Le « click me » est malheureusement bien trop explicite, puisqu’en effet, seul un utilisateur à la souris pourra venir interagir avec cet élément.
Il s’agit en fait d’un simple <span> dans le code HTML, mis en forme via CSS pour recevoir un curseur spécifique au survol.

C’est la même erreur qui est faite sur la page de démarrage de Mozilla Firefox quand il s’agit de mettre en avant une vidéo et sur les pages de Wikipedia quand une bannière d’appel aux dons est affichée.

Il va donc être important lorsque des interactions sont à prévoir de permettre de s’y « accrocher ». Pour cela utilisez des éléments HTML natifs ; et dans cet exemple précis l’idéal serait sans doute un <button>.

Un lien ferait également l’affaire, mais Samuel Le Morvan vous expliquera très bien pourquoi cela pose d’autres soucis. Au passage, retenez également que pour qu’un lien soit actionnable au clavier, il doit être muni de son attribut href.

Des techniques plus avancées permettent de donner le focus à un élément ne pouvant le recevoir par défaut. Stéphane Deschamps vous en dira plus à travers un exemple sur les popins si ce sujet vous intéresse.

Prendre en compte les spécificités du média

Côté CSS

Une autre erreur courante consiste à ne pas prévoir d’autre type de navigation que celle à la souris. C’est le cas sur le formulaire d’inscription de Pinterest.

Au hover, un effet graphique est bien ajouté aux liens, mais au focus cet effet n’est pas appliqué.

On devrait plutôt jouer sur d’autres propriétés CSS pour renforcer l’effet. Comme ici, où l’effet de survol (destiné par définition aux utilisateurs de la souris) qui sera aussi déclenché lors du focus (pour les utilisateurs qui utilisent le clavier) :

a { 
color: green; 
} 
a:hover, a:focus, a:active /* le :active, c'est du bonus ! */ { 
background-color: blue; 
}

(Malheureusement dans les deux cas, du vert sur du bleu, ça reste toujours très moche.)

Côté JS

De la même manière si vous faites du JavaScript, pensez toujours à doubler les interactions qui déclenchent vos comportements. Utilisez ainsi à la place de .hover :

$('a').on('mouseenter, focus', function(){ // … }); 
$('a').on('mouseleave, blur',  function(){ // … });

(OK, ici c’est du jQuery en fait, mais vous voyez l’idée.)

Dans le cadre des menus-déroulants au survol (un problème bien spécifique – visible par exemple sur le site de Bowers & Wilkins), je ne saurais trop vous conseiller de simplifier la tâche de vos utilisateurs (tout en simplifiant la vôtre au passage). Et pour cela rien ne vaut la traduction proposée par l’équipe de Pompage sur le sujet.

Les interfaces tactiles viennent d’ailleurs confirmer tout cela puisqu’elles ne proposent pas directement le support des interactions au survol.

Prévoir des raccourcis

Moins évident mais tout aussi embêtant, faites donc un tour sur le site d’Amazon et tout en naviguant au clavier, tâchez de partir sur la page « Qui sommes-nous ?  » proposée dans le pied de page.

Il vous faudra pas moins d’une centaine d’appuis sur la touche tabulation pour cela… Un peu fatigant, non ?

C’est pour contourner ce problème qu’il est conseillé de proposer des liens internes dans les pages, afin de pouvoir sauter facilement des sections. Le plus courant est de regrouper ses liens en début de page :

<ul> 
<li><a href="#nav">Aller au menu</li> 
<li><a href="#article">Aller au contenu</li> 
<li><a href="#search" >Aller au à la recherche</li> 
</ul>

Toute personne étant amenée à consulter le contenu de la page linéarisé en profitera grandement (c’est le cas lors de la navigation au clavier mais aussi pour les utilisateurs de lecteurs d’écrans).

Cette astuce sera également profitable :

• aux utilisateurs qui souhaitent agrandir les pages à l’aide d’une loupe ;
• aux utilisateurs qui consultent les pages avec un écran de taille réduite.

Il n’y aura en effet plus besoin de chercher au hasard où peut se trouver telle ou telle fonctionnalité, puisque le menu d’accès rapide vous y mènera directement.

Ne pas aller à l’encontre des comportements natifs

Côté JS

L’exemple de Capitaine Train est plus complexe, puisqu’il s’agit là d’un problème sur un élément riche de l’interface : le calendrier qui permet de choisir facilement une date de départ et d’arrivée.

Vous constaterez qu’il est totalement impossible d’atteindre cette partie de l’écran au clavier, mais que la saisie au clavier est même désactivée sur le champ de formulaire associé. L’usage de la souris est donc obligatoire pour passer commande.

Côté CSS

Dernier exemple pour finir : Design it & Code it propose un menu déroulant ne nécessitant pas de JavaScript pour fonctionner.

Malheureusement, l’utilisation du pseudo-sélecteur :focus à mauvais escient rend bien sûr une fois encore la navigation à la souris indispensable. En voulant se faire dérouler le menu au focus sur son titre, il s’avère qu’une simple tabulation pour en parcourir les liens du sous-menu provoquera sa fermeture immédiate (puisque le titre perd au même moment le focus). Un peu rageant.

Les widgets

Outre les bonnes pratiques que nous avons listées jusque-là qu’il faut mettre en place, il est maintenant possible d’aller encore plus loin sur ce type de composant riche. ARIA permet en effet de définir (entre autres) le fonctionnement des widgets.

Là encore, si le sujet vous intéresse, l’idéal est sans doute de commencer par cette introduction traduite par Pierre Bertet. Et pour pousser plus loin, Stéphane Deschamps posait il y a quelques semaines des questions spécifiques à la navigation clavier.

Pensez‑y quand vous coderez ou choisirez votre prochain système de popins, carrousels ou calendriers : les erreurs sont très courantes sur ces composants.

Conclusion

Vous l’aurez noté, parmi les exemples passés en revue, certains sont des démonstrations technologiques n’ayant pour autre but que d’expérimenter, et certains de ces exemples sont anecdotiques. Cependant, les cas réels que nous avons relevés montrent aussi qu’une attention constante doit être portée à ces problématiques.

« Ne contraignez pas vos utilisateurs » : voilà une bonne résolution pour cette nouvelle année qui approche. Bonnes fêtes à tous. :)