Клікабельні картки в 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.