Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

:focus-visible — обводка только для клавиатуры, не для каждого клика

Как убрать «синие рамки» для мыши и сохранить WCAG 2.4.7 для Tab-навигации.

Изображение статьи: :focus-visible — обводка только для клавиатуры, не для каждого клика

Псевдокласс :focus-visible срабатывает, когда браузер считает, что фокус нужно показать — обычно при навигации с клавиатуры, а не при клике мышью.

Паттерн outline: none на :focus без :focus-visible — частая причина провалов аудита доступности.

- [:focus-visible — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) — Синтаксис и примеры.

- [Focus — WCAG Understanding](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html) — Критерий 2.4.7 Focus Visible.

---

## Дизайн-система

Задайте токен --focus-ring с offset 2px и контрастом ≥ 3:1 к фону кнопки.

Не полагайтесь только на смену background — при серых состояниях кольцо заметнее.

#CSS#доступность#WCAG

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.