Reset CSS et outline : attention

Pour rappel le Reset CSS est une technique permettant une remise à 0 des propriétés de style par défaut pour les éléments HTML. Si cette technique est mal utilisée et mal maitrisée, cela peut poser des problèmes d'accessibilité. Le plus fréquent est la déclaration de la propriété outline à 0.

Qu'est-ce que l'outline ?

L'outline est le liseré visible autour des éléments d'une page HTML recevant un focus comme les liens, ou certains éléments de formulaire. Il permet d'apporter un repère visuel au moment où l'élément reçoit ce focus. Cette fonctionnalité est très utile dans le cas d'une navigation au clavier car elle permet de se repérer plus facilement dans la page. L'enlever c'est supprimer un mécanisme d'accessibilité important pour certaines catégories d'utilisateurs.

Mon client ne trouve pas cela esthétique

Deux solutions existent pour conserver ce mécanisme intact tout en l'intégrant à une charte graphique :

1. habiller l'outline sur les états :active et :focus des liens
2. habiller les états :active et :focus des liens d'une manière plus générale avec d'autres propriétés de style

L'intérêt d'utiliser la deuxième solution est la marge de manœuvre plus importante pour le rendu graphique car il est alors possible d'agir sur plusieurs caractéristiques du lien :

• le soulignement
• les bordures
• la couleur
• la couleur de fond
• la graisse

Un petit rappel mnémotechnique en passant pour la déclarations des différents états d'un lien dans une feuille de style : LoVe HAte.

• a:link
• a:visited
• a:hover
• a:active et a:focus

Le cas Internet Explorer

A ma connaissance il n'est pas possible d'agir sur la propriété outline pour ce navigateur et donc de le supprimer. De surcroît, les versions 6 et 7 d'Internet Explorer ne reconnaissent pas l'état :focus qu'ils assimilent à l'état :active il faut donc faire attention à la déclaration de ces deux états afin que cela soit visible sous IE.

Même si outline n'est pas modifiable (donc pas annulable) sur ce navigateur, cela n'empêche pas, bien au contraire d'améliorer l'ergonomie en accentuant le rendu visuel des liens dans leur état :active.

Note : Cet article ne mentionne que les liens en exemple, mais comme indiqué initialement outline agit sur tout élément recevant un focus comme ceux des formulaires. Il est de votre responsabilité de faire attention, de tester et vérifier les différents rendus dans une démarche d'accessibilité.

Voici un exemple d'usage sur le site web-pour-tous.org :

a:link {
  color: #E17A04; 
  text-decoration:underline;
}
a:visited {
  color: #8D5D26;
  text-decoration:underline;
}
a:hover {
  color:#8D5D26;
  text-decoration:none;
}
/* Déclaration pour IE qui assimile l'état :focus à l'état :active */
a:focus, a:active {
  background:#ACDFFA;
  text-decoration:none;
  color:#000000;
}