Dostępność strony internetowej nie oznacza automatycznie wielkiej przebudowy serwisu. Chodzi o ograniczanie barier, które mogą utrudniać czytanie treści, poruszanie się po stronie albo kontakt z firmą. Dla właściciela firmy, marketera czy osoby prowadzącej sklep internetowy oznacza to przede wszystkim sprawdzenie najważniejszych punktów kontaktu z użytkownikiem.
Na początek warto przejrzeć teksty alternatywne, kontrast, nagłówki, obsługę klawiaturą, formularze, komunikaty o błędach, powiększenie tekstu i materiały wideo. Taka checklista pomoże znaleźć część problemów, ale nie jest pełnym audytem ani formalnym potwierdzeniem zgodności z WCAG 2.2 lub przepisami.
Dostępność strony internetowej: od czego zacząć?
Checklista jako pierwszy przegląd, nie certyfikat
WCAG 2.2 zawiera testowalne kryteria dotyczące dostępności treści internetowych. Obejmują one między innymi treści nietekstowe, kontrast, klawiaturę, multimedia, formularze i komunikaty o statusie. Dzięki temu można uporządkować sprawdzanie strony, zamiast poprawiać przypadkowe elementy.
Wstępne kontrole mogą wykonać także osoby nietechniczne. Ich wynikiem powinna być lista problemów do poprawy: miejsce wystąpienia, krótki opis, priorytet, osoba odpowiedzialna i termin ponownego sprawdzenia. Nie należy jednak na tej podstawie pisać, że strona jest w pełni zgodna z WCAG. Prosta kontrola nie zastępuje pełnej oceny zgodności.
Od czego zacząć na stronie firmy lub sklepu
Najlepiej zacząć od ścieżek, które użytkownik przechodzi najczęściej: czytania oferty, przejścia do kontaktu, wysłania zapytania oraz, w sklepie, korzystania z najważniejszych funkcji procesu zakupowego. Sprawdź kolejno:
- obrazy i ich teksty alternatywne;
- strukturę nagłówków;
- kontrast tekstu i tła;
- nawigację klawiaturą i widoczność fokusu;
- formularze oraz komunikaty o błędach;
- powiększenie tekstu i multimedia.
Cztery praktyczne obszary porządkowania kontroli to postrzegalność, funkcjonalność, zrozumiałość i kompatybilność. Nie musisz omawiać ich teoretycznie. Potraktuj je jako pytania: czy treść da się zauważyć, czy można wykonać działanie, czy komunikaty są jasne i czy strona współpracuje z różnymi sposobami obsługi.
Teksty alternatywne: opisz rolę obrazu, nie tylko jego wygląd
Najpierw ustal funkcję grafiki
Tekst alternatywny powinien zależeć od kontekstu. Zanim go napiszesz, ustal, czy obraz przekazuje informację, uruchamia działanie, prowadzi do linku czy jest wyłącznie dekoracją.
Zdjęcie informacyjne powinno otrzymać krótki opis znaczenia. Nie chodzi o wymienienie każdego szczegółu wyglądu, lecz o przekazanie tego, co użytkownik powinien zrozumieć. Ikona telefonu prowadząca do kontaktu powinna wskazywać cel lub działanie, a nie tylko brzmieć „niebieska słuchawka”. Obraz będący przyciskiem powinien opisywać funkcję przycisku.
Grafika czysto dekoracyjna może mieć pusty atrybut alt="". Dzięki temu nie konkuruje z właściwą treścią. Typowe błędy to brak tekstu alternatywnego, opis wyglądu zamiast funkcji oraz upychanie słów kluczowych w opisie. Alt nie jest miejscem na dodatkowy tekst marketingowy oderwany od obrazu.
Krótki przegląd altów przed publikacją
Przejrzyj obrazy na stronie głównej, stronach usług, w sekcji kontaktowej i na najważniejszych podstronach sklepu. Przy każdym zadaj sobie jedno pytanie: co użytkownik powinien wiedzieć albo zrobić, gdy nie może zobaczyć grafiki?
- Jeśli obraz informuje, opisz jego znaczenie.
- Jeśli obraz jest linkiem lub przyciskiem, opisz cel albo działanie.
- Jeśli obraz jest dekoracją, rozważ pusty atrybut alt.
- Jeśli opis powtarza sąsiedni tekst i niczego nie dodaje, sprawdź, czy nie jest zbędny.
To punktowa praca redakcyjna. Nie wymaga zmiany całej identyfikacji ani masowego przepisywania wszystkich treści.
Kontrast i kolor bez rebrandingu
Punktowa korekta zamiast przebudowy identyfikacji
Kontrast tekstu i tła sprawdzaj jako osobny element. Nie zakładaj, że cała identyfikacja jest niedostępna tylko dlatego, że jeden przycisk albo komunikat jest słabo czytelny. Wytypować warto najczęściej używane pary: tekst podstawowy i tło, linki, przyciski oraz elementy fokusu.
Jeśli dana para jest nieczytelna, rozważ punktową zmianę koloru tekstu, tła, przycisku albo obramowania fokusu. Taka korekta może zachować charakter marki, a jednocześnie poprawić rozpoznawalność elementu. Każdą ważną parę kolorów należy sprawdzać osobno, w jej rzeczywistym zastosowaniu.
Kolor nie może być jedyną informacją
Sam kolor nie powinien przekazywać informacji. Dotyczy to na przykład błędu formularza, statusu zamówienia albo oznaczenia dostępności. Czerwone obramowanie pola może być pomocne, ale nie powinno być jedynym komunikatem. Dodaj zrozumiały tekst wyjaśniający problem i sposób jego poprawy.
Przejdź przez stronę i poszukaj komunikatów typu „zielone oznacza poprawne, czerwone błędne”. Sprawdź, czy bez rozpoznania konkretnej barwy nadal wiadomo, co się wydarzyło. Zwróć też uwagę na przyciski i fokus: użytkownik powinien łatwo rozpoznać, który element może uruchomić i gdzie aktualnie znajduje się na stronie.
Test strony bez myszy: klawiatura, fokus i formularze
Scenariusz przejścia klawiaturą
Ustaw początek nawigacji i przejdź przez stronę wyłącznie klawiszem Tab. Sprawdź, czy kolejność jest logiczna: menu, linki, przyciski, treść i formularz powinny pojawiać się w kolejności, która pomaga wykonać zadanie.
Obserwuj widoczny fokus. Musisz wiedzieć, który element jest aktualnie zaznaczony. Sprawdź, czy da się osiągnąć menu, linki, przyciski i kontrolki formularza oraz czy można je uruchomić bez myszy. W zależności od kontrolki użyj Tab, Shift+Tab, Enter i dostępnych klawiszy obsługi danej funkcji.
Nie traktuj tego testu jako kompletnego audytu. Jest jednak prostym sposobem na znalezienie przeszkód, które mogą zatrzymać użytkownika już przy podstawowej nawigacji.
Test formularza od pustego pola do potwierdzenia
Formularz powinien nie tylko przyjąć dane, ale także wyjaśniać, co należy wpisać i jak poprawić błąd. Przejdź po każdym polu klawiszem Tab i sprawdź, czy ma zrozumiałą, powiązaną etykietę. Zweryfikuj oznaczenie pól wymaganych oraz logiczną kolejność.
Następnie celowo pomiń wymagane pole albo wpisz niepoprawne dane. Sprawdź, czy komunikat błędu jest tekstowy i zrozumiały, czy wskazuje problem oraz czy po poprawie można kontynuować. Samo pokolorowanie pola nie wystarcza jako jedyny komunikat.
Na końcu wyślij formularz bez myszy. Upewnij się, że pojawia się potwierdzenie wysłania i że użytkownik wie, czy jego działanie się powiodło. Zapisz problem wraz z adresem lub nazwą podstrony, priorytetem, osobą odpowiedzialną i datą ponownego testu.
Wideo, napisy i checklista przed publikacją
Multimedia w praktyce marketingowej
Jeśli publikujesz nagranie zawierające dźwięk i obraz, sprawdź, czy ma napisy. W zależności od materiału potrzebna może być także transkrypcja albo informacja opisująca istotne elementy wizualne. Chodzi o to, aby odbiorca mógł zrozumieć ważny przekaz również wtedy, gdy nie korzysta z pełnej warstwy obrazu lub dźwięku.
Przejrzyj także automatyczne odtwarzanie, miganie i ruchome elementy. Sprawdź, czy użytkownik ma nad nimi kontrolę i czy nie utrudniają czytania treści. Ten punkt dotyczy filmów na stronie, materiałów promocyjnych oraz innych multimediów używanych w komunikacji firmy.
Jedna karta kontroli przed publikacją
Przed publikacją strony, podstrony lub kampanii wykonaj krótką rundę kontrolną. Nie ograniczaj się do strony głównej. Przejdź przez najważniejsze ścieżki użytkownika i odnotuj wynik.
| Element | Co sprawdzić | Co zapisać |
|---|---|---|
| Nawigacja | Klawiaturę, kolejność i fokus | Problem i miejsce |
| Treść | Alt-y, nagłówki, kontrast i powiększenie | Priorytet poprawki |
| Kontakt | Etykiety pól, błędy i potwierdzenie | Osobę odpowiedzialną |
| Multimedia | Napisy, transkrypcję i ruch | Datę ponownego testu |
Po wdrożeniu poprawek wróć do tych samych elementów. Powtarzalny zapis pozwala odróżnić problem znaleziony, problem poprawiony i element oczekujący na dokładniejszą ocenę.
Kiedy checklista nie wystarcza?
Praktyczne UX a obowiązki formalne
Checklista jest dobrym pierwszym krokiem, ale nie rozstrzyga, czy konkretna firma spełnia wszystkie wymagania formalne. W przypadku sklepu internetowego trzeba osobno rozważyć praktyczne kwestie UX oraz to, czy dana firma podlega Polskiemu Aktowi o Dostępności.
Zakres obowiązków może zależeć od rodzaju usługi, wielkości przedsiębiorcy i wyjątków ustawowych. Dlatego nie należy wyciągać indywidualnych wniosków prawnych wyłącznie na podstawie poprawy kontrastu, formularza czy nawigacji klawiaturą. W razie wątpliwości potrzebna jest konsultacja prawna.
Co przekazać do dokładniejszego audytu
Dokładniejsza ocena może być potrzebna przy rozbudowanym sklepie, procesie płatności albo wielu niestandardowych komponentach. Przygotuj wtedy listę sprawdzonych ścieżek, znalezionych problemów, wykonanych poprawek i elementów, których nie udało się ocenić.
Automatyczny skaner może pomóc wskazać część błędów, ale nie zastępuje ręcznego przejścia klawiaturą, oceny treści i sprawdzenia komunikatów. Nie traktuj jego wyniku jako kompletnego audytu ani nie obiecuj zgodności po wdrożeniu samej checklisty.
Podsumowanie: Zacznij od najważniejszych ścieżek użytkownika, a następnie sprawdź teksty alternatywne, nagłówki, kontrast, klawiaturę, fokus, formularze, komunikaty i multimedia. Poprawiaj problemy etapami i po każdej zmianie powtarzaj test. Dostępność strony internetowej można porządkować bez zakładania pełnej przebudowy, ale wstępna checklista nie jest pełnym audytem ani potwierdzeniem obowiązków prawnych. Jeśli potrzebujesz dokładniejszej oceny, przekaż specjaliście zapisane wyniki kontroli. Sprawdź pozostałe inspiracje i praktyczne poradniki, które pomogą Ci lepiej prowadzić marketing swojej firmy.
