Карточка с :focus-within: подсветка без лишней остановки Tab
Псевдокласс focus-within позволяет выделить контейнер, когда фокус находится на нём или внутри него. Это помогает заметить активную карточку, не превращая весь блок в дополнительную кнопку.
Назначение
Псевдокласс focus-within позволяет выделить контейнер, когда фокус находится на нём или внутри него. Это помогает заметить активную карточку, не превращая весь блок в дополнительную кнопку.
Как это работает
У контейнера остаётся обычная семантика, а переход выполняет настоящая ссылка. Когда ссылка получает фокус, рамка карточки меняется. Собственный видимый outline ссылки сохраняется и не заменяется одной подсветкой внешнего блока.
Пример
<style>.focus-card{padding:18px;border:2px solid #a6b3ab;border-radius:8px}.focus-card:focus-within{border-color:#11694e;background:#edf4ef}.focus-card a:focus-visible{outline:3px solid #9c5b00;outline-offset:3px}</style>
<article class="focus-card"><h2>Проверка макета</h2><p>Один понятный переход вместо кликабельной рамки.</p><a href="#next-step">К следующему шагу</a></article>
<h2 id="next-step">Следующий шаг</h2>Что должно получиться
При переходе Tab на ссылку подсвечиваются и сама ссылка, и её карточка. Контейнер не добавляет отдельную остановку в клавиатурный маршрут, поскольку ему не назначен tabindex.
Граница применения и частая ошибка
Не убирайте outline у интерактивного элемента ради декоративной рамки. Если внутри карточки несколько действий, человек должен понимать, какое из них сейчас активно. Hover не заменяет состояния клавиатурного фокуса.
Самостоятельная проверка
Добавьте вторую ссылку с отдельной целью и пройдите обе клавиатурой. Временно отключите стили: порядок текста и назначение ссылок должны оставаться понятными. В песочнице внешние переходы ограничены.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.