Katalog branżowy staje się niedostępny zwykle nie przez jeden poważny błąd, lecz przez serię drobnych decyzji: zbyt jasny tekst, nieopisane ikony, filtry obsługiwane wyłącznie myszą, chaotyczne nagłówki i formularz, który informuje o błędzie dopiero kolorem. Każdy z tych problemów utrudnia znalezienie firmy, porównanie ofert albo dodanie własnego wpisu. Razem potrafią całkowicie zablokować korzystanie z serwisu osobom niewidomym, słabowidzącym, z ograniczoną sprawnością rąk lub trudnościami poznawczymi.
Dostępność katalogu trzeba więc projektować jak część jego architektury, a nie poprawkę dodawaną po uruchomieniu strony. Najrozsądniejszym celem technicznym jest zgodność z WCAG 2.2 na poziomie AA, przy jednoczesnym sprawdzeniu, jakie wymagania prawne dotyczą konkretnego operatora. W Polsce strony i aplikacje podmiotów publicznych podlegają wymaganiom odpowiadającym zasadniczo WCAG 2.1 AA. Od 28 czerwca 2025 roku obowiązuje również Polski Akt o Dostępności, obejmujący określone produkty i usługi świadczone konsumentom, między innymi usługi handlu elektronicznego. Sam fakt prowadzenia katalogu nie przesądza jeszcze o objęciu ustawą. Znaczenie ma to, czy serwis umożliwia konsumentowi zawarcie umowy, zakup pakietu, opłacenie usługi albo wykonanie innej czynności należącej do zakresu regulacji.
Struktura katalogu musi być czytelna dla człowieka i technologii asystujących
Najpierw należy uporządkować sposób poruszania się po serwisie. Katalog zawierający kilka tysięcy firm może wyglądać poprawnie na ekranie, a jednocześnie pozostawać chaotyczny dla użytkownika czytnika ekranu. Dzieje się tak, gdy układ wizualny nie odpowiada strukturze kodu.
Każda podstrona powinna mieć jeden logiczny nagłówek H1, opisujący jej główną treść, na przykład „Firmy budowlane w Poznaniu”. Nazwy sekcji, takich jak „Najwyżej oceniane firmy”, „Usługi” czy „Opinie klientów”, powinny tworzyć kolejne poziomy nagłówków bez przypadkowych przeskoków z H2 do H4. Nagłówka nie wolno wybierać na podstawie rozmiaru czcionki. Wygląd ustala CSS, a poziom nagłówka ma odzwierciedlać miejsce informacji w strukturze dokumentu.
Szczególnej uwagi wymagają listy wyników. Karty firm najlepiej kodować jako listę elementów, a nie zbiór niezależnych bloków div. Dzięki temu czytnik ekranu może poinformować użytkownika, że na stronie znajduje się na przykład 20 wyników. Nazwa przedsiębiorstwa powinna być nagłówkiem karty, natomiast branża, adres, godziny otwarcia i ocena muszą występować w przewidywalnej kolejności.
Nie należy ukrywać ważnych danych wyłącznie pod ikonami. Symbol telefonu bez etykiety może być niezrozumiały dla użytkownika czytnika ekranu. Poprawne rozwiązanie to widoczny tekst „Telefon” albo jednoznaczna nazwa dostępna programowo. Dotyczy to także ikon strony internetowej, mapy, poczty elektronicznej, udostępniania i dodawania firmy do ulubionych.
Dobrze przygotowany katalog powinien zapewniać:
- link pomijający prowadzący bezpośrednio do głównej treści,
- logiczne regiony strony, takie jak nagłówek, nawigacja, wyszukiwarka, treść główna i stopka,
- jednoznaczne tytuły podstron wyświetlane na karcie przeglądarki,
- okruszki nawigacyjne z prawidłowo oznaczonym bieżącym poziomem,
- komunikaty o liczbie wyników przekazywane również technologiom asystującym,
- tekstowe odpowiedniki ikon oraz elementów graficznych zawierających informacje.
Częsty błąd pojawia się w nazwach linków. Kilkanaście odnośników „Zobacz więcej” nie mówi użytkownikowi czytnika ekranu, czego dotyczą. Lepsze są etykiety „Zobacz profil firmy Kowalski Instalacje” albo krótszy widoczny tekst uzupełniony nazwą dostępną programowo.
Opis alternatywny logo firmy również wymaga decyzji. Jeżeli obok logo znajduje się już nazwa przedsiębiorstwa, powtarzanie jej w atrybucie alt tylko wydłuża komunikat czytnika. W takim przypadku dekoracyjne logo powinno mieć pusty opis alternatywny. Jeżeli obraz jest jedynym miejscem prezentującym nazwę, alt musi ją zawierać.
Wyszukiwarka, filtry i formularze trzeba obsłużyć bez myszy
Najwięcej praktycznych problemów ujawnia się w elementach interaktywnych. Katalog branżowy bez sprawnej wyszukiwarki i filtrów jest mało użyteczny, ale rozbudowany panel filtrujący bywa też najbardziej niedostępną częścią strony.
Cały proces — od wpisania zapytania po otwarcie profilu firmy — powinien działać za pomocą klawiatury. Użytkownik musi móc poruszać się klawiszem Tab, wracać kombinacją Shift+Tab, wybierać opcje i zamykać okna bez użycia myszy. Fokus klawiatury powinien być zawsze widoczny. Cienka, jasnoszara ramka na białym tle nie wystarczy, nawet gdy formalnie jest wyświetlana.
Kolejność fokusu musi odpowiadać kolejności informacji na ekranie. Problem pojawia się zwłaszcza wtedy, gdy układ kart został wizualnie przestawiony za pomocą CSS, ale kolejność elementów w kodzie pozostała inna. Użytkownik klawiatury zaczyna wtedy przeskakiwać między przyciskami w sposób, którego nie da się przewidzieć.
Filtry powinny mieć wyraźne etykiety, na przykład:
- „Branża”,
- „Miejscowość”,
- „Promień wyszukiwania”,
- „Firma otwarta teraz”,
- „Minimalna ocena klientów”.
Placeholder, czyli tekst wyświetlany wewnątrz pustego pola, nie zastępuje etykiety. Znika po rozpoczęciu pisania, często ma niski kontrast i bywa pomijany przez technologie asystujące. Etykieta powinna pozostawać widoczna przez cały czas.
Po zastosowaniu filtrów trzeba poinformować użytkownika, co się zmieniło. Komunikat „Znaleziono 38 firm” powinien zostać przekazany czytnikowi ekranu bez automatycznego przenoszenia fokusu w przypadkowe miejsce. Samo odświeżenie kart nie wystarcza, ponieważ osoba niewidoma może nie zauważyć, że lista została zmieniona.
Formularz dodawania firmy wymaga jeszcze dokładniejszej kontroli. Pola obowiązkowe należy oznaczać tekstowo, nie tylko czerwoną gwiazdką. Błędy powinny wskazywać zarówno problem, jak i sposób jego naprawienia:
- źle: „Nieprawidłowa wartość”,
- dobrze: „Wpisz numer telefonu składający się z dziewięciu cyfr”,
- źle: czerwona ramka bez komunikatu,
- dobrze: „Pole Kod pocztowy jest wymagane. Użyj formatu 00-000”.
Po nieudanym wysłaniu formularza fokus najlepiej przenieść do podsumowania błędów, zawierającego linki do konkretnych pól. Nie należy kasować poprawnie wprowadzonych danych. Utrata kilkunastu minut pracy po jednym błędzie walidacji jest irytująca dla każdego, a dla osoby korzystającej z technologii asystującej może oznaczać konieczność rozpoczęcia całego procesu od nowa.
Trzeba też uważać na automatyczne podpowiedzi nazw firm i miejscowości. Własnoręcznie zbudowany komponent autouzupełniania często działa myszą, ale nie przekazuje informacji o rozwinięciu listy, liczbie propozycji ani aktualnie zaznaczonej pozycji. Bezpieczniejszy jest komponent oparty na poprawnych wzorcach dostępności i przetestowany przynajmniej z NVDA oraz jedną popularną przeglądarką. Samo dodanie kilku atrybutów ARIA do niedziałającego mechanizmu nie naprawi jego obsługi.
Kontrast, dane firm i testy decydują o rzeczywistej dostępności
Warstwa wizualna katalogu musi wytrzymać więcej niż szybkie sprawdzenie na monitorze projektanta. Minimalny kontrast zwykłego tekstu względem tła wynosi 4,5:1. Dla dużego tekstu dopuszczalne jest 3:1. Za duży uznaje się tekst o rozmiarze co najmniej 24 pikseli CSS albo około 18,5 piksela CSS, jeżeli jest pogrubiony. Elementy interfejsu i istotne części grafik również wymagają kontrastu co najmniej 3:1 względem sąsiadujących kolorów.
Najczęściej problematyczne są:
- jasnoszare adresy i opisy firm,
- pomarańczowe lub zielone przyciski z białym tekstem,
- szare obramowania pól formularza,
- niewyraźne ikony filtrowania,
- gwiazdki ocen rozróżniane wyłącznie kolorem,
- komunikaty błędów oznaczone tylko czerwienią.
Kolor nie może być jedynym nośnikiem informacji. Jeżeli aktywny filtr ma zielone tło, powinien otrzymać także tekst, ikonę albo inny stan możliwy do rozpoznania bez widzenia koloru. Ocena firmy nie może być prezentowana jedynie za pomocą czterech wypełnionych gwiazdek. Obok należy podać tekst, na przykład „Ocena 4,0 na 5 na podstawie 27 opinii”.
Treść powinna pozostać czytelna po powiększeniu tekstu do 200%. Przy szerokości odpowiadającej 320 pikselom CSS użytkownik nie powinien przewijać strony jednocześnie w pionie i poziomie, z wyjątkiem elementów, które z natury wymagają dwóch wymiarów, takich jak rozbudowana mapa. W praktyce oznacza to konieczność przekształcania wielokolumnowych kart w układ jednokolumnowy, a nie ściskania wszystkich danych do kilku znaków.
Mapy są kłopotliwe. Interaktywna mapa firm może pozostać dodatkiem, ale nie może być jedynym sposobem dotarcia do wyników. Obok niej musi działać tekstowa lista przedsiębiorstw. Użytkownik powinien móc wyszukać firmę, sprawdzić adres i otworzyć profil bez przesuwania mapy, obsługi znaczników lub wykonywania gestów wielopunktowych.
W katalogach szczególne znaczenie ma również jakość danych. Nazwa firmy, adres i telefon powinny być zapisane w spójnej, tekstowej postaci, a nie umieszczone wyłącznie na grafice lub w skanie. Spójność informacji NAP — Name, Address, Phone — ułatwia użytkownikowi rozpoznanie podmiotu i ogranicza ryzyko kontaktu z nieaktualnym numerem albo dojazdu pod błędny adres. Dodatkowe informacje na: wizytówki NAP – naphub.pl.
Testów nie można ograniczać do automatycznego skanera. Lighthouse, axe DevTools, WAVE czy Accessibility Insights dobrze wykrywają brakujące etykiety, część błędów kontrastu i problemy strukturalne, ale nie ocenią poprawnie wszystkich zachowań formularza, kolejności fokusu, sensowności opisów ani jakości komunikatów.
Minimalny proces kontroli powinien obejmować:
- automatyczne sprawdzenie reprezentatywnych podstron,
- przejście całej ścieżki wyłącznie klawiaturą,
- test przy powiększeniu 200%,
- test widoku o szerokości 320 pikseli CSS,
- obsługę wyszukiwarki, filtrów i formularza czytnikiem ekranu,
- sprawdzenie komunikatów błędów i zmian dynamicznych,
- ręczną kontrolę kontrastu najważniejszych elementów,
- ponowny test po każdej większej aktualizacji szablonu.
Nie trzeba ręcznie sprawdzać każdej z dziesiątek tysięcy wizytówek, jeżeli korzystają z tego samego szablonu. Trzeba jednak przetestować wszystkie odmienne warianty: firmę z logo i bez logo, wpis sponsorowany, profil z wieloma lokalizacjami, pustą listę wyników, brak opinii, długą nazwę, zagraniczny numer telefonu oraz adres zawierający nietypowe znaki. To właśnie dane graniczne najczęściej rozbijają poprawny na papierze projekt.
Koszt audytu zależy od liczby widoków i złożoności interakcji. Prosty katalog z kilkoma szablonami można zwykle sprawdzić za około 3–8 tys. zł netto. Rozbudowany serwis z kontami użytkowników, płatnościami, panelem firm, mapami i wieloetapowymi formularzami wymaga często budżetu rzędu 10–30 tys. zł netto. Naprawy są wyceniane osobno. Najdroższa sytuacja to przebudowa własnych komponentów interaktywnych już po wdrożeniu — koszt potrafi być kilkukrotnie wyższy niż zaprojektowanie ich dostępnie od początku.
FAQ
Czy prywatny katalog branżowy musi spełniać WCAG?
Nie każdy prywatny katalog automatycznie podlega tym samym obowiązkom co strona podmiotu publicznego. Trzeba sprawdzić model usługi. Jeżeli serwis świadczy konsumentom usługę objętą Polskim Aktem o Dostępności, na przykład umożliwia zawarcie i opłacenie umowy online w ramach handlu elektronicznego, mogą mieć zastosowanie ustawowe wymagania dostępności. Niezależnie od obowiązku prawnego niedostępny katalog ogranicza liczbę użytkowników i zwiększa ryzyko reklamacji.
Czy zgodność z WCAG 2.2 AA gwarantuje pełną dostępność?
Nie. WCAG określa mierzalne kryteria, ale nie zastępuje testów z użytkownikami ani oceny jakości treści. Strona może formalnie spełniać wiele kryteriów, a nadal używać niezrozumiałych nazw filtrów, chaotycznych komunikatów lub skomplikowanego formularza.
Czy wystarczy zainstalować wtyczkę dostępności?
Nie. Pasek pozwalający powiększyć tekst lub zmienić kontrast nie naprawi błędnej struktury nagłówków, nieopisanych pól, pułapki klawiaturowej ani niedostępnego autouzupełniania. Takie dodatki mogą pełnić funkcję pomocniczą, ale nie zastępują poprawnego kodu i treści.
Jak często wykonywać audyt?
Pełny audyt warto przeprowadzić przed uruchomieniem serwisu, po zmianie głównego szablonu oraz po wdrożeniu nowych funkcji. Automatyczne testy można uruchamiać przy każdym wdrożeniu. Ręczna kontrola kluczowych ścieżek powinna odbywać się co najmniej raz na kwartał oraz po każdej zmianie wyszukiwarki, filtrów, formularzy lub systemu płatności.
Czy trzeba zapewnić dostępność wszystkich dokumentów dodawanych przez firmy?
Jeżeli dokument jest niezbędny do skorzystania z usługi, jego niedostępność staje się realną barierą. PDF będący skanem bez warstwy tekstowej nie powinien być jedynym źródłem cennika, regulaminu lub warunków oferty. Najbezpieczniej opublikować najważniejsze informacje również jako poprawnie ustrukturyzowany HTML.
Od czego zacząć naprawę istniejącego katalogu?
Najpierw przejdź bez myszy trzy podstawowe ścieżki: wyszukanie firmy, otwarcie jej profilu oraz wysłanie formularza kontaktowego lub dodanie wpisu. Pierwszy do usunięcia jest błąd, który zatrzymuje użytkownika całkowicie — pułapka klawiaturowa, brak możliwości uruchomienia filtra, nieopisane pole albo formularz, którego nie da się wysłać. Dopiero po usunięciu blokad poprawiaj mniej krytyczne elementy wizualne i redakcyjne.
