brak wyróżnionego CTA

Brak wyróżnionego CTA to usterka wizualna, w której wezwanie do działania nie wyróżnia się na tle pozostałej treści.

Jak rozpoznać brak wyróżnionego wezwania do działania

Brak wyróżnionego CTA (Call to Action) oznacza sytuację, w której element zachęcający do wykonania konkretnej czynności nie odróżnia się dostatecznie od pozostałej zawartości interfejsu. Może to być przycisk „Zamów”, „Pobierz”, „Wyślij formularz” albo odsyłacz prowadzący do następnego etapu. Problem nie polega na braku samego tekstu, lecz na tym, że użytkownik nie otrzymuje wyraźnego sygnału, który element jest interaktywny i jaki skutek nastąpi po jego wybraniu.

Usterka może wystąpić, gdy CTA ma taki sam kolor, rozmiar i krój pisma jak zwykły tekst, znajduje się wśród wielu równorzędnych odsyłaczy albo nie ma widocznej granicy w postaci tła, obramowania lub odpowiedniego odstępu. Podobny efekt powstaje wtedy, gdy przycisk jest umieszczony poza logicznym obszarem treści, ma zbyt mały rozmiar albo jego opis jest niejednoznaczny. W kodzie HTML element może być prawidłowo obecny, a mimo to jego prezentacja wizualna i hierarchia informacji mogą utrudniać wykonanie zadania.

Kontrast, hierarchia i stany elementu interaktywnego

Wyróżnienie CTA powinno wynikać z kilku cech działających jednocześnie. Istotny jest kontrast między tekstem a tłem oraz między elementem a sąsiadującą treścią. Dla zwykłego tekstu wytyczne WCAG 2.2 wskazują minimalny współczynnik kontrastu 4,5:1, a dla większego tekstu 3:1. Wymaganie dotyczące kontrastu odnosi się również do czytelności napisu na przycisku. Sam kolor nie powinien być jedynym sposobem przekazania informacji, ponieważ użytkownik może nie odróżniać części barw.

Przycisk powinien mieć jasno określony stan podstawowy, stan po wskazaniu kursorem, stan fokusu klawiatury oraz stan nieaktywny, jeżeli aplikacja go przewiduje. Widoczny fokus jest szczególnie ważny dla nawigacji klawiaturą. Usunięcie właściwości outline bez zastąpienia jej innym wyraźnym oznaczeniem może sprawić, że użytkownik nie będzie wiedział, który element aktualnie wybiera. W przypadku linków i przycisków warto zachować spójność: elementy o podobnym działaniu powinny mieć podobną prezentację, natomiast czynności o różnym ryzyku lub skutku mogą wymagać odmiennego oznaczenia i treści komunikatu.

Wpływ układu strony i kodu HTML na widoczność CTA

Widoczność wezwania do działania zależy także od kompozycji strony. Jeżeli przycisk znajduje się pośród długiego akapitu, kilku banerów, reklam lub wielu elementów o jednakowej wadze wizualnej, jego znaczenie może zostać osłabione. Pomagają odpowiednie odstępy, logiczne grupowanie, ograniczenie liczby konkurujących akcji oraz umieszczenie głównego CTA w miejscu wynikającym z kolejności zadania. Na ekranie laptopa i monitora trzeba uwzględnić szerokość treści, a na urządzeniach o mniejszym ekranie także możliwość zawijania tekstu i zmianę układu przycisku.

W kodzie należy sprawdzić, czy element jest semantycznie odpowiedni do wykonywanej czynności. Przycisk HTML <button> służy zwykle do wykonania akcji w obrębie strony lub formularza, natomiast <a> powinien prowadzić do określonego adresu. Zastępowanie tych elementów zwykłym <div> z obsługą kliknięcia może pogorszyć dostępność i nawigację klawiaturą. Warto również zweryfikować kolejność fokusu, tekst alternatywny ikon użytych w przycisku, działanie po powiększeniu strony oraz zachowanie po błędzie formularza. CTA nie powinno być uzależnione wyłącznie od skryptu, który nie działa po wyłączeniu JavaScriptu, jeżeli dana funkcja może działać również jako standardowy odsyłacz lub formularz.

Praktyczna weryfikacja i poprawa komunikatu działania

Sprawdzanie należy rozpocząć od określenia najważniejszej czynności na danym ekranie. Następnie trzeba porównać CTA z elementami drugorzędnymi: kolor, kontrast, wielkość, położenie, odstępy i długość tekstu powinny tworzyć czytelną hierarchię. Warto przejść stronę bez myszy, używając klawisza Tab, i ocenić, czy fokus jest widoczny oraz czy kolejność przechodzenia odpowiada kolejności czytania. Przydatne jest także powiększenie strony, sprawdzenie widoku w różnych szerokościach okna i test kontrastu wykonany dla rzeczywistych wartości kolorów zapisanych w CSS.

Poprawa może polegać na zmianie tekstu przycisku na konkretny, dodaniu tła i odstępu, zwiększeniu obszaru aktywnego, przywróceniu widocznego fokusu albo uporządkowaniu sąsiednich elementów. Nie należy jednak wyróżniać każdego odsyłacza w ten sam sposób, ponieważ wtedy hierarchia ponownie zanika. Warszawskie Pogotowie Komputerowe wykonuje profesjonalną naprawę laptopów i komputerów PC, w tym diagnostykę problemów z oprogramowaniem oraz prezentacją interfejsu, gdy brak wyróżnionego CTA utrudnia korzystanie ze strony lub aplikacji.