Focus Visible

Les navigateurs mettent en évidence de manière visuelle l'élément qui a le focus. Dans certains navigateurs cet élément est entouré d'un cadre en pointillés.

Cette indication visuelle est indispensable pour se situer dans la page si l'on la parcourt avec le clavier. Il n'est donc pas permis de la supprimer. Pour faciliter l'accès aux personnes malvoyantes, il est même recommandé de l'accentuer visuellement. Ceci permet au visiteur de savoir à tout moment où il se situe sur la page. Les exemples ci-dessous illustrent ce point.

Exemple de focus supprimé (Pas OK)

a:focus { 
 outline: none; 
} 

a:focus { 
 outline: 0;
}

Exemple d'accentuation du focus (Mieux)

En définissant un "focusstate" pour les hyperliens, ceux-ci seront bien visibles lors du parcours de la page au moyen du clavier.

a:focus {
 background-color: #000000;
 color: #FFFFFF;
} 

Cette adaptation simple n'est pas visible pour les utilisateurs de la souris mais est une aide précieuse pour les utilisateurs du clavier.