Доработать стили `:focus` и `:visited`

[Tatiana Fokina]

В чём проблема

Я заглянула в будущее и поизучала вопрос про новый критерий из WCAG 2.2 про минимальный внешний вид фокуса. Кажется, фокус у поля поиска его не проходит. Надо посмотреть на другие элементы, у которых кастомные стили фокуса, может я что-то пропустила.

Исключения из этого критерия все элементы с браузерными стилями фокуса. Но можно подумать в сторону кастомных и близких к браузерным стилям в Chrome, например. Там придётся только слегка их подтянуть под новые требования, увеличив ширину рамки.

Вот какие в критерии, собственно, требования (касаются только всяких кнопок, ссылок, полей и похожих элементов).

Требования к внешнему виду фокуса

В критерии выделяют несколько разновидностей фокуса, сконцентрируюсь только на фокусе в виде рамки вокруг элемента.

• Минимум 1 пиксель.
• Сплошное начертание (не пунктирная линия).
• Обводит элемент полностью.
• Требования по контрастности:
  • 3:1 по отношению к цвету элемента, когда он неактивен (не в фокусе);
  • 3:1 по отношению к фону элемента;
  • 3:1 по отношению к фону страницы.

Если рамка не вокруг элемента, а внутри или между ней и элементом нет гэпа, то она должна быть шириной минимум 2 пикселя.

Если элемент круглый, то минимальная ширина рамки 1 пиксель.

Если это горизонтальная черта внутри элемента, то ширина горизонтальной черты тоже минимум 2 пикселя, а вертикальной — минимум 4.

В критерии есть ещё варианты с тенями и изменение фона элементов, в это пока не вникала глубоко. Но они просто должны быть заметными и сильно отличаться от первоначального состояния элемента.

Нарисовала немного примеров с иллюстрацией всего сказанного выше.

Что можно почитать про это

• Understanding Success Criterion 2.4.11: Focus Appearance (Minimum), WCAG 2.2.
• A guide to designing accessible, WCAG-compliant focus indicators, Сара Суайдан.
• Focus appearance explained, Мартин Андерхилл.