Nieklikalne przyciski CTA to usterka szablonu, w której odnośnik nie obejmuje całego widocznego przycisku.
Jak powstaje problem z nieklikalnym przyciskiem CTA
Nieklikalny przycisk CTA (Call to Action) jest zwykle skutkiem nieprawidłowej struktury HTML albo błędnego przypisania odnośnika. W poprawnym rozwiązaniu cały widoczny obszar przycisku powinien należeć do elementu interaktywnego, najczęściej znacznika <a> z atrybutem href albo elementu <button> obsługiwanego przez formularz lub skrypt JavaScript. Jeżeli tekst przycisku znajduje się w odnośniku, ale tło, obramowanie i padding są zastosowane do nadrzędnego elementu <div>, użytkownik może odnieść wrażenie, że klika przycisk, podczas gdy aktywny jest tylko niewielki fragment tekstu.
Do usterki prowadzi także zamknięcie znacznika <a> przed końcem elementu wizualnego, pusty lub błędny atrybut href, nakładanie się elementów oraz ustawienie CSS pointer-events: none. W przypadku przycisku uruchamianego przez JavaScript problem może wynikać z braku właściwego nasłuchiwania zdarzenia click, błędu w skrypcie albo zatrzymania propagacji zdarzenia przez inny element. Sam wygląd kontrolki nie potwierdza więc jej działania, ponieważ kolor, zaokrąglenie narożników i cień są niezależne od mechanizmu obsługi kliknięcia.
Struktura HTML a rzeczywisty obszar aktywnego kliknięcia
Najbardziej jednoznaczną konstrukcją dla przejścia do innej strony jest odnośnik, w którym cały przycisk znajduje się wewnątrz znacznika <a>. Przykładowo element może zawierać tekst, ikonę oraz dodatkowe elementy opisowe, a style można przypisać bezpośrednio do odnośnika ustawionego jako display: inline-block lub display: block. Wtedy padding, tło i obszar aktywny należą do tego samego elementu. Umieszczanie odnośnika wewnątrz elementu <button> jest niepoprawną strukturą dla typowego linku i może powodować niejednolite zachowanie przeglądarek.
Element <button> powinien służyć przede wszystkim do wykonania akcji w bieżącej stronie, na przykład wysłania formularza, otwarcia panelu lub uruchomienia skryptu. W formularzu warto określić atrybut type, ponieważ domyślna wartość submit może spowodować wysłanie formularza przy zwykłym kliknięciu. Dla przycisku, który nie ma wysyłać formularza, stosuje się type="button". Jeżeli CTA prowadzi do adresu URL, właściwszym elementem semantycznym jest <a href="/...">, a nie przycisk stylizowany skryptem.
Warstwy CSS i JavaScript blokujące kliknięcie
Widoczny przycisk może być zasłonięty przez przezroczysty element pozycjonowany absolutnie lub stałe okno, na przykład warstwę menu, baner albo komponent zgody. O tym, który element otrzyma zdarzenie, decyduje między innymi kolejność warstw wynikająca z z-index, kontekst stosu oraz pozycjonowanie. Problem można zawęzić w narzędziach deweloperskich przeglądarki, wybierając inspektorem miejsce na środku przycisku i sprawdzając, jaki element zostaje wskazany. Należy również przeanalizować reguły pointer-events, position, overflow oraz wymiary elementów nadrzędnych.
W skryptach JavaScript częstą przyczyną jest podpięcie obsługi do tekstu lub ikony zamiast do całej kontrolki, błędny selektor CSS albo wykonanie kodu przed utworzeniem elementu w dokumencie. Warto sprawdzić konsolę pod kątem wyjątków JavaScript oraz zakładkę nasłuchiwania zdarzeń. Kod nie powinien blokować domyślnego działania linku przez preventDefault(), jeżeli nie zapewnia w zamian prawidłowego przejścia lub innej zamierzonej akcji. Po poprawce trzeba przetestować zarówno kliknięcie myszą, jak i aktywację klawiszem Enter lub Spacją, zależnie od użytego elementu HTML.
Naprawa CTA i kontrola działania na stronie
Naprawę należy rozpocząć od ustalenia, czy CTA jest linkiem, przyciskiem formularza, czy kontrolką sterowaną przez JavaScript. Następnie trzeba uporządkować zagnieżdżenie HTML, przenieść style obszaru wizualnego na element interaktywny, usunąć blokującą warstwę albo skorygować jej obsługę zdarzeń. Dla linku należy zweryfikować wartość href, adres docelowy, stan po kliknięciu oraz zachowanie przy otwarciu w tej samej karcie. Dla przycisku trzeba potwierdzić wykonanie przypisanej akcji, poprawny typ przycisku i brak błędów w formularzu lub skrypcie.
Po zmianach warto wykonać test w aktualnych przeglądarkach używanych na laptopach i komputerach PC, a także przy różnych szerokościach okna. Kontroli wymagają stany :hover, :focus i :disabled, ponieważ reguły CSS mogą nieumyślnie zmienić rozmiar lub położenie obszaru aktywnego. Należy też sprawdzić przycisk przy powiększeniu strony, na ekranie dotykowym oraz z użyciem klawiatury. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, a w ramach diagnostyki może również ustalić, czy problem z CTA wynika z przeglądarki, konfiguracji strony czy błędu jej kodu.
