\u0141adny motyw potrafi zrobi\u0107 wra\u017cenie, ale wystarczy niedost\u0119pne menu albo zbyt blady tekst i nagle ro\u015bnie liczba porzuconych koszyk\u00f3w oraz wiadomo\u015bci od u\u017cytkownik\u00f3w, \u017ce czego\u015b nie mog\u0105 klikn\u0105\u0107. Do tego dochodzi ryzyko prawne w projektach publicznych i realna strata czasu na gaszenie po\u017car\u00f3w.<\/p>\n
Motyw to nie tylko wygl\u0105d. Decyduje o szybko\u015bci, wygodzie edycji, zgodno\u015bci z wtyczkami, jako\u015bci UX, dzia\u0142aniu na telefonach i o tym czy strona b\u0119dzie si\u0119 da\u0142a sensownie rozwija\u0107. Sprawdzenie dost\u0119pno\u015bci pod k\u0105tem WCAG i mobile to po prostu inwestycja w spok\u00f3j i mniejsze koszty p\u00f3\u017aniej.<\/p>\n
Zawsze przed zakupem lub wdro\u017ceniem, przy przebudowie serwisu, gdy ro\u015bnie odsetek wej\u015b\u0107 z mobile albo gdy planujesz doda\u0107 wa\u017cne funkcje jak koszyk czy formularze. Im p\u00f3\u017aniej wyjd\u0105 braki dost\u0119pno\u015bci, tym dro\u017csza naprawa i wi\u0119ksze ryzyko \u017ce wtyczki lub szablony sklepu b\u0119d\u0105 wymaga\u0142y przer\u00f3bek.<\/p>\n
Warto oddzieli\u0107 to co robi motyw od tego co jest tre\u015bci\u0105. Motyw odpowiada za nawigacj\u0119, nag\u0142\u00f3wki sekcji, przyciski, stopk\u0119 i og\u00f3lny szkielet. Je\u015bli te elementy s\u0105 zrobione \u017ale, \u0142atki w tre\u015bci niewiele pomog\u0105. Lepiej od razu wybra\u0107 motyw kt\u00f3ry daje sensowne podstawy i elastyczne ustawienia.<\/p>\n
WCAG to zbi\u00f3r wytycznych kt\u00f3re pomagaj\u0105 tworzy\u0107 serwisy dost\u0119pne dla os\u00f3b z r\u00f3\u017cnymi ograniczeniami. Dla wi\u0119kszo\u015bci stron i sklep\u00f3w sensownym celem jest poziom AA. Nie chodzi o list\u0119 znacznik\u00f3w, tylko o to czy serwis da si\u0119 zobaczy\u0107, zrozumie\u0107 i obs\u0142u\u017cy\u0107 r\u00f3\u017cnymi metodami tak\u017ce bez myszy.<\/p>\n
W praktyce liczy si\u0119 kontrast tekstu do t\u0142a, mo\u017cliwo\u015b\u0107 pe\u0142nej obs\u0142ugi klawiatur\u0105, logiczna struktura nag\u0142\u00f3wk\u00f3w, jasne opisy link\u00f3w i przycisk\u00f3w, alternatywy tekstowe dla obraz\u00f3w oraz formularze z etykietami i czytelnymi komunikatami o b\u0142\u0119dach.<\/p>\n
Motyw powinien zapewni\u0107 dost\u0119pne wzorce dla nag\u0142\u00f3wka, menu, wyszukiwarki, przycisk\u00f3w i paginacji. Tre\u015bci i zdj\u0119cia uzupe\u0142niasz sam, ale to motyw daje albo zabiera solidny fundament. Je\u015bli fundament jest krzywy, p\u00f3\u017aniejsze poprawki przypominaj\u0105 walk\u0119 z wiatrakami.<\/p>\n
Otw\u00f3rz demo motywu i u\u017cyj klawisza Tab. Sprawd\u017a czy wida\u0107 wyra\u017ane pod\u015bwietlenie elementu aktywnego i czy kolejno\u015b\u0107 przechodzenia po elementach ma sens. Dobr\u0105 oznak\u0105 jest link umo\u017cliwiaj\u0105cy szybkie przej\u015bcie do tre\u015bci na pocz\u0105tku strony. Menu powinno si\u0119 rozwija\u0107 i zwija\u0107 bez myszy, a klawisz Esc powinien zamyka\u0107 otwarte panele.<\/p>\n
Przetestuj komponenty kt\u00f3re cz\u0119sto sprawiaj\u0105 k\u0142opot. Mobilne menu, suwak ze slajdami, okno wyszukiwarki lub newsletter to miejsca gdzie focus cz\u0119sto si\u0119 gubi. Sprawd\u017a czy mo\u017cesz w nie wej\u015b\u0107 i z nich wyj\u015b\u0107 klawiatur\u0105 oraz czy Enter i Spacja uruchamiaj\u0105 odpowiednie akcje.<\/p>\n
Je\u015bli korzystasz z WooCommerce, przejd\u017a klawiatur\u0105 przez list\u0119 produkt\u00f3w, filtracj\u0119, dodawanie do koszyka i ca\u0142y koszyk. Zwr\u00f3\u0107 uwag\u0119 na pola ilo\u015bci, wyb\u00f3r wariant\u00f3w i kupony. W formularzu zam\u00f3wienia po b\u0142\u0119dzie focus powinien skoczy\u0107 do pierwszego niepoprawnego pola a komunikat o b\u0142\u0119dzie powinien by\u0107 czytelny i powi\u0105zany z polem.<\/p>\n