Outline:none ?

L’outline en CSS

Petite astuce en CSS. Je vois par moment, sur certains sites (quand on clique sur les liens), un petit outline. Une sorte de contour en pointillé tout moche, tout nul.

En tant que Webdesigner, je ne veux pas voir d’éléments imprévus de ce type venir casser mon design. En plus, si le design est centré le outline va commencer à la gauche du navigateur pour atteindre le lien et le contourner pour revenir au départ. Résultat : vous avez un énorme rectangle en pointillé. L’enfer.

Pour résoudre ce problème, c’est tout simple, un petit coup de CSS est c’est fini :

a:focus { 
outline: none; 
}

Problème : L’accessibilité.

Un problème en cache souvent un autre. Beaucoup de designers ne pensent pas aux personnes naviguant avec le clavier (touche tabulation par exemple). Si vous supprimez l’outline, l’utilisateur naviguant sur votre site avec un clavier ne pourra pas voir où se trouve le focus de sa sélection. Il sera perdu (et partira de votre site, énervé).

Alors, comment faire ?

Pas de solution miracle. Chrome n’affiche pas de outline au clique du lien, donc pas de problème. Mais comme tout le monde n’est pas sous Chrome, le but est d’avoir la même chose sur tous les navigateurs (autant que faire se peut).

Personnellement, je supprime souvent l’outline. Mais, ce que je conseille, c’est de rajouter un style particulier sur le focus des liens, une légère couleur de fond par exemple, ou une modification de la couleur du lien. Le but ici c’est d’avoir une information visuelle claire lorsque l’utilisateur navigue au clavier. Il faut qu’il sache où est-ce que son focus se trouve sans se poser de questions.

Source:

http://webaim.org/blog/plague-of-outline-0/
http://www.w3.org/Translations/WCAG20-fr/#navigation-mechanisms-focus-visible