Des liens d'accès rapide activables au clavier

Au premier coup d'œil, la nouvelle page d'accueil fait apparaitre le logo, la signature marketing (aimer la ville) puis la barre de navigation horizontale du site. Ça n'est quand attaquant la page avec la touche de tabulation du clavier que l'on voit apparaitre deux liens en haut de page :

1. aller au contenu
2. aller au menu

Je n'ai pas souvenir que ces liens existaient sur l'ancienne page d'accueil du site de la RATP. C'est une bonne aide pour ceux qui naviguent au clavier particulièrement ceux qui le font pour des raisons de déficience motrice. Les non voyants utiliseront sans doute plus les raccourcis qu'offrent la structuration plutôt riche de la page (balises de titre).

La navigation au clavier dans le reste de la page

Après avoir appuyé plusieurs fois sur la touche de tabulation, on réalise rapidement que quelque chose cloche : les liens textes se soulignent quand on a le focus dessus, mais les autres liens ne changent pas d'apparence du tout (les liens image de drapeaux de changement de langue du site ou les éléments de navigation de la galerie photo centrale). On est alors rapidement perdu dans sa navigation. Habituellement, sous Firefox, on a au moins un entourage du lien en pointillé !

Pour compenser cette perte d'information (la localisation du focus), j'ai essayé de me repérer dans la page en lisant les URL qui s'affichent dans la barre de statut de mon navigateur...pas très ergonomique !

Pourquoi les liens hypertexte image, les boutons ne sont-ils pas mis en valeur quand on tabule dessus ?

Une lecture rapide des feuilles de style de la page laisse apparaitre des règles de remise à zéro d'un certain nombre de propriétés CSS. Il s'agit, comme indiqué en commentaire , de la méthode de remise à zéro CSS de Eric Meyer (version de janvier 2008). Le premier sélecteur :

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline;}

fait apparaitre, pour toutes les balises ci-dessus, la règle :

outline:0;

Cette règle remet à zéro l'entourage des éléments qui ont le focus (pointillé sous Firefox).

Alors, ce ne serait pas grave si elle était suivie d'une règle où on redéfinit un style pour le pseudo-sélecteur :focus. C'est d'ailleurs précisé par Eric Meyer dans les commentaires de son code (remember to define focus styles!) !

Mais ça n'est pas le cas : cette instruction n'a pas été suivie par les développeurs du site.

La galerie photo centrale ne fonctionne qu'à la souris

Après moult essais, j'ai décidé de laisser tomber le parcours au clavier de la galerie photo centrale (3 photographies).

L'animation est codée par du code maison qui s'appuie sur la librairie javascript jquery. On a codé des évènements pour le périphérique "souris" uniquement :

• $('#animation li.next').mouseover
• $('#animation li.next').click

Recommandation RGAA (point de contrôle 6.4) : les événements gérés par la souris onmouseover et click devraient être doublés avec les évènements clavier correspondants focus et keypress.