focus-visible: видим фокус при работа с клавиатура

Полезно е да знаеш

:focus-visible съвпада с фокусиран елемент, когато браузърът прецени, че е необходимо видимо обозначение на фокуса. Това помага например при навигация с клавиатура. Не е просто друго име за :focus: двата селектора изразяват различни условия. [1]

Начален стил за бутон е button:focus-visible { outline: 3px solid #075985; outline-offset: 3px; }. Цветът и дебелината са примерни; провери ги върху реалните фонове на страницата.

Премахването на outline без заместител може да остави човека без ориентир кой контрол ще се задейства. Обходи страницата с Tab и Shift+Tab, включително менюта и диалози. Ако компонентът получава фокус, но няма ясно видимо състояние, проблемът не е решен само с добавен селектор. Важни са също контрастът, изрязването от контейнер и разположението на индикатора.