Перейти к содержимому

Модуль «Механика» · WCAG 2.4.11 · Уровень AAA

Видимый фокус

Обеспечивает четкое, всегда видимое кольцо фокусировки на всех фокусируемых элементах — с контрастностью класса AAA.

Что это делает

Функция в одном предложении — и в трёх предложениях

Многие современные CSS-сбросы удаляют фокус браузера по умолчанию ("outline: none"). Если тема не предоставляет замену, пользователи клавиатуры не смогут увидеть свое текущее положение на странице — Критерий нокаута в ходе аудитов WCAG.

Модуль применяет к всем интерактивным элементам, независимо от темы оформления, контурную обводку толщиной 3 пикселя с контрастом AAA (не менее 7:1 по отношению к фону).

Вот как это реализовано в плагине.

Технические меры

  • контур 3 пикселя + смещение 2 пикселя — визуально понятный, не нарушающий верстку.
  • Расчет контрастности для каждого элемента: автоматически выбирает темный контур на светлом фоне, светлый контур на темном фоне.
  • `:focus-visible` вместо `:focus` — При щелчках мыши кольцо не отображается (современное поведение), фокус клавиатуры отображается всегда.
  • Пользовательские элементы: `tabindex="0"` на элементах div/span также отображает кольцо.
  • Регулировка радиуса границыКонтур повторяет округлую форму (без рамок с острыми краями вокруг круглых пуговиц).
В административной панели плагина

Эти настройки можно найти на вкладке "Модуль".

  • Толщина кольца (1–5 пикселей, по умолчанию 3)
  • Цвет кольца: Авто / фиксированный HEX-цвет / переменная CSS
  • Смещение (0–6 пикселей, по умолчанию 2)
  • Анимация при появлении: выключена / мягкая (учитывает параметр `prefers-reduced-motion`)
  • Исключения в селекторах (CSS): элементы без кольца переопределения.

Путь в административной панели: WP-Admin → Доступность → Модули → Видимый фокус

Когда вам понадобится этот модуль?

Вариант использования

Обязательный модуль для каждой страницы. WCAG 2.4.11 соответствует уровню AAA, но даже WCAG 2.4.7 (видимый фокус) на уровне AA требует его наличия.

Это особенно критично для тем, использующих агрессивные сбросы CSS или кнопки, созданные с помощью `

`.

Связанные модули

Это тематически взаимосвязано.

  • Навигация с помощью клавиатуры

    WCAG 2.1.1

    Убедитесь, что все интерактивные элементы доступны без мыши — клавиши Tab, Enter, стрелки, Esc.

  • Менеджер Tabindex

    WCAG 2.4.3

    Исправляет порядок перехода по клавише Tab, исключает положительные значения `tabindex` и исправляет некорректные переходы.

  • Пропустить ссылки и достопримечательности

    WCAG 2.4.1

    Устанавливает роли семантических ориентиров и видимые ссылки для пропуска страниц для пользователей клавиатуры и программ чтения с экрана.

Активировать модуль для вашего сайта?

В ходе первоначальной 15-минутной консультации мы выясним, подходит ли данный модуль для вашей темы и типа контента, а также как будет выглядеть его настройка.

Первичная консультация (15 минут)
Просмотреть все модули