Focus : la pseudo-classe championne d'ergonomie et d'accessibilité

Souvent méconnues, les styles s’arrêtent en général à changer la couleur et le soulignement sur a:link, a:visited {...} et a:hover, a:active {...}. Pire, on voit même fleurir :focus { outline: none; } sans surcharge plus loin.

Les bons réflexes

Le curseur dirigé par la souris n’est pas systématiquement placé là où l’utilisateur interagit avec l’ordinateur. Le système d’exploitation et le navigateur mettent donc en valeur l’élément actuellement ciblé, généralement par un contour pointillé.

Focus

Comme l’indique Eric Meyer dans resetting again, il faut rendre le focus visible d’une manière ou d’une autre après l’avoir neutralisé. Le but des reset est de repartir d’une base neutre et homogène sur les différents navigateurs, pas de faire perdre leurs repères aux visiteurs ! Si vous utilisez :focus { outline: none; } il faut le redéfinir pour les liens et les éléments de formulaire, comme expliqué ci-après.

Liens

Pour ceux qui utilisent le clavier dans les pages web, il est important de savoir où se trouve le focus. Le minimum consiste à les styler comme les liens au survol en groupant la déclaration :

a:hover, a:active, a:focus {...}

En pratique cependant, il vaut mieux mettre largement en évidence les liens d’évitement (skip links) car ils sont souvent à la périphérie du champ de vision de l’utilisateur, en haut de page. Pour ceux-là, on peut préférer un contraste fort afin d’attirer l’oeil. Rien n’oblige cependant à utiliser le même style pour le focus et le survol (pour éviter une crise cardiaque au graphiste…)

a.skiplinks:hover { text-decoration: underline; }
a.skiplinks:focus { color: #fff; font-weight: bold; background: #f80; }

Formulaires

Pour faciliter la saisie, je recommande d’augmenter le contraste du champ actuellement en cours d’édition, par exemple avec un texte noir sur fond blanc.

input.text:focus, textarea:focus { color: #000; background: #fff;}\

Note : La déclaration ne doit pas modifier les input de type button, checkbox, image, radio, reset, submit. Il faut donc ajouter une classe (par exemple text) aux seuls input type="text" et input type="password".

Il faut également mettre en évidence les différents types de boutons : button, image, reset, submit. On utilise souvent pour cela un contour (outline) de couleur adapté à la charte.

Informations complémentaires :

• Les navigateurs utilisent outline sur ces éléments parce que cette propriété n’influence pas les dimensions, d’après le box model.
• Si un navigateur ne reconnait pas le type d’un input, il utilise le type text par défaut. Ca peut permettre de repérer une coquille dans le code (par exemple quand on écrit type="radiobutton" au lieu de type="radio").
• Les utilisateurs de Firefox peuvent ajouter le contenu du fichier joint (userContent.css) pour augmenter la visibilité de l’indicateur de focus sur l’ensemble des pages qu’ils visitent. Suivre les instructions sur le site de support de Firefox pour savoir où placer ce fichier. (Ce n’est pas de moi, mais depuis plus d’un an que j’utilise ces styles, j’ai du mal à m’en passer).