Ładny motyw potrafi zrobić wrażenie, ale wystarczy niedostępne menu albo zbyt blady tekst i nagle rośnie liczba porzuconych koszyków oraz wiadomości od użytkowników, że czegoś nie mogą kliknąć. Do tego dochodzi ryzyko prawne w projektach publicznych i realna strata czasu na gaszenie pożarów.
Motyw to nie tylko wygląd. Decyduje o szybkości, wygodzie edycji, zgodności z wtyczkami, jakości UX, działaniu na telefonach i o tym czy strona będzie się dała sensownie rozwijać. Sprawdzenie dostępności pod kątem WCAG i mobile to po prostu inwestycja w spokój i mniejsze koszty później.
Kiedy warto sprawdzić dostępność motywu
Zawsze przed zakupem lub wdrożeniem, przy przebudowie serwisu, gdy rośnie odsetek wejść z mobile albo gdy planujesz dodać ważne funkcje jak koszyk czy formularze. Im później wyjdą braki dostępności, tym droższa naprawa i większe ryzyko że wtyczki lub szablony sklepu będą wymagały przeróbek.
Warto oddzielić to co robi motyw od tego co jest treścią. Motyw odpowiada za nawigację, nagłówki sekcji, przyciski, stopkę i ogólny szkielet. Jeśli te elementy są zrobione źle, łatki w treści niewiele pomogą. Lepiej od razu wybrać motyw który daje sensowne podstawy i elastyczne ustawienia.
Co to znaczy zgodny z WCAG w praktyce
WCAG to zbiór wytycznych które pomagają tworzyć serwisy dostępne dla osób z różnymi ograniczeniami. Dla większości stron i sklepów sensownym celem jest poziom AA. Nie chodzi o listę znaczników, tylko o to czy serwis da się zobaczyć, zrozumieć i obsłużyć różnymi metodami także bez myszy.
W praktyce liczy się kontrast tekstu do tła, możliwość pełnej obsługi klawiaturą, logiczna struktura nagłówków, jasne opisy linków i przycisków, alternatywy tekstowe dla obrazów oraz formularze z etykietami i czytelnymi komunikatami o błędach.
Motyw powinien zapewnić dostępne wzorce dla nagłówka, menu, wyszukiwarki, przycisków i paginacji. Treści i zdjęcia uzupełniasz sam, ale to motyw daje albo zabiera solidny fundament. Jeśli fundament jest krzywy, późniejsze poprawki przypominają walkę z wiatrakami.
Szybki test klawiaturą i fokusem
Otwórz demo motywu i użyj klawisza Tab. Sprawdź czy widać wyraźne podświetlenie elementu aktywnego i czy kolejność przechodzenia po elementach ma sens. Dobrą oznaką jest link umożliwiający szybkie przejście do treści na początku strony. Menu powinno się rozwijać i zwijać bez myszy, a klawisz Esc powinien zamykać otwarte panele.
Przetestuj komponenty które często sprawiają kłopot. Mobilne menu, suwak ze slajdami, okno wyszukiwarki lub newsletter to miejsca gdzie focus często się gubi. Sprawdź czy możesz w nie wejść i z nich wyjść klawiaturą oraz czy Enter i Spacja uruchamiają odpowiednie akcje.
Jeśli korzystasz z WooCommerce, przejdź klawiaturą przez listę produktów, filtrację, dodawanie do koszyka i cały koszyk. Zwróć uwagę na pola ilości, wybór wariantów i kupony. W formularzu zamówienia po błędzie focus powinien skoczyć do pierwszego niepoprawnego pola a komunikat o błędzie powinien być czytelny i powiązany z polem.
Zobacz więcej darmowej wiedzy na ProjektWordPress.pl.
Kontrast i czytelność tekstu
Kontrast zwykłego tekstu powinien mieć współczynnik co najmniej 4.5 do 1 a dużego tekstu 3 do 1. Jeśli w demo widzisz jasnoszare akapity na białym tle albo cienkie przyciski z bladą czcionką, licz się z tym że część użytkowników ich nie zauważy. Dobrze gdy motyw pozwala zmienić kolory globalnie bez grzebania w kodzie.
Na telefonie czytelność zabija nie tylko kontrast, ale też zbyt mała czcionka i ciasne odstępy. Celuj w rozmiar minimum 16 px, odstęp między wierszami około półtora i sensowne marginesy. Długie akapity pisane wersalikami są męczące. Sprawdź czy motyw umożliwia ustawienia typografii dla różnych urządzeń.
Struktura nagłówków i znaczniki ARIA
Każda podstrona powinna mieć jeden główny nagłówek H1, niższe sekcje powinny tworzyć logiczną hierarchię H2 i niższe. Nagłówków nie używa się do samej zmiany wyglądu. Menu i stopka powinny być oznaczone jako nawigacja i stopka, a główna zawartość jako sekcja główna.
ARIA to proste etykiety które pomagają czytnikom ekranu zrozumieć rolę i stan elementu. Role takie jak navigation, main, banner czy contentinfo opisują części strony. Dodatkowe atrybuty mogą opisać przyciski rozwijające menu czy błąd formularza. Umiar jest ważny, ARIA nie naprawi złej struktury HTML.
Szybki test zrobisz bez specjalnej wiedzy. Włącz czytnik ekranu w systemie i wyświetl listę nagłówków. Jeśli porządek jest chaotyczny albo brakuje H1, to sygnał ostrzegawczy. Sprawdź też czy czytnik wyraźnie zapowiada nawigację i główną treść. To weryfikuje jakość motywu lepiej niż ocena na oko.
Mobile first a dostępność
Na telefonach często wychodzą rzeczy których nie widać na desktopie. Sprawdź czy tekst nie wychodzi poza ekran, czy formularze nie uciekają spod palca i czy nie ma blokady powiększania strony. Elementy klikalne powinny mieć mniej więcej wielkość czubka kciuka i odrobinę luzu dookoła, aby łatwo było w nie trafić.
Szybkość ma wpływ na użyteczność. Jeśli motyw ładuje kilka ciężkich fontów i animacje, na średnim telefonie na wolniejszym łączu strona zacznie skakać i przyciski będą reagować z opóźnieniem. Lepiej wybrać motyw który pozwala wyłączyć zbędne wodotryski i daje proste ustawienia bez potrzeby instalowania dodatkowych konstruktorów.
WooCommerce bez barier
Na liście produktów tytuł musi być prawdziwym nagłówkiem, linki i przyciski powinny być opisane tak aby było jasne co się wydarzy po kliknięciu a zdjęcia produktów powinny mieć sensowne opisy alternatywne. Po dodaniu do koszyka fokus nie może znikać a mini koszyk powinien dać się obsłużyć klawiaturą. Filtry i sortowanie muszą działać bez myszy i być komunikowane czytelnymi etykietami.
Kiedy zmienić motyw a kiedy go poprawić
Jeśli brakuje głównie kontrastu, rozmiarów czcionek czy odstępów a motyw daje ustawienia, naprawisz to szybko. Gdy problemem jest niedostępne menu, brak linka do treści, pułapki fokusu i brak aktualizacji od autora, zwykle taniej i szybciej jest zmienić motyw. Zrób kopię roboczą, przetestuj wtyczki i kluczowe ścieżki jak kontakt, zapis na newsletter i koszyk zanim klikniesz publikuj.
