Signaler le focus améliore la navigation

Le lien ou l’élément qui a le focus est celui que l’internaute a atteint en tabulant au clavier, ou en positionnant le curseur de la souris ou encore le doigt sur l’écran tactile.

Essayez donc de tabuler sur un site (en pressant plusieurs fois la touche Tab de votre clavier) : si ce site est bien fait, vous verrez « s’allumer » les éléments que vous atteignez ainsi : liens, champs de saisie des formulaires, boutons, etc. Sinon pleurez.

Ne masquez pas le focus !

Méfiez-vous des reset CSS dont certains suppriment le style du focus, d’un coup de « :focus { outline: 0; } » par exemple, ce qui prive les internautes naviguant au clavier de tout repère et gène considérablement leur navigation. N’oubliez pas de le redéfinir, comme le recommande d’ailleurs Eric Meyer en commentaire de son fameux reset : remember to define focus styles !

La petite bordure en pointillés autour des liens (sous Firefox), que beaucoup cherchent à supprimer, est au contraire bien utile. Elle est même insuffisante. Avec ça, arrivez-vous vraiment à repérer le focus dans la page lorsque vous tabulez ? Le pointillé par défaut est souvent difficile à repérer, voir impossible (sur une image, par exemple, ou quand il se trouve hors champ).

Pour faciliter la navigation au clavier, il est préférable de faire ressortir le focus davantage que le style par défaut du navigateur [*].

Focus et survol, même combat ?

La méthode la plus simple consiste à styler d’une pierre deux coup, en ajoutant la pseudo-classe :focus à la règle stylant le survol des liens, en premier. C’est ce que recommande Roger Johansson : Whenever you use :hover, also use :focus. Par exemple :

a:focus, a:hover { text-decoration: underline; }

Focus et survol se démarquent alors exactement de la même façon. Mais ce n’est pas idéal : si le soulignement suffit souvent à confirmer le survol du pointeur que l’on suit des yeux à l’écran, le focus, qui n’est quant à lui pas précédé du regard, a besoin d’être signalé de façon beaucoup plus forte que le survol.

Renforcez plutôt le focus

Parcourir la page à coup de tabulations fait sauter le focus d’un coin à l’autre de l’écran de façon parfois imprévisible. Pour éviter de le perdre et de trop le chercher du regard, le focus doit attirer l’attention. Allons-y franchement, en stylant par exemple ainsi :

a:focus {
        z-index: 999 !important;
        background: black;
        color: white;
}

Cela fait d’ailleurs partie de ma feuille CSS de base, que je complète parfois de façon plus radicale, comme ici :

a:focus,
a:active {
        z-index: 999 !important;
        background: #330 !important;
        border-color: #330 !important;
        color: #FFF !important;
        text-decoration: none;
        outline: none;
}

Et voici ce que ça donne visuellement :

Essayez, vous verrez !

Voici quelques pages web où la navigation a été rendue plus agréable en stylant ainsi les pseudo classes CSS : lesintegristes.net, Référentiel AccessiWeb, Cuisine libre, goetter.fr, openweb.eu.org, lewebaccessible.com… C’est mieux, n’est-ce pas ? D’autres exemples ?