Spotlight и CSS mask без ловушки для клавиатуры

Результат

Вы сделаете декоративный spotlight для hero-блока или карточки: мягкий градиент следует за указателем либо подсвечивает активную область. Его роль — оттенять фон, а не создавать единственный способ увидеть содержание. Маска, градиент и clip-path визуально интересны, но они не заменяют структуру документа, доступное имя кнопки и заметное состояние :focus-visible.

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

Шаги

1. Сначала создайте обычный контрастный блок с заголовком, текстом и кнопкой. На нём же должен быть понятный фокус клавиатуры.
2. Добавьте градиентный слой как псевдоэлемент с pointer-events: none; он не должен перехватывать мышь или касания.
3. Передавайте координаты курсора в CSS custom properties только внутри одного компонента. На touch-устройствах оставьте статичное положение.
4. Не маскируйте текст так, чтобы часть фразы становилась нечитаемой. Декоративная маска должна иметь запас по контрасту и отключаться при reduced motion.
5. Пройдите компонент Tab-клавишей, затем проверьте его без hover и с высоким масштабом страницы.

Применимый код

.hero::before {
  content: ""; pointer-events: none; position: absolute; inset: 0;
  background: radial-gradient(18rem circle at var(--x, 50%) var(--y, 50%), #ffffff1f, transparent 60%);
}
.hero :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

Критерий проверки

При навигации клавиатурой фокус остаётся заметен, содержимое читается без hover, а spotlight можно убрать без изменения сценария.

Источник

• Using media queries for accessibility — MDN