Кликабельные карточки в Elementor без overlay-ссылок

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

Overlay-ссылка — это элемент a, растянутый на всю площадь карточки с помощью position: absolute. Визуально решение работает, но с HTML-структурой и взаимодействием могут возникнуть проблемы.

Если внутри такой ссылки размещены еще одна кнопка, фильтр или ссылка на другой материал, образуется вложенная интерактивная структура. Вложенные элементы a некорректны с точки зрения правил HTML, а пользователю клавиатуры и скринридера сложнее понять, что именно будет активировано.

Кроме того, прозрачный слой может перехватывать события наведения и клика. Из-за этого перестают нормально работать кнопки, ссылки на категории, эффекты изображения или интерактивные элементы внутри карточки.

• не создавайте одну большую ссылку вокруг карточки, если внутри есть другие ссылки;
• не используйте пустую кнопку только для имитации кликабельности;
• не скрывайте единственную важную ссылку от клавиатуры с помощью CSS.

Базовая структура карточки в Elementor

Создайте карточку как отдельный контейнер Elementor. Для него можно указать HTML Tag article в настройках Layout → HTML Tag. Если в вашей версии интерфейс называется иначе, выберите семантический тег article среди доступных HTML-элементов.

Добавьте контейнеру CSS-класс card. Внутри разместите изображение, заголовок, краткое описание и кнопку или ссылку. Основная ссылка должна быть настоящей и видимой для пользователя: например, заголовок может вести на страницу материала, а кнопка — иметь такой же или другой понятный целевой URL.

Для заголовка карточки используйте соответствующий уровень h2 или h3 в зависимости от структуры страницы. Добавляйте ссылку именно к тексту заголовка через настройку Link виджета Heading, а не с помощью наложения отдельного слоя.

• контейнер карточки: HTML Tag — article;
• класс контейнера: card;
• заголовок: h2 или h3 со ссылкой;
• дополнительная кнопка: обычный виджет Button с собственной ссылкой;
• декоративное изображение: без отдельной ссылки, если оно дублирует заголовок.

Как назвать основную ссылку

Чтобы позднее было проще стилизовать или обрабатывать основную ссылку скриптом, добавьте виджету заголовка отдельный класс, например card__link. Класс можно назначить обертке виджета, а не самому тегу a — это зависит от структуры, которую формирует Elementor.

Если в карточке нет необходимости в JavaScript, достаточно обычной ссылки в заголовке. Пользователи увидят, какой элемент является активным, а поисковые системы получат понятный HTML-элемент a.

Как сделать карточку визуально кликабельной с помощью CSS

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

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

• сохраняйте достаточный контраст текста и состояния фокуса;
• не используйте только изменение цвета как единственный признак активности;
• проверяйте hover и focus отдельно — их поведение не всегда должно быть одинаковым.

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card__link a,
.card__link {
  color: inherit;
  text-decoration: none;
}

.card__link a:hover,
.card__link a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.card__link a:focus-visible,
.card a:focus-visible,
.card button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Как передать клик со свободной области карточки на заголовок

Если бизнес-требование заключается в том, чтобы клик по пустой части карточки открывал материал, можно использовать небольшой JavaScript. Скрипт не создает overlay и не изменяет HTML-структуру: он лишь активирует основную ссылку, когда пользователь нажимает на область карточки, которая не является другой интерактивной кнопкой или ссылкой.

Добавьте класс card__link к виджету или обертке, содержащей основную ссылку. Код можно разместить в разрешенном для вашего сайта месте для пользовательского JavaScript или через инструмент вставки кода. Конкретный путь в панели Elementor может отличаться в зависимости от редактора, темы и настроек WordPress.

• скрипт не должен перехватывать клик по внутреннему a, button, input или select;
• у каждой карточки должна быть одна четко определенная основная ссылка;
• не добавляйте role="link" и tabindex="0" контейнеру без отдельной проверки доступности — это может создать дублируемую остановку фокуса.

document.querySelectorAll('.card').forEach(function (card) {
  const primaryLink = card.querySelector('.card__link a, a.card__link');

  if (!primaryLink) return;

  card.addEventListener('click', function (event) {
    const target = event.target;

    if (!(target instanceof Element)) return;
    if (target.closest('a, button, input, textarea, select, label')) return;

    primaryLink.click();
  });
});

Что происходит с клавиатурой

В этом варианте пользователь клавиатуры переходит непосредственно к настоящей ссылке в заголовке. Она получает фокус и открывается клавишей Enter, поэтому отдельно делать весь article фокусируемым не нужно.

Это намеренное ограничение: мышь или сенсорный экран могут активировать свободную область карточки, а навигация с клавиатуры работает через стандартный фокусируемый элемент. Так структура остается понятной для скринридеров.

Карточки с несколькими ссылками и кнопками

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

Оставьте JavaScript только для свободной области карточки. Код из предыдущего примера игнорирует клики по ссылкам и кнопкам, поэтому каждый внутренний элемент сохраняет собственное действие. При этом подписи должны быть конкретными: «Читать статью», «Профиль автора» или «Посмотреть все товары» понятнее, чем универсальное «Подробнее».

• не дублируйте одну и ту же ссылку на изображении, в заголовке и на кнопке без необходимости;
• если ссылки дублируются, проверьте порядок перехода клавишей Tab;
• для действия внутри карточки используйте button, а для перехода на URL — a;
• не открывайте все ссылки автоматически в новой вкладке без понятной причины.

Доступность, SEO и проверка перед публикацией

Семантический article помогает логично группировать содержимое, но сам по себе не превращает карточку в ссылку. Для поисковых систем и вспомогательных технологий важны настоящие заголовки, описательный текст и корректный элемент a с адресом страницы.

Проверьте карточку без мыши: нажимайте Tab и убедитесь, что фокус виден, порядок перехода логичен, а Enter открывает нужную страницу. Затем протестируйте клик по заголовку, кнопке, изображению и свободной области. Если внутри есть форма или другой виджет, проверьте, не перехватывает ли скрипт его событие.

Также полезно просмотреть страницу в инструментах разработчика браузера: у каждой карточки должен быть один article, ссылки не должны вкладываться друг в друга, а в DOM не должен появляться невидимый элемент, перекрывающий весь блок.

• проверьте видимый focus-visible;
• проверьте контраст текста, кнопок и состояния hover;
• проверьте адаптивность на сенсорном экране;
• проверьте, что ссылки ведут на правильные URL;
• протестируйте страницу со скринридером, если карточки критически важны для навигации.

Типичные ошибки в Elementor

Распространенная ошибка — сделать контейнер кликабельным с помощью декоративной кнопки, а затем растянуть ее на весь блок. Такая кнопка может перекрыть все элементы, даже если она прозрачная. Другая проблема — удалить outline в состоянии focus, из-за чего пользователь клавиатуры теряет ориентир.

Также не стоит назначать карточке role="button", если она на самом деле ведет на другую страницу. Для навигации используется ссылка a, а для действия без перехода — button. Неправильная ARIA-роль не исправляет некорректную HTML-структуру.

Если после добавления скрипта карточка открывает страницу даже при нажатии на внутреннюю кнопку, проверьте селектор target.closest и добавьте в список все интерактивные элементы, которые используются в вашем компоненте.

• не полагайтесь на JavaScript как на единственный способ перейти к материалу;
• не скрывайте основную ссылку за пределами видимой области;
• не используйте одинаковый класс card для элементов с разной логикой;
• после изменений очистите кеш и проверьте опубликованную страницу, а не только редактор Elementor.