Baza wiedzy

Baza wiedzy o dostępności WCAG

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

Sprawdź swoją stronę Zobacz raport Baza dla developera

Analiza WCAG

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

Analiza WCAG

Jak sprawdzić dostępność strony internetowej zgodnie z WCAG?

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 strony internetowej?

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 do audytu dostępności?

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 zgodne z WCAG?

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

Linki

Jak oznaczać linki, żeby nie polegały tylko na kolorze?

Użytkownik powinien móc rozpoznać link bez konieczności rozróżniania kolorów. Jeśli link różni się od zwykłego tekstu wyłącznie kolorem, część użytkowników może go nie zauważyć.

Problem

Link wyróżniony wyłącznie kolorem może być trudny do zauważenia dla osób z zaburzeniami rozpoznawania kolorów lub korzystających z ekranów o słabej jakości. Kolor nie powinien być jedynym sposobem informowania o tym, że element jest interaktywny.

Jak naprawić?

Nie polegaj wyłącznie na kolorze. Stosuj dodatkowe wyróżnienie, na przykład podkreślenie, oraz wyraźne stany hover i focus.

Dlaczego to ważne

Użytkownik powinien bez zastanawiania się wiedzieć, które elementy na stronie są klikalne. Dobrze oznaczone linki poprawiają użyteczność i wspierają zgodność z WCAG.

Dobry przykład

Link jest oznaczony kolorem oraz dodatkowym wyróżnieniem, np. podkreśleniem.

Unikaj

Link jest oznaczony wyłącznie innym kolorem niż otaczający tekst.

Nie polegaj wyłącznie na kolorze.
Stosuj podkreślenie dla linków w treści.
Zapewnij wyraźny stan hover i focus.
Upewnij się, że użytkownik może łatwo odróżnić link od zwykłego tekstu.

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 tekst alternatywny alt dla obrazka?

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 H1-H6 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 zgodne z WCAG?

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

Formularze

Jak powiązać etykietę label z polem formularza?

Każde pole formularza powinno mieć etykietę połączoną z polem technicznie, najczęściej przez parę label for i id.

Problem

Widoczny tekst obok pola nie wystarczy, jeśli nie jest programowo powiązany z inputem, selectem albo textarea. Czytnik ekranu może wtedy odczytać samo „pole edycji” bez informacji, czego dotyczy.

Jak naprawić?

Nadaj polu unikalny id i użyj label z atrybutem for wskazującym dokładnie ten id. W React użyj htmlFor. Placeholder może być podpowiedzią, ale nie zastępuje etykiety.

Dlaczego to ważne

Powiązana etykieta pomaga użytkownikom czytników ekranu, osobom korzystającym z autouzupełniania oraz wszystkim, którzy klikają tekst etykiety, żeby aktywować pole.

Dobry przykład

Etykieta „Adres e-mail” ma for="email", a pole ma id="email".

Unikaj

Obok pola widać tekst „E-mail”, ale input nie ma id albo label nie wskazuje tego pola.

Sprawdź, czy każde input, select i textarea ma powiązaną etykietę.
Upewnij się, że wartość for jest identyczna z id pola.
Nie używaj placeholdera jako jedynej nazwy pola.
Dla grup radio i checkbox dodaj fieldset oraz legend, gdy pola tworzą jedną decyzję.

Chcesz sprawdzić swoją stronę?

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

Zamów raport

Formularze

Jak oznaczyć pola wymagane w formularzu zgodnie z WCAG?

Jeśli pole jest wymagane, informacja o tym musi być dostępna w kodzie, nie tylko pokazana wizualnie gwiazdką albo kolorem.

Problem

Sama gwiazdka przy etykiecie może być niewidoczna dla technologii asystujących albo niezrozumiała bez legendy. Użytkownik dowiaduje się o wymaganiu dopiero po błędzie.

Jak naprawić?

Dla natywnych pól dodaj atrybut required. Jeśli używasz komponentu niestandardowego z rolą ARIA, dodaj aria-required="true" i zadbaj o czytelny komunikat błędu.

Dlaczego to ważne

Programowe oznaczenie pola wymaganego zmniejsza liczbę błędów w formularzu i pomaga użytkownikowi poprawnie przejść przez zakup, rejestrację lub kontakt.

Dobry przykład

Pole „Adres e-mail” ma required, a gwiazdka w etykiecie jest ukryta przed czytnikiem przez aria-hidden="true".

Unikaj

Pole wygląda na wymagane, bo ma czerwoną gwiazdkę, ale w kodzie nie ma required ani aria-required.

Dodaj required do wymaganych input, select i textarea.
Dla własnych kontrolek użyj aria-required="true".
Wyjaśnij znaczenie gwiazdki, jeśli pokazujesz ją wizualnie.
Po błędzie połącz komunikat z polem przez aria-describedby.

Chcesz sprawdzić swoją stronę?

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

Zamów raport

Formularze

Jak dodać aria-label do przycisku z ikoną?

Przycisk z samą ikoną musi mieć nazwę dostępną dla czytników ekranu, na przykład przez aria-label albo aria-labelledby.

Problem

Ikona kosza, lupy albo zamknięcia okna może być oczywista wzrokowo, ale bez dostępnej nazwy czytnik ekranu odczyta ją jako nieopisany przycisk.

Jak naprawić?

Jeśli przycisk ma tylko ikonę, dodaj aria-label opisujące akcję. Samą ikonę oznacz aria-hidden="true", żeby nie była odczytywana jako dodatkowa treść.

Dlaczego to ważne

Użytkownik musi wiedzieć, co stanie się po aktywowaniu przycisku. Brak nazwy dostępnej blokuje kluczowe akcje, takie jak wyszukiwanie, usunięcie produktu lub zamknięcie modala.

Dobry przykład

Przycisk z ikoną kosza ma aria-label="Usuń produkt z koszyka".

Unikaj

Przycisk zawiera tylko ikonę SVG bez tekstu i bez aria-label.

Sprawdź wszystkie przyciski z samą ikoną: menu, lupa, kosz, zamknij, edytuj.
Nazwa opisuje akcję, nie wygląd ikony.
Ukryj dekoracyjne SVG przez aria-hidden="true".
Nie polegaj wyłącznie na title jako nazwie przycisku.

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ść

Czcionki szeryfowe i bezszeryfowe: które są czytelniejsze na stronie?

Kroje szeryfowe mają drobne zakończenia liter, a bezszeryfowe są prostsze i zwykle lepiej sprawdzają się w interfejsach oraz krótkich komunikatach.

Problem

Wybór kroju tylko ze względu na styl marki może pogorszyć czytelność, szczególnie w małych rozmiarach, na telefonie lub przy dłuższych formularzach.

Jak naprawić?

Do interfejsów, formularzy, przycisków i komunikatów wybieraj proste kroje bezszeryfowe. Kroje szeryfowe stosuj ostrożnie w dłuższych treściach redakcyjnych, jeśli mają dobrą czytelność ekranową i odpowiedni rozmiar.

Dlaczego to ważne

Użytkownik powinien szybko rozpoznawać litery i skanować tekst bez wysiłku. Zbyt dekoracyjny krój, słaby odstęp między literami albo mała różnica między znakami może spowolnić czytanie.

Dobry przykład

Tekst formularza i przycisków używa prostego kroju bezszeryfowego z czytelnymi znakami.

Unikaj

Mały tekst pomocniczy zapisany dekoracyjnym krojem szeryfowym lub ozdobnym.

Sprawdź krój w małym rozmiarze na telefonie.
Unikaj bardzo cienkich, ozdobnych i skondensowanych krojów w UI.
Zwróć uwagę, czy litery I, l, 1 oraz O i 0 są łatwe do odróżnienia.
Nie wybieraj kroju wyłącznie ze względu na efekt wizualny.

Chcesz sprawdzić swoją stronę?

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

Zamów raport

Czytelność

Jakie czcionki są dostępne i czytelne na stronie internetowej?

Dostępna czcionka to taka, którą da się szybko odczytać w różnych rozmiarach, na różnych ekranach i przy powiększeniu tekstu.

Problem

Sama popularność fontu nie gwarantuje dostępności. Cienkie odmiany, ozdobne litery, zbyt mały rozmiar i niska wysokość x mogą utrudniać czytanie.

Jak naprawić?

Wybieraj kroje ekranowe z wyraźnymi znakami, dużą rodziną wag i dobrą obsługą polskich znaków. Bezpieczne przykłady do UI to systemowe sans-serif, np. Arial, Helvetica, Segoe UI, Roboto, Inter, Noto Sans, Open Sans i Source Sans 3. Dla dłuższych treści można rozważyć czytelne serif, np. Georgia lub Merriweather, ale testuj rozmiar i kontrast.

Dlaczego to ważne

Czytelny krój pomaga osobom słabowidzącym, z dysleksją, w starszym wieku oraz użytkownikom mobilnym. W praktyce ważniejsze są parametry kroju i sposób użycia niż sama nazwa fontu.

Dobry przykład

Inter, Segoe UI lub Noto Sans użyte w rozmiarze minimum 16 px, z odpowiednim interliniowaniem i kontrastem.

Unikaj

Cienki font dekoracyjny użyty w całym formularzu, bez sprawdzenia polskich znaków i powiększenia.

Sprawdź polskie znaki: ą, ć, ę, ł, ń, ó, ś, ź, ż.
Testuj tekst przy powiększeniu do 200%.
Używaj regularnej wagi dla długich akapitów, nie samego light.
Zapewnij odpowiednią interlinię i wygodną długość wiersza.
Nie zamieniaj tekstu na obraz tylko po to, żeby zachować krój.

Chcesz sprawdzić swoją stronę?

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

Zamów raport

Czytelność

Jaki kontrast przycisków spełnia wymagania WCAG?

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

WCAG i prosty język

Jak łączyć zrozumiałe treści z technicznymi wymaganiami dostępności.

WCAG i prosty język

Prosty język a WCAG 2.1 i 2.2 w bankowości

Jak prosty język wspiera dostępność cyfrową w bankach i dlaczego nie zastępuje technicznych kryteriów WCAG.

Problem

Bank może spełniać wybrane wymogi WCAG technicznie, ale nadal utrudniać użytkownikowi decyzję, jeśli regulaminy, instrukcje albo komunikaty są napisane trudnym językiem.

Jak naprawić?

Łącz prosty język z analizą WCAG: sprawdzaj treść, strukturę nagłówków, linki, dostępne formularze, komunikaty błędów, kontrast i obsługę klawiaturą.

Dlaczego to ważne

Dostępność cyfrowa w bankowości dotyczy nie tylko kodu i interfejsu, ale też tego, czy użytkownik rozumie konsekwencje decyzji finansowej i może samodzielnie przejść przez proces.

Dobry przykład

Formularz kredytowy ma jasne etykiety, zrozumiałe komunikaty błędów i prostą instrukcję kolejnego kroku.

Unikaj

Proces jest technicznie poprawny, ale użytkownik dostaje formalny komunikat, z którego nie wynika, co ma zrobić dalej.

Sprawdź, czy prosty język w banku wspiera kluczowe decyzje użytkownika.
Porównaj treści z kryteriami WCAG 2.1 i 2.2 oraz wymaganiami procesu.
Zweryfikuj linki, nagłówki, formularze i teksty alternatywne obrazów.
Upewnij się, że komunikaty błędów są zrozumiałe i dostępne technicznie.

Czytaj cały wpis

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 do filmów?

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 trzeba sprawdzać automatyczne napisy do filmów?

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 do filmów zgodnie z WCAG?

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 dodać transkrypcję audio lub wideo?

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