CSS и вёрстка

Кольцо фокуса

Видимое кольцо для :focus-visible с проверкой по WCAG 2.2: контраст к фону страницы и к самому элементу, толщина и зазор. Внизу — настоящие кнопка, ссылка и поле, по которым можно пройтись клавишей Tab.

Настройки

Чем рисуем

Обычный способ. Не влияет на раскладку и повторяет форму border-radius.

Толщина: 3 px Зазор до элемента: 2 px

Вид линии

Скругление кольца: 8 px

Кольцо Фон страницы Фон элемента

Проверка пройдена

Кольцо к фону страницы: 5.17:1 — требование выполненоСнаружи кольцо видно.
Кольцо к фону элемента: 1:1 — требование выполненоКонтраст к самому элементу меньше 3:1. Спасает отступ от 2 px: тогда кольцо граничит с фоном страницы, а не с кнопкой.
Толщина кольца: 3 px — требование выполненоНе меньше 2 px — как требует WCAG 2.2.
Отступ от элемента: 2 px — требование выполненоЗазор отделяет кольцо от границы элемента.

Кольцо соседствует сразу с двумя цветами — с фоном страницы снаружи и с фоном элемента внутри. Провал любой из двух проверок делает его невидимым со своей стороны.

Попробуйте клавишей Tab

Ссылка

Кольцо появляется только при переходе с клавиатуры: :focus-visible нарочно молчит на клик мышью. Проверить эффект можно, нажав Tab.

CSS

:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 8px;
}

:focus:not(:focus-visible) {
  outline: none;
}

Второе правило нужно, чтобы клик мышью не зажигал кольцо, но обычный :focus при этом не остался вовсе без стиля.