Edit 2021: Sie können dies jetzt verwenden: https://github.com/WICG/focus-visible
Das Entfernen aller Fokus-Stile ist schlecht für die Barrierefreiheit und Tastaturbenutzer im Allgemeinen. Aber Umrisse sind hässlich und die Bereitstellung eines benutzerdefinierten fokussierten Stils für jedes einzelne interaktive Element kann eine echte Qual sein.
Der beste Kompromiss, den ich gefunden habe, besteht darin, die Gliederungsstile nur dann anzuzeigen, wenn wir feststellen, dass der Benutzer die Tastatur zur Navigation verwendet. Wenn der Benutzer TAB drückt, zeigen wir die Umrisse an, und wenn er die Maus benutzt, blenden wir sie aus.
Das hindert Sie nicht daran, für einige Elemente benutzerdefinierte Fokusstile zu schreiben, aber es bietet zumindest einen guten Standard.
So mache ich es:
// 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/>
