Видимые индикаторы фокуса: что требуют AODA Онтарио и WCAG, и одна строка CSS, которая их ломает (2026)

Большинство барьеров доступности строят случайно. Этот обычно строят нарочно. Разработчик смотрит на светящийся контур, который браузер рисует вокруг кнопки при переходе на неё клавишей Tab, решает, что он не вписывается в дизайн, пишет одну строку CSS, outline: none, и идёт дальше, ничего не вернув взамен. Автору страница кажется чище, потому что он пользуется мышью и контура всё равно никогда не видит. Но для клиента, который перемещается с клавиатуры, для пользователя экранной лупы, для человека с тремором, который не может пользоваться тачпадом, этот контур был единственным на экране, что говорило, где он находится. Удалите его, и они двигаются вслепую, нажимая Enter и надеясь. Барьер невидим именно тому человеку, который скорее всего мог бы его заметить, и это одно из самых частых нарушений, которые мы находим на сайтах Онтарио.

Ключевые факты

• Критерий успеха WCAG (Web Content Accessibility Guidelines) 2.4.7 Видимый фокус - уровень AA, входит в стандарт с WCAG 2.0. Для Онтарио это важно: он находится внутри обязательного юридического минимума, а не выше него (W3C).
• WCAG 2.2 добавила ещё два правила о фокусе: 2.4.11 Фокус не закрыт (минимум) уровня AA (новое в 2.2) и 2.4.13 Заметность фокуса уровня AAA (новое в 2.2), которое задаёт минимальный размер и контраст самого индикатора (W3C).
• WCAG 2.2 ввела 9 новых критериев успеха по сравнению с WCAG 2.1, и 6 из 9 - уровней A или AA (W3C).
• Раздел 14 IASR Онтарио (Регламент об интегрированных стандартах доступности, O. Reg. 191/11) требует от организаций с 50 и более сотрудниками соответствия WCAG 2.0 уровня AA на публичных сайтах (ontario.ca).
• Следующий ACR (отчёт о соответствии требованиям доступности) для организаций с 20 и более сотрудниками нужно подать до 31 декабря 2026 года (ontario.ca).

Что WCAG на самом деле требует для фокуса клавиатуры?

Простыми словами 2.4.7 Видимый фокус звучит так: когда клиент перемещается по странице с клавиатуры, элемент, на котором он оказался, должен показывать видимую отметку фокуса. Кнопка, ссылка, поле формы, пункт меню, когда они активны, должны заметно отличаться от соседних. WCAG 2.0 не диктует точный стиль, только то, что фокус виден. Это близнец прохода с клавиатуры: управляемость с клавиатуры доводит вас до каждого элемента, а видимый индикатор фокуса говорит, на каком вы оказались. Одно без другого - половина двери.

WCAG 2.2 ужесточила окружающие правила. 2.4.11 Фокус не закрыт (минимум) (уровень AA) говорит, что когда элемент получает фокус, хотя бы часть его должна оставаться видимой и не быть полностью скрытой за липкой шапкой, баннером cookie или плавающим пузырём чата, - реальная проблема современных сайтов, где закреплённая панель может лежать прямо поверх поля, на которое вы только что перешли. 2.4.13 Заметность фокуса (уровень AAA) идёт дальше и определяет, насколько большим и контрастным должен быть индикатор, поэтому кольцо фокуса, которое формально есть, но выглядит бледной серой линией в один пиксель, всё равно нарушает дух правила.

Почему одна строка CSS это ломает и распространяется ли на это AODA?

Вот честная юридическая картина, и она строже, чем для некоторых новых критериев. AODA (Accessibility for Ontarians with Disabilities Act) Онтарио называет обязательным стандартом WCAG 2.0 уровня AA. Видимый фокус - критерий WCAG 2.0 уровня AA. Так что, в отличие от доступной аутентификации, которая появилась в WCAG 2.2 и находится выше юридического минимума, отсутствующий индикатор фокуса - нарушение именно той версии WCAG, на которую указывает IASR Онтарио. Это не пробел лучшей практики, к которой стоит стремиться; это внутри черты - то же различие, что проведено в статье WCAG 2.0 или 2.2 в Онтарио.

Где это ломается? Почти всегда в одном из этих мест:

• Глобальная таблица стилей с outline: none или outline: 0 для ссылок, кнопок или полей без возвращённого стиля :focus или :focus-visible взамен.
• Нестандартный компонент (выпадающий список, модальное окно, ползунок), собранный на JavaScript, который вообще не даёт своим интерактивным частям стиля фокуса.
• Сброс стилей в дизайн-системе, который убирает стандарт браузера по всему сайту, так что кольцо пропадает сразу на всех страницах.
• Кольцо фокуса, которое есть, но скрыто за липкой шапкой или оверлеем, - ровно тот случай, для которого написан 2.4.11.

Ничего из этого не исправит прикрученный виджет, потому что оверлей не может переписать ваш CSS: показывают ли ваши кнопки фокус, решается в вашей собственной таблице стилей, а не скриптом поверх. Исправление - обратное поломке: верните видимый стиль :focus-visible с достаточным размером и цветовым контрастом, чтобы его действительно было видно.

Как проверить индикаторы фокуса и чем рискуете, если их нет?

Суть можно проверить примерно за минуту, без инструментов:

1. Один раз нажмите в адресную строку, потом много раз нажимайте Tab, чтобы пройти страницу одной клавиатурой.
2. На каждой остановке задайте один вопрос: вижу ли я, где нахожусь? Чёткое кольцо, рамка или подсветка должны двигаться вместе с вами от элемента к элементу.
3. Следите, не исчезает ли отметка в нестандартных меню, модальных окнах или после открытия всплывающего окна и не закрывает ли её липкая шапка вверху экрана.
4. Проверьте, что индикатор достаточно заметен, а не бледная волосяная линия, которую слабовидящий клиент пропустит.

Ставки те же, что при любом барьере доступа. В Онтарио у AODA нет права частного иска, поэтому напрямую по нему никто не судится; действующий путь для частного лица - HRTO (Трибунал по правам человека Онтарио), который рассматривает жалобы по Кодексу прав человека Онтарио, и клиенту, который не может понять, какую кнопку сейчас нажмёт, отказывают в том равном доступе, о котором говорят такие жалобы. Если вы продаёте в США, невидимый фокус - обычное обвинение в исках по ADA (Americans with Disabilities Act) о сайтах. Долговечный ответ тот же, что нужен любому пробелу: задокументированное исправление, датированная запись того, что вы нашли и исправили, - и это должен отражать честный ACR к 31 декабря 2026 года. А поскольку машина может подтвердить, что outline: none существует, но не может оценить, может ли реальный пользователь клавиатуры следить за фокусом в ваших нестандартных компонентах, это ещё одна причина, почему сканирование - не аудит.

Узнайте, не находит ли проверка на вашем сайте отсутствующих состояний фокуса или других проблем доступности, - бесплатный отчёт Vayle, примерно 30 секунд: vayle.art. Он обнаруживает виджеты-оверлеи, показывает реальные нарушения WCAG и точно говорит, что юридически относится к вашей организации в Онтарио. Без обязательств.

Vayle работает удалённо и занимается инженерной доступностью сайтов для бизнеса Онтарио. Общая информация, а не юридическая консультация.