Przycisk na stronie nie jest obrazkiem przyklejonym do ekranu. Użytkownik powinien dostać sygnał, że element reaguje na jego działanie: gdy wskazuje go kursorem, przechodzi do niego klawiszem Tab albo właśnie go naciska. Jeśli przycisk przez cały czas wygląda identycznie, trudno stwierdzić, czy wszystko działa, czy strona po prostu udaje mebel.
W WordPressie 7.1 można ustawić osobne style dla stanów hover, focus i active w bloku Button. To przydatne nie tylko na stronie głównej. Te stany dotyczą również przycisków formularzy, menu czy sklepu internetowego. Poniżej wyjaśniam, czym się różnią, gdzie ich szukać i jak sprawdzić je bez grzebania w kodzie. Ważne: dobrze ustawione stany poprawiają czytelność interakcji, ale same w sobie nie są pełnym audytem dostępności.
Przycisk nie jest obrazkiem — powinien reagować na działanie
Wyobraź sobie przycisk „Kontakt”, „Wyślij formularz” albo „Dodaj do koszyka”. W spoczynku może wyglądać bardzo dobrze: odpowiedni kolor, sensowny rozmiar, czytelny tekst. Problem zaczyna się wtedy, gdy użytkownik próbuje z niego skorzystać, a wizualnie nic się nie zmienia. Najeżdża kursorem i nie wie, czy trafił w aktywny element. Przechodzi po stronie klawiszem Tab i nie widzi, gdzie aktualnie się znajduje. Naciska przycisk, ale brak jakiejkolwiek informacji zwrotnej sprawia, że zaczyna się zastanawiać, czy kliknąć drugi raz.
Stany interakcji porządkują te momenty. Nie są ozdobnikiem dorzuconym na koniec, kiedy projekt „już prawie gotowy”. Pomagają odczytać zachowanie strony. W praktyce oznacza to mniej zgadywania i mniejsze ryzyko, że użytkownik przegapi ważne działanie. Dotyczy to zarówno prostego formularza kontaktowego, jak i sklepu, w którym przycisk dodania produktu do koszyka powinien zachowywać się jasno.
Hover, focus i active — trzy stany, trzy różne sytuacje
Najprościej zapamiętać to tak: hover mówi „wskazujesz mnie”, focus — „jesteś teraz na mnie”, a active — „właśnie mnie aktywujesz”. Nazwy pochodzą ze standardowych pseudoklas CSS, ale żeby je zrozumieć, nie trzeba znać CSS. Wystarczy spojrzeć na trzy różne sytuacje użytkownika.
Jak rozpoznać każdy stan w praktyce
Hover pojawia się wtedy, gdy wskażesz przycisk kursorem albo innym urządzeniem wskazującym. Przykład: przesuwasz mysz nad „Kontakt”, a przycisk zmienia kolor, obramowanie lub cień. To szybki sygnał: „tu znajduje się element, z którym możesz coś zrobić”. Trzeba jednak pamiętać, że hover nie jest tym samym co fokus. Osoba korzystająca wyłącznie z klawiatury nie wskazuje elementu myszą.
Focus oznacza, że element aktualnie ma fokus. Na stronie najłatwiej zobaczyć to podczas przechodzenia klawiszem Tab. Jeśli fokus jest dobrze zaprojektowany, wiesz, czy jesteś na „Wyślij formularz”, „Dodaj do koszyka” czy kolejnym linku. W tym kontekście warto kojarzyć również focus-visible, czyli stan widocznego fokusu przydatny szczególnie podczas obsługi klawiaturą. Nie chodzi o techniczną nazwę dla samej nazwy, tylko o to, by użytkownik widział miejsce, w którym aktualnie działa.
Active trwa w chwili aktywowania lub naciskania elementu. To moment kliknięcia przycisku albo jego uruchamiania klawiszem zgodnie z funkcją elementu. Zmiana może być krótka, ale powinna potwierdzać, że działanie zostało podjęte. Każdy z tych stanów opisuje inną chwilę, dlatego automatyczne ustawienie identycznego efektu dla wszystkich trzech nie zawsze ma sens.
Co daje WordPress 7.1
WordPress 7.1 pozwala ustawiać dla bloku Button osobne style stanów hover, focus i active bezpośrednio w panelu stylów edytora. To oznacza, że przy natywnym bloku Button nie trzeba od razu dokładać wtyczki tylko po to, by przycisk miał różny wygląd podczas wskazywania, fokusowania i aktywacji.
W praktyce najpierw wybierasz konkretny przycisk, a następnie sprawdzasz dostępne ustawienia jego stanów w panelu stylów. Możesz nadać mu wygląd spoczynkowy, osobny efekt po wskazaniu kursorem, wyraźny fokus i zmianę podczas aktywowania. Edytor pozwala również podejrzeć, jak dany stan wygląda. To dobry moment, by sprawdzić, czy zmiana jest naprawdę zauważalna, a nie tylko symboliczna.
Ustawienia mogą dotyczyć pojedynczego przycisku albo wszystkich przycisków. Pierwsza opcja przydaje się, gdy chcesz dopracować konkretny element, na przykład główne „Wyślij zapytanie”. Druga pomaga zachować spójność, gdy przyciski w wielu miejscach mają reagować podobnie. Autorzy motywów mogą dodatkowo konfigurować pseudostany w pliku theme.json, ale dla właściciela strony najważniejsza jest praktyczna różnica: ustawienie dla natywnego bloku nie musi automatycznie zmienić każdego przycisku na całej stronie.
Pojedynczy przycisk czy ustawienia globalne?
Jeśli problem dotyczy jednego elementu, zacznij od ustawienia pojedynczego przycisku. Możesz wtedy sprawdzić, czy efekt pasuje do jego tła, tekstu i funkcji. Gdy chcesz utrzymać jeden sposób reagowania na stronie, sensowniejsze mogą być ustawienia szersze. Nie traktuj ich jednak jak magicznej miotły. Przycisk pochodzący z motywu, WooCommerce, formularza albo zewnętrznego buildera może mieć własne ustawienia i działać inaczej niż natywny blok Button.
Interfejs również może wyglądać inaczej zależnie od wersji WordPressa, motywu i sposobu budowy strony. Jeśli nie widzisz opisanych opcji, nie oznacza to od razu, że coś robisz źle. Najpierw ustal, z jakiego rodzaju przycisku korzystasz.
Dlaczego sam hover to za mało
Zmiana koloru po najechaniu jest przydatna, ale obejmuje tylko jedną sytuację: wskazywanie elementu urządzeniem wskazującym. Nie pomaga osobie, która porusza się po stronie klawiaturą. Taki użytkownik potrzebuje widocznego fokusu, czyli jasnej informacji, na którym elemencie znajduje się teraz uwaga i gdzie trafi następne działanie klawiatury.
Jest jeszcze drugi problem. Sam kolor może zmienić się zbyt delikatnie, zniknąć na określonym tle albo być trudny do zauważenia. Dlatego przycisk nie powinien komunikować stanu wyłącznie kolorem. Możesz rozważyć także obramowanie, podkreślenie, cień, zmianę kształtu lub inny wyraźny sygnał wizualny. Nie chodzi o to, by każdy przycisk nagle zaczął mrugać jak automat na dworcu. Chodzi o czytelną różnicę.
Focus nie może znikać tylko dlatego, że nie pasuje do projektu
Domyślny fokus bywa uznawany za mało estetyczny, więc ktoś usuwa go bez przygotowania zamiennika. To kiepski interes. Jeśli fokus znika, użytkownik klawiatury może nie wiedzieć, gdzie aktualnie się znajduje. Projekt może wyglądać czyściej, ale obsługa strony staje się mniej czytelna.
Fokus powinien być zauważalny na konkretnym tle i w konkretnym komponencie. Subtelna zmiana odcienia może na jednym przycisku wyglądać dobrze, a na innym praktycznie zniknąć. W wytycznych dotyczących widocznego fokusu pojawia się również kwestia jego zauważalności i kontrastu. To jednak nie jest jeden test, który załatwia całą dostępność przycisku. Kontrast tekstu, tła, obramowania i wskaźnika fokusu to odrębne sprawy.
Szybki test przycisków: mysz, klawiatura, telefon
Nie musisz zaczynać od kodu. Najpierw sprawdź przyciski tak, jak robi to zwykły użytkownik. Test wykonaj nie tylko na stronie głównej. Przejdź przez formularz, menu i elementy sklepu, bo właśnie tam często wychodzą różnice między przyciskami.
Checklista do przejścia w kilka minut
- Sprawdź hover. Najedź kursorem na przycisk „Kontakt”, „Wyślij” albo „Dodaj do koszyka”. Zobacz, czy zmiana jest widoczna i czy nie zależy wyłącznie od bardzo subtelnej różnicy koloru.
- Przejdź stronę klawiszem Tab. Nie używaj myszy. Obserwuj, czy fokus pojawia się na każdym przycisku i czy da się łatwo wskazać, gdzie aktualnie znajduje się użytkownik.
- Aktywuj element klawiaturą. Użyj Entera lub Spacji zgodnie z funkcją danego elementu. Sprawdź, czy pojawia się czytelny stan aktywacji albo inna informacja zwrotna.
- Powtórz próbę w formularzu, menu i sklepie. Jeden dobrze działający przycisk na stronie głównej nie oznacza, że tak samo zachowują się wszystkie pozostałe.
- Sprawdź telefon. Otwórz stronę na rzeczywistym urządzeniu albo w trybie emulacji i dotknij przycisku. Zobacz, czy działanie nie opiera się wyłącznie na hover oraz czy element jest łatwy do trafienia.
Na telefonie nie zakładaj klasycznego najechania kursorem takiego jak przy pracy z myszą. Liczy się reakcja po dotknięciu i jasne działanie elementu. Ten test jest praktyczną kontrolą, nie pełnym audytem dostępności. Nie sprawdzi wszystkich problemów strony, ale szybko pokaże, czy przyciski nie zachowują się jak martwe prostokąty.
Najczęstsze wtopy i moment, w którym sama korekta stylu nie wystarczy
Najczęstsza wpadka to usunięcie obramowania fokusu bez dodania wyraźnego zamiennika. Druga: hover i focus wyglądają dokładnie tak samo, choć odpowiadają na różne sposoby obsługi. Trzecia: zmienia się tylko kolor, a różnica jest tak mała, że trzeba ją oglądać z lupą i dobrym humorem.
Zdarza się też, że efekt działa w edytorze, ale nie pojawia się na stronie, bo przycisk pochodzi z motywu, WooCommerce, formularza albo zewnętrznego buildera. Wtedy trzeba sprawdzić konkretny komponent, a nie zakładać, że ustawienie natywnego bloku obejmie wszystko.
Drobna korekta stylów ma sens, gdy struktura strony działa, przyciski są właściwie rozmieszczone, a problem dotyczy głównie informacji zwrotnej. Jeśli jednak kłopot obejmuje całą obsługę, hierarchię, kontrast, motyw albo działanie sklepu, sama zmiana hover może być tylko plastrem na większy problem. Nie gwarantuje też określonego wyniku sprzedażowego.
Podsumowując: hover, focus i active opisują trzy różne momenty interakcji. WordPress 7.1 pozwala ustawić je dla bloku Button, ale najważniejsza nie jest liczba efektów, tylko ich czytelność. Hover pomaga osobie korzystającej z kursora, focus prowadzi użytkownika klawiatury, a active potwierdza moment aktywacji. Sprawdź każdy stan na komputerze i telefonie, pamiętając, że nie zastępuje to pełnej oceny dostępności. Masz stronę, sklep albo materiały graficzne, które proszą się o ogarnięcie? Napisz do INB Marketing i zobaczymy, co da się z tym sensownie zrobić.
