Создайте доступную интерактивную кнопку

Сочетайте удобную цель, hover, заметный фокус, явный переход и уменьшенное движение.

Официальный источникW3C WCAG 2.2 — visible keyboard focusПроверено: 2026-08-26

ШАГ 1 · ИЗУЧИТЕ

Как это работает

Надёжный компонент не опирается на одно состояние. Минимальный размер помогает касанию, hover даёт отклик указателю, focus-visible поддерживает клавиатуру, а предпочтение движения может отключить переход.

Правильный пример

.action { min-height: 44px; transition: background-color 160ms ease; } .action:hover { background-color: #115e59; } .action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .action { transition: none; } }

Одна кнопка даёт обратную связь для касания, указателя и клавиатуры, не навязывая движение.

Частая ошибка

.action:hover { transform: scale(1.2); } .action:focus { outline: none; }

Сильное увеличение может дестабилизировать интерфейс, а удаление фокуса мешает пользователям клавиатуры.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Добавьте min-height 44px, переход фона 160ms ease, hover #115e59, фокус 3px с отступом 3px и transition: none для уменьшенного движения.

index.htmlCSS

Безопасный результатизолировано

Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы

ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено

Кнопка имеет минимальную высоту 44px.
Переход применяется только к фону.
Hover использует #115e59.
Фокус имеет нужный outline.
Фокус имеет offset 3px.
Уменьшенное движение отключает переход.
Целевой элемент присутствует на странице.

Объясните логику решения

Каждое правило отвечает за своё: размер, отклик указателя, фокус клавиатуры или адаптацию движения.

Как это работает

Ваше задание

Напишите и посмотрите результат

Что должно пройти