« Le focus fonctionne très bien chez moi » : cette phrase précède presque toujours la découverte qu’un testeur utilise Safari, et que rien n’est visible du tout lorsqu’il navigue au clavier sur le site. Le développeur, lui, teste sur Chrome ou Firefox, où un contour de focus apparaît malgré une règle CSS qui aurait dû le supprimer partout. Le bug n’est pas dans Safari : il est dans une différence de comportement par défaut entre navigateurs face à une même règle CSS mal écrite.
Symptôme
Sur un thème WordPress personnalisé, la navigation au clavier ne montre aucun indicateur visuel sur les liens du menu ni sur les boutons lorsqu’on teste avec Safari sur macOS ou iOS. Le même site, testé avec Chrome ou Firefox sur la même machine, affiche un contour bleu discret autour des éléments focalisés. Le comportement est incohérent d’un navigateur à l’autre alors que le CSS livré est identique.
Diagnostic
La cause presque systématique est une règle de reset CSS du type :
a, button, input, select, textarea {
outline: none;
}
Cette règle, souvent héritée d’un reset CSS générique copié d’un projet à l’autre, supprime l’indicateur de focus natif sur tous les navigateurs. Mais Chrome et Firefox appliquent, dans certains contextes, un style de focus de secours généré par leur moteur de rendu interne (notamment via l’algorithme historique de :focus combiné à des heuristiques propres à chaque navigateur), ce qui masque partiellement le problème lors des tests. Safari, lui, respecte la règle CSS à la lettre et ne restaure aucun style : le résultat est un focus totalement invisible, sans aucun repli.
Le bug n’est donc pas propre à Safari : c’est le seul navigateur qui applique fidèlement une règle CSS déjà cassée pour tout le monde, révélant un problème que Chrome et Firefox masquaient partiellement par leur propre comportement de repli.
Correctif
Le réflexe de supprimer purement et simplement la règle outline: none fonctionne, mais réintroduit le style de focus par défaut du navigateur, souvent jugé disgracieux visuellement par les designers, ce qui explique pourquoi cette règle avait été ajoutée en premier lieu. La bonne pratique consiste à remplacer l’indicateur natif par un style personnalisé, appliqué uniquement lors d’une navigation clavier grâce à :focus-visible :
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 3px solid #1a4b8c;
outline-offset: 2px;
}
:focus-visible a l’avantage de ne s’appliquer que lorsque le navigateur estime que la navigation se fait au clavier (ou par un autre moyen non pointeur), évitant l’apparition disgracieuse d’un contour après un simple clic à la souris, tout en garantissant sa présence pour la navigation clavier, y compris sous Safari.
Vérification
La correction doit être testée sur les trois navigateurs principaux, en utilisant uniquement la touche Tab pour parcourir la page, sans toucher la souris : le contour personnalisé doit apparaître de façon identique sur Chrome, Firefox et Safari, sur desktop et mobile lorsque c’est pertinent (clavier Bluetooth sur iPad par exemple). Un test rapide avec l’inspecteur d’accessibilité de Safari (menu Développement > Afficher l’inspecteur Web > onglet Éléments, propriété :focus forcée) permet de confirmer visuellement le style appliqué sans naviguer manuellement à chaque vérification.
Prévention
- Bannir tout reset CSS générique qui retire
outlinesans réintroduire un style de remplacement dans la même règle. - Tester systématiquement au clavier sur Safari avant chaque mise en production d’un thème, pas seulement sur le navigateur de développement habituel.
- Documenter dans le guide de style du thème la règle
:focus-visibleattendue, pour qu’elle soit reprise telle quelle sur les futurs projets.
Un bug qui n’apparaît que sur un seul navigateur cache souvent une règle déjà cassée partout, simplement compensée ailleurs par un comportement de repli qu’il ne faut jamais considérer comme acquis.
En résumé
Le focus invisible sous Safari n’est pas une bizarrerie propre à ce navigateur : c’est la conséquence directe d’un outline: none mal maîtrisé, que d’autres navigateurs masquaient par un comportement de secours. Remplacer ce retrait par un style personnalisé sur :focus-visible corrige le problème sur l’ensemble des navigateurs en une seule fois, sans sacrifier l’esthétique du site.
