Dostępność strony internetowej: prosta checklista bez urzędniczego bełkotu

Dostępność strony internetowej brzmi trochę jak temat dla ludzi, którzy piją kawę z kubka „WCAG 2.1” i rozmawiają wyłącznie skrótami. Spokojnie. W małej firmie chodzi przede wszystkim o to, żeby człowiek mógł wejść na stronę, przeczytać treść, znaleźć menu, wysłać formularz albo zrobić zakupy — niezależnie od tego, czy używa myszy, klawiatury, telefonu, powiększenia czy technologii wspomagającej.

Poniżej dostajesz checklistę pierwszego poziomu. Możesz przejść ją samodzielnie i wyłapać bariery, które widać gołym okiem. Ważne: to nie jest certyfikat, audyt prawny ani gwarancja pełnej zgodności. Dostępność obejmuje kod, interfejs, nawigację, treści i multimedia. Jedno poprawione zdjęcie nie naprawi całej strony. Ale od czegoś trzeba zacząć.

Dostępność strony — o co tu w ogóle chodzi?

Najprościej mówiąc, dostępna strona nie stawia użytkownikowi niepotrzebnych przeszkód. Da się ją obsłużyć, zrozumieć i odebrać jej treści na różne sposoby. Dotyczy to zarówno strony usługowej, jak i sklepu online, formularza kontaktowego, artykułów, zdjęć oraz filmów.

Temat można uporządkować czterema hasłami: funkcjonalność, kompatybilność, postrzegalność i zrozumiałość. Czy element działa? Czy współpracuje z różnymi sposobami obsługi? Czy użytkownik może odebrać informację? Czy wie, co się dzieje i co ma zrobić? Te pytania są praktyczniejsze niż samo przerzucanie się skrótami.

Dostępność to nie tylko kod

Problem może tkwić w kodzie, ale równie dobrze w niejasnym menu, źle opisanym przycisku, chaotycznych nagłówkach, formularzu bez etykiet albo filmie bez napisów. Osoba korzystająca z czytnika ekranu, klawiatury, nawigacji głosowej czy powiększenia może widzieć stronę zupełnie inaczej niż ktoś używający standardowo myszy.

Dlatego sprawdzaj całość. Dostępność strony internetowej to nie pojedynczy magiczny przełącznik. Bardziej przypomina porządek w lokalu: drzwi mogą się otwierać, ale jeśli dalej stoi karton po lodówce, problem nadal istnieje.

Szybki test: czy da się korzystać ze strony bez myszy?

To jeden z najprostszych testów, które możesz zrobić od ręki. Otwórz stronę na komputerze i odłóż mysz. Kliknij w obszar strony, a potem używaj klawiszy Tab i Shift plus Tab. Przechodź po menu, linkach, przyciskach i formularzu.

Obserwuj, czy widzisz, gdzie aktualnie jesteś. Ten zaznaczony element to fokus. Powinien być wyraźny i poruszać się w logicznej kolejności. Jeśli nagle znika, przeskakuje w dziwne miejsce albo nie da się dotrzeć do ważnego przycisku, masz konkretną barierę do zapisania.

Test Tab, fokus i pułapki

Przejdź klawiszem Tab przez główne menu.
Uruchom linki i przyciski klawiszem Enter.
Sprawdź, czy można otworzyć i zamknąć menu bez myszy.
Jeśli pojawia się okno lub rozwijany element, sprawdź, czy da się go zamknąć klawiszem Escape.
Upewnij się, że nie wpadasz w pułapkę klawiaturową, z której nie ma wyjścia.

To praktyczny filtr pierwszego poziomu, nie pełny audyt dostępności. Nie wykryje wszystkich problemów z czytnikiem ekranu, dynamicznymi komponentami, dokumentami czy kodem, ale szybko pokaże, czy podstawowa obsługa nie leży i nie macha białą flagą.

Teksty, nagłówki i linki — mniej chaosu, więcej sensu

Dostępność to także sposób pisania. Treść powinna mieć logiczną strukturę: nagłówki oddzielają tematy, akapity nie ciągną się bez końca, a linki mówią, dokąd prowadzą. „Kliknij tutaj” bywa zagadką. „Zobacz ofertę usług” daje już człowiekowi jakiś trop.

Pisz prosto i konkretnie. Nie chodzi o infantylizowanie tekstu, tylko o to, żeby odbiorca nie musiał rozbrajać zdania jak starego budzika. Ważnej informacji nie przekazuj wyłącznie kolorem. Sam czerwony tekst albo sama zielona obwódka mogą nie wystarczyć.

Czytelnik nie powinien składać strony jak mebli bez instrukcji

Sprawdź, czy nagłówki rzeczywiście oddzielają kolejne części. Zobacz, czy nazwy przycisków i pól są jasne bez zgadywania. Powiększ tekst i sprawdź, czy nadal można czytać treść oraz używać przycisków. Jeśli po powiększeniu wszystko się nakłada, znika albo wymaga przewijania w kilku kierunkach naraz, wpisz to na listę poprawek.

Zdjęcia i grafiki: tekst alternatywny bez lania wody

Tekst alternatywny zdjęcia ma przekazać jego znaczenie w konkretnym kontekście. Nie jest podpisem pod fotografią i nie powinien być przypadkowym zlepkiem słów. Zamiast opisywać każdy piksel, zastanów się: jaką informację użytkownik powinien dostać, jeśli nie zobaczy obrazu?

Zdjęcie produktu, mapa, wykres i fotografia dekoracyjna mogą wymagać zupełnie innego podejścia. Opis powinien być zwięzły, ale sensowny. Nie kopiuj bezmyślnie tekstu znajdującego się obok, jeśli niczego to nie wnosi.

Opisuj sens, nie każdy piksel

Jeśli grafika pełni funkcję linku albo przycisku, opisz przede wszystkim działanie. Użytkownik powinien wiedzieć, dokąd przejdzie lub co uruchomi. Przy grafice dekoracyjnej przypadkowy opis może tylko zaśmiecić odbiór strony.

Tekst alternatywny naprawdę ma znaczenie, ale samo uzupełnienie pola alt nie oznacza, że cała strona jest dostępna. To jeden element większej układanki.

Film na stronie bez dźwięku? Napisy robią robotę

Film bez napisów może być niedostępny dla osób niesłyszących i słabosłyszących. Napisy oraz transkrypcje pomagają odebrać treść audio-wideo, a przy okazji przydają się każdemu, kto ogląda materiał bez dźwięku. Tak, nawet osobie siedzącej w pociągu i udającej, że nie ogląda reklamy konkurencji.

Napisy powinny obejmować dialogi lub lektora. Jeśli ważne dla przekazu są dźwięki tła, przydatne mogą być napisy rozszerzone, które je opisują. Automatycznie wygenerowana wersja jest punktem wyjścia, nie wyrokiem jakości.

Co sprawdzić przed publikacją filmu

Odtwórz film bez dźwięku.
Sprawdź, czy napisy przekazują dialogi lub lektora.
Zweryfikuj pisownię, zgodność z nagraniem i ważne dźwięki.
Jeśli film niesie istotny przekaz, zaplanuj odpowiednią alternatywę tekstową.

Napisy nie zapewniają automatycznie pełnej dostępności materiału. Trzeba je sprawdzić przed publikacją, bo automat potrafi czasem zrobić z fachowego terminu kulinarną fantazję.

Formularz kontaktowy i sklep: sprawdź, zanim klient odbije się od ściany

Formularz kontaktowy, zapytanie ofertowe i checkout to miejsca, w których dostępność spotyka się z codziennym działaniem firmy. Każde pole powinno mieć zrozumiałą etykietę. Użytkownik powinien wiedzieć, co wpisać, w jakim formacie i czy pole jest obowiązkowe.

Nie polegaj wyłącznie na kolorze ani samej gwiazdce. Po wysłaniu błędnego formularza komunikat powinien jasno wskazywać problem i sposób jego poprawy. „Wystąpił błąd” to komunikat mniej pomocny niż instrukcja obsługi bez połowy stron.

Formularz kontaktowy: etykiety, błędy, poprawki

Sprawdź, czy każde pole ma widoczną i zrozumiałą etykietę.
Spróbuj wysłać formularz z pustymi polami.
Wpisz dane w błędnym formacie.
Zobacz, czy komunikat wskazuje konkretne pole.
Sprawdź, czy wiadomo, jak błąd poprawić.
Przejdź formularz wyłącznie klawiaturą.

Powtórz test na komputerze i telefonie. Inaczej działa się na dużym ekranie, inaczej z klawiaturą ekranową i małym widokiem. Warto też pamiętać o alternatywnej formie kontaktu, jeśli formularz akurat postanowi urządzić sobie dzień wolny.

Telefon, koszyk i checkout

Na telefonie otwórz menu, przejdź do wybranej podstrony i sprawdź formularz. W sklepie przejdź ścieżkę od produktu przez koszyk do płatności. Zwróć uwagę na elementy zewnętrzne, takie jak moduły płatności i osadzone treści — również one mogą powodować problemy.

W przypadku usług handlu elektronicznego zakres obowiązków zależy od rodzaju usługi i modelu działalności. Polski Akt o Dostępności obowiązuje od 28 czerwca 2025 r., ale nie każdą małą firmę można wrzucić do jednego worka. Konkretna sytuacja wymaga indywidualnej oceny, a ten artykuł nie zastępuje porady prawnej.

Kiedy wystarczy szybka poprawka, a kiedy potrzebny jest audyt?

Jeśli znalazłeś brakujące opisy grafik, niejasne etykiety, problemy z komunikatami albo podstawową przeszkodę w obsłudze klawiaturą, spisz bariery i zacznij od uporządkowania listy. Część zmian dotyczy treści i można je przygotować bez przebudowy całej strony.

Osobę od stron internetowych warto zawołać, gdy problem dotyczy kodu, całej nawigacji, wielu podstron, formularzy, checkoutu, integracji, płatności, wersji mobilnej albo zewnętrznych komponentów. Profesjonalny przegląd jest szczególnie rozsądny przy sklepie przyjmującym zamówienia, stronie podmiotu publicznego lub serwisie o znaczeniu formalnym.

Lista zmian czy większy remont?

Oddziel problemy treściowe od technicznych. Zapisz konkretnie: „fokus znika w menu”, „formularz nie wyjaśnia błędu”, „film nie ma sprawdzonych napisów”, „na telefonie nie da się przejść koszyka”. Taka lista jest znacznie bardziej użyteczna niż ogólne „strona jest niedostępna”.

Checklista pomaga znaleźć bariery. Poprawki usuwają wskazane problemy. Pełny audyt wymaga szerszej analizy serwisu, jego kodu, treści, integracji i komponentów. Po zmianach trzeba ponownie testować stronę, bo dostępność wymaga utrzymania, a nie jednorazowego machnięcia różdżką.

Checklista do skopiowania

Menu i strona działają z klawiatury.
Fokus jest widoczny i porusza się logicznie.
Nie ma pułapki klawiaturowej.
Nagłówki, teksty i linki są logiczne oraz zrozumiałe.
Ważna informacja nie jest przekazana wyłącznie kolorem.
Grafiki mają sensowne opisy alternatywne dopasowane do kontekstu.
Grafiki pełniące funkcję linku lub przycisku opisują działanie.
Filmy mają napisy albo odpowiednią alternatywę tekstową.
Napisy zostały sprawdzone pod kątem treści i ważnych dźwięków.
Formularze mają etykiety, informacje o obowiązkowości i wymaganym formacie.
Komunikaty błędów mówią, co jest nie tak i jak to poprawić.
Strona działa na telefonie.
W sklepie można przejść od produktu przez koszyk do płatności.

Odhaczenie wszystkich punktów nie gwarantuje zgodności z WCAG, ustawą ani Polskim Aktem o Dostępności. To rozsądny filtr pierwszego poziomu, który pomaga zobaczyć, gdzie użytkownik może odbić się od cyfrowej ściany.

Dostępność strony internetowej obejmuje całość doświadczenia: kod, klawiaturę, menu, formularze, teksty, zdjęcia, filmy i telefon. Zacznij od checklisty, zapisz bariery i oceń ich skalę. Jeśli problem dotyczy kodu, sklepu, płatności, wielu podstron albo złożonych integracji, potrzebny może być techniczny przegląd. W przypadku podmiotu publicznego lub usług handlu elektronicznego trzeba dodatkowo indywidualnie ocenić zakres obowiązków. Napisz do Szwagra i opowiedz, czego potrzebujesz — strony, grafiki, filmu albo tekstów.