Кратко

  • Проект Selectors Level 4 от февраля 2018 года различал сам фокус, которому соответствует :focus, и визуальное указание на него, которое браузер считает нужным показать через :focus-visible.
  • Следующие редакции описали возможные ориентиры: клавиатуру, поля ввода, желание пользователя всегда видеть фокус и перенос фокуса скриптом. Браузер знает путь, сайт рисует знак.

Дизайнер нажал кнопку мышью и увидел вокруг неё рамку, которой не было в макете. Одно правило CSS — и рамка исчезла. Проверка мышью прошла отлично. Следующий посетитель нажал Tab. Фокус попал на кнопку, но страница решила сохранить это в тайне. Нажимать Enter теперь приходится как кнопку лифта в полной темноте: куда поедешь, узнаешь позже. Рамку выгнали за то, что она слишком заметна. В этом и заключалась её работа.

Проект W3C от 2 февраля 2018 года разделил два состояния. :focus обозначает элемент, принимающий ввод. :focus-visible действует, когда браузер полагает, что этот фокус стоит сделать видимым. В тексте рядом стоят поле для текста и кнопка. В поле попадут следующие набранные буквы, поэтому его положение важно. До кнопки, достигнутой клавиатурой, читатель добрался без указателя мыши; ему тоже нужна метка. После прямого клика указатель уже показал цель. Кнопка прежняя, маршрут к ней другой.

Знание маршрута есть у браузера: он видел способ ввода и настройки читателя. У сайта есть другая власть — выбрать толщину, цвет и контраст метки. Правило, снимающее outline со всего :focus, выбрасывает первое знание прежде, чем человек им воспользуется. Стиль для :focus-visible превращает его в понятный знак. Рамку можно переодеть в цвета сайта; отправлять её в бессрочный отпуск незачем.

Проект от 21 ноября 2018 года предложил пример без ложной скромности: толстый жёлтый контур для всех элементов с :focus-visible, а для ссылок ещё и жёлтый фон. Это приглашение проектировать свою заметную подсказку, а не мириться с произвольным видом рамки по умолчанию. Среди множества ссылок и кнопок текущий адрес следующего нажатия должен находиться быстро.

В том же документе перечислены ориентиры для браузера. Пользователь может попросить постоянно показывать фокус. Текстовое поле принимает ввод и нуждается в указателе. Клавиатура или другое устройство без указателя требует более явного сообщения о местоположении; клик мышью даёт собственную подсказку. Это рекомендации для начала, позволяющие учитывать систему и настройки. Страница получает итог решения через селектор.

Самый любопытный переход делает программа. Читатель открыл панель клавиатурой, а скрипт поставил фокус на её первую кнопку. Ноябрьский проект предлагает сохранить видимую метку, если она была на предыдущем элементе. Оставить её у входа означало бы потерять читателя ровно в новой комнате. Для пути, начатого мышью, описана обратная преемственность. Браузер помнит путешествие, а не рассматривает каждый новый элемент как незнакомца.

Проект от 7 мая 2022 года изложил принцип яснее. :focus всегда соответствует элементу с фокусом; :focus-visible — тем моментам, когда браузер решает его обозначить. Сайт меняет внешний вид указателя, не переписывая расписание его появления. Документ советует браузерам использовать :focus-visible и для стандартного оформления фокуса. Тогда собственный стиль сайта и встроенный знак ориентируются на один и тот же выбор момента.

Проект от 11 ноября 2022 года сохранил эту схему. История публикаций W3C расставляет редакции по датам. Маленький селектор решает вопрос, который всплывает на каждой большой странице: человек уже перешёл к следующему элементу, а его глаза ещё ищут, куда. Клик может оставаться спокойным. Клавиатурный переход получает светящуюся вывеску.

Рамка вернулась на работу. Теперь её заметность считают квалификацией, а не дисциплинарным нарушением.