a { outline: none; }

Ne fais pas ça!

Que fait la propriété outline?

Elle permet d'identifier le lien ayant le "focus" quand on navigue dans un document Web en utilisant la touche TAB (ou un équivalent). Ceci est particulièrement utile pour les gens qui ne peuvent pas utiliser une souris ou ayant une déficience visuelle. Si vous supprimez le contour vous rendez votre site inaccessible pour ces personnes.

Définir le focus sur les éléments de navigation est une exigence d'accessibilité, c'est clairement indiqué dans les Règles pour l'accessibilité des contenus Web (WCAG) :

2.4.7 Visibilité du focus : toute interface utilisable au clavier comporte un mode de fonctionnement où le focus est visible. (Niveau AA)

Pourquoi certains web designers le supprime ?

Souvent par refus que leur design soit "pollué" par le style par défaut, ou par ignorance totale de l'accessibilité.

Beaucoup d'intégrateurs utilisent un resetCSS qui désactive le contour. Parmi ceux-là se trouve celui d'Eric Meyer, mais Eric est parfaitement clair : ceux qui l'utilisent doivent redéfinir le style du focus.

/* remember to define focus styles! */
:focus {
outline: 0;
}

Notez le commentaire qui dit explicitement n'oubliez pas de définir les styles du focus ! - L'ignorance n'est pas une excuse.

Si vous devez le supprimer, définissez un style alternatif

Il n'y a pas vraiment de raison de supprimer le contour, mais si votre vie en dépend, vous pouvez utiliser l'une des méthodes suivantes pour styler les liens ayant le focus. Utilisez la touche TAB pour voir ce que ça donne sur les liens suivants :

Pour en savoir plus

Avez-vous écrit à propos de ce problème ? Faites-le le savoir et nous envisagerons d'ajouter votre article/billet - outlines + outlinenone.fr

Si vous vous souciez de l'accessibilité votre aide est la bienvenue en passant le mot et le lien vers http://www.outlinenone.fr/

Merci à Roger Johansson de 456 Berea Street qui m'a inspiré pour monter ce site.

Ce document est une traduction du site outlinenone.com de @RobBluedreamer.