La suppression de tous les styles de focalisation est mauvaise pour l'accessibilité et les utilisateurs de clavier en général. Mais les contours sont moches et fournir un style de focalisation personnalisé pour chaque élément interactif peut s'avérer très compliqué.
Le meilleur compromis que j'ai trouvé est donc d'afficher les styles de contour uniquement lorsque nous détectons que l'utilisateur utilise le clavier pour naviguer. En gros, si l'utilisateur appuie sur TAB, nous affichons les contours et s'il utilise la souris, nous les cachons.
Cela ne vous empêche pas d'écrire des styles de mise au point personnalisés pour certains éléments, mais cela fournit au moins un bon défaut.
C'est comme ça que je fais :
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});
body:not(.keyboardUser) *:focus {
outline: none;
}
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>
