CSStrona główna
Baza wiedzy

Proste wskazówki, które pomagają poprawić dostępność strony.

Zebrałam najczęstsze błędy wykrywane podczas analizy stron i wyjaśniłam, jak je naprawić.

Analiza WCAG

Krótkie odpowiedzi o sprawdzaniu dostępności i ograniczeniach testów automatycznych.

Analiza WCAG

Jak sprawdzić dostępność strony internetowej?

Dostępność strony najlepiej sprawdzać etapami: automatycznym skanem, krótką weryfikacją ręczną i listą poprawek do wdrożenia.

Problem

Sama ocena wizualna nie pokaże wielu barier. Strona może wyglądać poprawnie, ale mieć błędy w nagłówkach, etykietach formularzy, kontraście, opisach alternatywnych albo obsłudze klawiaturą.

Jak naprawić?

Zacznij od automatycznej analizy WCAG, przejrzyj najważniejsze wyniki i sprawdź ręcznie kluczowe elementy: formularze, menu, przyciski, kolejność nagłówków oraz widoczność fokusu.

Dlaczego to ważne

Takie błędy utrudniają korzystanie ze strony osobom z niepełnosprawnościami, ale wpływają też na użytkowników mobilnych, osoby starsze i wszystkich, którzy chcą szybko wykonać zadanie.

Dobry przykład

Automatyczny skan wskazuje błędy, a raport porządkuje je według priorytetu napraw.

Unikaj

Strona zostaje uznana za dostępną tylko dlatego, że wygląda dobrze na ekranie.

  • Sprawdź kontrast tekstu i przycisków.
  • Zweryfikuj teksty alternatywne obrazów.
  • Przejdź przez stronę samą klawiaturą.
  • Upewnij się, że formularze mają etykiety i czytelne komunikaty błędów.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport
Analiza WCAG

Co wykrywa analiza WCAG?

Analiza WCAG wskazuje typowe błędy dostępności, które można wykryć technicznie i uporządkować w raporcie z rekomendacjami.

Problem

Bez analizy trudno szybko ocenić, które elementy strony realnie blokują użytkowników i co powinno trafić do backlogu jako pierwsze.

Jak naprawić?

Wyniki analizy warto podzielić na obszary: teksty alternatywne, strukturę nagłówków, kontrast, formularze, linki, przyciski i nawigację.

Dlaczego to ważne

Lista błędów bez priorytetów bywa mało użyteczna. Raport pomaga oddzielić problemy kosmetyczne od barier, które wpływają na korzystanie ze strony, formularze i konwersję.

Dobry przykład

Raport pokazuje brak altów, błędy formularzy i niski kontrast wraz z rekomendacją kolejnych działań.

Unikaj

Surowy eksport błędów bez wyjaśnienia wpływu i kolejności napraw.

  • Sprawdź brakujące lub puste teksty alternatywne.
  • Zwróć uwagę na błędy hierarchii nagłówków.
  • Oceń kontrast tekstu, linków i przycisków.
  • Przejrzyj formularze, etykiety i komunikaty błędów.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport
Analiza WCAG

Czy automatyczny test WCAG wystarczy?

Automatyczny test WCAG jest dobrym początkiem, ale nie zastępuje pełnego audytu eksperckiego ani testów manualnych.

Problem

Narzędzia automatyczne wykrywają tylko część problemów. Nie zawsze ocenią sens tekstu alternatywnego, logiczną kolejność treści, jakość komunikatów ani realną wygodę obsługi strony.

Jak naprawić?

Traktuj automatyczny test jako szybki screening. Po nim zaplanuj ręczną weryfikację najważniejszych ścieżek użytkownika i poprawki opisane w raporcie.

Dlaczego to ważne

Wysoki wynik automatycznego testu nie oznacza automatycznie, że strona jest w pełni dostępna. Użytkownik może nadal napotkać bariery przy nawigacji, formularzu lub zrozumieniu treści.

Dobry przykład

Automatyczny skan wykrywa błędy techniczne, a zespół dodatkowo sprawdza formularz, menu i obsługę klawiaturą.

Unikaj

Wynik automatycznego testu jest traktowany jako pełny audyt WCAG.

  • Nie opieraj decyzji wyłącznie na wyniku procentowym.
  • Sprawdź ręcznie kluczowe podstrony i formularze.
  • Zweryfikuj, czy treści są zrozumiałe i logicznie uporządkowane.
  • Użyj raportu jako podstawy do backlogu poprawek.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport

Linki

Czytelne odnośniki, które mają sens bez dodatkowego kontekstu.

Linki

Jak tworzyć dostępne linki?

Osoba korzystająca z czytnika ekranu może przeglądać same linki bez reszty akapitu.

Dlaczego to ważne

Teksty typu „kliknij tutaj” są niejasne poza kontekstem. Użytkownik musi zgadywać, co otworzy się po aktywowaniu linku.

Jak poprawić

Nazwij link konkretnie: pobranie raportu, przejście do cennika, kontakt z zespołem lub opis usługi.

Dobry przykład

Przejdź do formularza kontaktowego

Unikaj

Kliknij tutaj

  • Sprawdź, czy sam tekst linku ma sens bez zdania wokół niego.
  • Unikaj kilku identycznych linków prowadzących w różne miejsca.
  • Nie ukrywaj ważnej akcji pod ogólnym tekstem typu „więcej”.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport

Obrazy

Alt teksty i grafiki dekoracyjne opisane właściwym sposobem.

Obrazy

Jak napisać dobry alt text?

Dobry alt tekst przekazuje informację, którą obraz wnosi do treści strony.

Dlaczego to ważne

Jeśli obraz jest istotny, brak opisu odbiera część informacji. Jeśli jest dekoracyjny, zbyt długi opis tylko przeszkadza.

Jak poprawić

Opisz znaczenie obrazu w jednym krótkim zdaniu albo zostaw pusty alt, gdy grafika jest dekoracyjna.

Dobry przykład

Kobieta podpisuje umowę przy biurku

Unikaj

image-23-final.png

  • Nie zaczynaj od słów „obraz przedstawia”, jeśli nie jest to potrzebne.
  • Opisz funkcję grafiki, gdy grafika jest linkiem lub przyciskiem.
  • Dla dekoracji użyj pustego altu, żeby czytnik ekranu ją pominął.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport

Struktura

Nagłówki i układ treści pomagające szybko zrozumieć stronę.

Struktura

Jak poprawnie używać nagłówków na stronie?

Nagłówki pomagają skanować stronę wzrokiem i technologiami asystującymi.

Dlaczego to ważne

Gdy poziomy nagłówków są przypadkowe, trudniej zrozumieć relacje między sekcjami i szybko przejść do właściwego fragmentu.

Jak poprawić

Używaj jednego H1 dla głównego tematu, a kolejne sekcje porządkuj logicznie przez H2 i H3.

Dobry przykład

H1: Analiza dostępności strony, H2: Zakres raportu, H3: Lista problemów

Unikaj

H1 użyty kilka razy tylko dlatego, że ma większy rozmiar

  • Nie wybieraj poziomu nagłówka na podstawie wyglądu.
  • Nie pomijaj poziomów bez powodu, na przykład z H2 od razu do H5.
  • Nadaj nagłówkom konkretne nazwy zamiast ogólnych etykiet.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport

Formularze

Pola, etykiety i komunikaty błędów zrozumiałe dla każdego.

Formularze

Jak tworzyć dostępne etykiety formularzy?

Placeholder nie zastępuje etykiety, bo znika po wpisaniu wartości i bywa słabo odczytywany.

Dlaczego to ważne

Bez etykiety użytkownik może nie wiedzieć, czego dotyczy pole. To szczególnie problematyczne przy błędach i autouzupełnianiu.

Jak poprawić

Dodaj widoczną etykietę albo poprawne powiązanie techniczne, gdy projekt wymaga etykiety ukrytej wizualnie.

Dobry przykład

Etykieta: Adres e-mail, placeholder: jan@example.com

Unikaj

Samo pole z placeholderem „E-mail”

  • Powiąż etykietę z polem przez for/id albo równoważny mechanizm komponentu.
  • Pisz komunikaty błędów obok pola, którego dotyczą.
  • Nie opieraj znaczenia pola wyłącznie na kolorze lub ikonie.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport

Czytelność

Kontrast, język i mikrotreści, które nie utrudniają działania.

Czytelność

Jak zadbać o kontrast przycisków?

Kontrast tekstu i tła powinien działać zanim użytkownik najedzie kursorem albo aktywuje fokus.

Dlaczego to ważne

Słaby kontrast spowalnia decyzję, obniża zaufanie i realnie blokuje część użytkowników przy jasnym świetle lub słabszym wzroku.

Jak poprawić

Sprawdź kontrast tekstu, tła i stanu fokusu. Szczególnie pilnuj drugorzędnych przycisków i linków w stopce.

Dobry przykład

Ciemny tekst na jasnym tle z wyraźną ramką i widocznym fokusem

Unikaj

Jasnoszary tekst na białym przycisku bez obramowania

  • Testuj stan normalny, hover, focus i disabled.
  • Nie używaj samego koloru do odróżnienia aktywnej akcji.
  • Sprawdź przyciski na mobile, gdzie nie ma hovera.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport

Dostępne treści i multimedia

Napisy, transkrypcje i materiały wideo zrozumiałe także bez dźwięku.

Dostępne treści i multimedia

Jak tworzyć czytelne napisy?

Napisy pomagają tylko wtedy, gdy da się je przeczytać w całym filmie, także na jasnym, ruchomym lub bardzo szczegółowym tle.

Problem

Jasny tekst położony bezpośrednio na jasnym fragmencie wideo, gradient albo dynamiczne tło mogą sprawić, że napisy znikają w trakcie sceny. Problem często pojawia się, gdy napisy są nakładane bez tła lub obrysu.

Jak naprawić?

Zapewnij odpowiedni kontrast napisów względem obrazu przez ciemne półprzezroczyste tło, obrys, cień lub zmianę położenia napisów. Sprawdź czytelność na kilku klatkach, nie tylko na początku filmu.

Dlaczego to ważne

Nieczytelne napisy wykluczają osoby niesłyszące, słabosłyszące, oglądające bez dźwięku albo w głośnym miejscu. Użytkownik powinien rozumieć dialog i ważne dźwięki bez zgadywania treści z obrazu.

Dobry przykład

Białe napisy na ciemnym półprzezroczystym pasku, czytelne także na jasnych scenach.

Unikaj

Białe napisy bez tła na jasnym ubraniu, niebie albo szybko zmieniającym się kadrze.

  • Nie nakładaj jasnego tekstu bezpośrednio na jasne fragmenty wideo.
  • Uważaj na gradienty, bo mogą poprawiać kontrast tylko w części kadru.
  • Testuj napisy na dynamicznych scenach, planszach i ujęciach z dużą liczbą detali.
  • Zachowaj kontrast co najmniej 4.5:1 dla zwykłego tekstu napisów.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport
Dostępne treści i multimedia

Dlaczego automatyczne napisy warto sprawdzać?

Automatyczne napisy są dobrym punktem startu, ale bez korekty mogą przekłamywać nazwy, liczby, skróty i sens wypowiedzi.

Problem

System automatycznego rozpoznawania mowy może pominąć słowa, źle podzielić zdania albo nie oznaczyć ważnych dźwięków, takich jak śmiech, alarm czy muzyka.

Jak naprawić?

Po wygenerowaniu napisów obejrzyj materiał z wyciszonym dźwiękiem, popraw treść, interpunkcję, synchronizację i opisy istotnych dźwięków.

Dlaczego to ważne

Błędne napisy zmieniają znaczenie treści. Dla osób korzystających z napisów jako głównego źródła informacji taki błąd jest tak samo istotny jak źle napisany tekst na stronie.

Dobry przykład

Napisy po korekcie zawierają poprawne nazwy własne, interpunkcję i informację: [dźwięk alarmu].

Unikaj

Automatyczne napisy opublikowane bez sprawdzenia, z błędnymi nazwami produktu i opóźnioną synchronizacją.

  • Sprawdź nazwy własne, liczby, adresy i specjalistyczne terminy.
  • Popraw podział zdań, żeby tekst był łatwy do śledzenia.
  • Dodaj opisy ważnych dźwięków, gdy wpływają na zrozumienie sceny.
  • Zweryfikuj synchronizację napisów z wypowiedzią.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport
Dostępne treści i multimedia

Jak dobrać kontrast napisów?

Kontrast napisów trzeba oceniać względem obrazu, który stale się zmienia, dlatego bezpieczniejsze jest stałe tło pod tekstem niż sam kolor liter.

Problem

Napisy mogą wyglądać dobrze na jednej klatce, ale po zmianie sceny trafić na podobny kolor tła. Jasne litery na jasnym obrazie albo ciemne litery na ciemnym obrazie szybko stają się nieczytelne.

Jak naprawić?

Użyj koloru tekstu i tła, które utrzymują kontrast w całym materiale. Najczęściej sprawdza się jasny tekst na ciemnym półprzezroczystym tle albo ciemny tekst na jasnym pasku.

Dlaczego to ważne

Stały kontrast skraca czas czytania i zmniejsza zmęczenie. To ważne zwłaszcza na telefonach, w mocnym świetle i przy dłuższych materiałach.

Dobry przykład

Napisy mają stały pasek tła i zachowują kontrast niezależnie od sceny.

Unikaj

Napisy polegają wyłącznie na białym kolorze liter, bez tła, obrysu ani cienia.

  • Sprawdź kontrast na najjaśniejszych i najciemniejszych scenach.
  • Nie zakładaj, że cień tekstu rozwiąże problem na każdym tle.
  • Unikaj cienkich krojów pisma i zbyt małego rozmiaru napisów.
  • Nie umieszczaj napisów na elementach, które szybko się poruszają.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport
Dostępne treści i multimedia

Kiedy warto dodać transkrypcję?

Transkrypcja uzupełnia napisy wtedy, gdy użytkownik chce szybko przeszukać, zacytować lub przeczytać treść materiału bez odtwarzania wideo.

Problem

Samo wideo utrudnia dostęp do informacji osobom, które nie mogą go odtwórzyć, wolą czytać albo potrzebują wrócić do konkretnego fragmentu.

Jak naprawić?

Dodaj pod filmem tekstową wersję wypowiedzi i ważnych informacji dźwiękowych. Przy dłuższych materiałach podziel transkrypcję nagłówkami lub znacznikami czasu.

Dlaczego to ważne

Transkrypcja poprawia dostępność, ułatwia skanowanie treści i pomaga osobom korzystającym z czytników ekranu, wolnego internetu albo środowiska, w którym nie mogą oglądać filmu.

Dobry przykład

Pod nagraniem webinaru znajduje się transkrypcja z nagłówkami tematów i opisami ważnych dźwięków.

Unikaj

Jedyną wersją treści jest film osadzony na stronie, bez napisów i bez transkrypcji.

  • Dodaj transkrypcję do webinarów, wywiadów, poradników i materiałów szkoleniowych.
  • Uwzględnij informacje wizualne lub dźwiękowe, jeśli są ważne dla sensu treści.
  • Podziel dłuższą transkrypcję na krótkie sekcje.
  • Umieść transkrypcję blisko odtwarzacza wideo lub audio.

Chcesz sprawdzić swoją stronę?

Zamów raport dostępności z listą błędów WCAG i rekomendacjami do poprawy.

Zamów raport