Приклад хорошого втілення маркера фокуса

Почніть натискати клавішу Tab і спостерігайте за кнопками.

Ви маєте побачити, що на кнопках з'являється кастомний маркер фокуса синього кольору. Він втілений за допомогою CSS-стилю:

button:focus {
    outline: 3px solid #4444FF;
    outline-offset: 3px;
}

Приклад, як маркер фокуса виглядав би за замовчанням, див. за посиланням.

Рекомендується кастомізувати маркер фокуса для всіх інтерактивних елементів, які можуть отримувати фокус (включаючи ваші власні, якщо ви такі розробили). Отже, відповідний CSS може виглядати так:

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
.custom_focusable:focus {
    outline: 3px solid #4444FF;
    outline-offset: 3px;
}

Також не забувайте, що коефіцієнт контрастності маркера щодо фону сторінки (або того контейнера, де розташований елемент, якому належить маркер) має складати не менше, ніж 3:1.