Be digitally accessible for yourself and others. Implement WCAG.

1. Postrzegalność

Postrzegalność to pierwsza zasada dostępności WCAG. Mówi ona, że wszystkie informacje i elementy na stronie internetowej muszą być przedstawione w taki sposób, aby użytkownicy mogli je zauważyć — niezależnie od tego, czy patrzą na ekran, słuchają treści przez czytnik ekranu, czy korzystają z innych technologii wspomagających.

Strona powinna być zaprojektowana tak, aby nie opierać się tylko na jednym zmyśle, na przykład na wzroku.

Jeśli więc na stronie znajduje się obrazek, należy dodać do niego opis, który będzie odczytany przez czytnik ekranu. Jeśli pojawia się film z mówioną treścią, dobrze jest dodać napisy, żeby osoba niesłysząca mogła zrozumieć, co zostało powiedziane. Kolory również nie powinny być jedynym sposobem przekazywania informacji — dla osoby, która nie rozróżnia barw, taka informacja mogłaby być niedostępna.

Postrzegalność oznacza więc, że wszystkie treści muszą być dostępne w różnych formach, aby każdy użytkownik — niezależnie od swoich ograniczeń — mógł je zauważyć i zrozumieć.

1.1 Alternatywa tekstowa

Alternatywa tekstowa oznacza, że każda treść na stronie, która nie jest tekstem — czyli na przykład obrazek, wykres, ikona, przycisk z grafiką czy nagranie audio — powinna mieć swój odpowiednik w postaci tekstu.

Chodzi o to, aby osoba, która nie widzi albo nie słyszy tej treści, mogła i tak dowiedzieć się, co tam się znajduje i jaki to ma sens. Najczęściej stosuje się do tego atrybut alt przy obrazkach. Dzięki temu czytnik ekranu może przeczytać, co przedstawia grafika.

Jeśli obrazek jest tylko dekoracją i nie niesie ze sobą żadnej informacji, można użyć pustego opisu, czyli alt="", aby czytnik go pominął i nie rozpraszał użytkownika. Podobnie, jeśli jakiś przycisk zawiera tylko ikonę (np. krzyżyk zamykający okno), powinien mieć tekstowy opis, który będzie dostępny dla czytnika ekranu, na przykład za pomocą aria-label.

Zasada ta jest bardzo ważna, bo bez takich opisów osoby niewidome lub słabowidzące nie będą w stanie zrozumieć, co dzieje się na stronie. Alternatywy tekstowe pozwalają im w pełni korzystać z internetu — wiedzieć, co klikają, co oglądają i co czytają, nawet jeśli nie widzą tego bezpośrednio.

1.1.1 Treść nietekstowa - A

Treść nietekstowa mówi o tym, że każda informacja, która nie jest tekstem — na przykład zdjęcie, grafika, ikona, wykres, animacja, formularz w formie graficznej czy dźwięk — musi mieć swoją tekstową wersję, która przekazuje ten sam sens. Chodzi o to, aby osoby, które nie widzą albo nie są w stanie odczytać obrazu lub usłyszeć dźwięku, mogły i tak zrozumieć, co jest na stronie.

Najczęściej robi się to przez dodanie opisu do obrazka w atrybucie alt, czyli np. <img src="logo.png" alt="Logo firmy">. Taki tekst jest niewidoczny dla większości użytkowników, ale czytniki ekranu potrafią go odczytać. Jeśli obrazek jest tylko ozdobą (na przykład ramka albo tło), to powinien mieć pusty opis alt="", żeby nie rozpraszać niepotrzebnie osób korzystających z technologii wspomagających.

Ten punkt dotyczy też innych elementów, które nie zawierają tekstu, ale mają jakieś znaczenie — na przykład przycisk z samą ikoną. Wtedy warto użyć aria-label, czyli ukrytego tekstu, który będzie dostępny dla czytnika ekranu.
Przykład: przycisk zamykania okna może wyglądać jak krzyżyk, ale powinien mieć coś takiego: <button aria-label="Zamknij"><img src="x.svg" alt=""></button>.

Celem tego punktu jest to, żeby każda osoba — niezależnie od tego, czy widzi stronę, czy jej słucha — mogła dowiedzieć się wszystkiego, co ważne, i swobodnie korzystać z treści.

1.2 Multimedia

Multimedia dotyczy wszystkich treści opartych na czasie, czyli takich, które mają dźwięk, obraz w ruchu lub jedno i drugie razem — na przykład filmy, nagrania audio, transmisje na żywo, animacje z narracją itp. Zasada ta mówi, że jeśli na stronie pojawia się taka treść, to trzeba zapewnić alternatywne sposoby odbioru informacji — tak, żeby osoby niewidome, niesłyszące lub z innymi ograniczeniami również mogły z niej skorzystać.

Jeśli publikujesz nagranie dźwiękowe (np. podcast), warto dodać jego transkrypcję, czyli spisane słowa i opisy tego, co się dzieje w tle. Jeśli to jest film z dźwiękiem, należy do niego dołączyć napisy, żeby osoba niesłysząca mogła zrozumieć, o czym jest mowa. Dla osób niewidomych pomocna będzie audiodeskrypcja — czyli dodatkowy komentarz lektora, który opisuje, co widać na ekranie (np. kto wchodzi do pomieszczenia, co się dzieje w tle itp.).

Ta zasada dotyczy też materiałów na żywo, takich jak webinary czy transmisje wydarzeń. W takich przypadkach powinny być dostępne napisy lub tłumaczenie na język migowy — jeśli to możliwe.

Multimedia są często barierą dla osób z niepełnosprawnościami, dlatego WCAG 1.2 skupia się na tym, żeby te treści były możliwe do odebrania na różne sposoby — nie tylko wzrokiem i słuchem.

1.2.1 Tylko audio lub tylko wideo (nagranie) - A

Tylko audio lub tylko wideo (nagranie) dotyczy sytuacji, gdy na stronie pojawia się nagranie, które ma tylko dźwięk (np. podcast) albo tylko obraz (np. filmik bez dźwięku). Ten punkt mówi, że w takich przypadkach trzeba zapewnić alternatywę tekstową, czyli taki opis, który przekaże te same informacje, co nagranie.

Jeśli użytkownik nie słyszy, a na stronie jest sam dźwięk, to powinien mieć możliwość przeczytania, co zostało powiedziane — wystarczy dołączyć transkrypcję, czyli tekst z nagrania. Z kolei jeśli ktoś nie widzi, a na stronie jest nagranie wideo bez dźwięku (np. animacja, pokaz slajdów), to powinien mieć opis tego, co widać, np. tekstowy opis tego, co się dzieje w filmie.

Taki opis może być umieszczony pod filmem, jako osobny plik tekstowy albo jako część strony. Ważne jest, żeby użytkownik miał dostęp do tej samej treści, nawet jeśli nie może jej zobaczyć lub usłyszeć.

Ten punkt nie dotyczy nagrań, które są już same w sobie alternatywą — na przykład jeśli ktoś przygotował filmik z językiem migowym jako zamiennik tekstu na stronie. Wtedy taki film nie musi mieć dodatkowej transkrypcji, bo już pełni rolę zamiennika.

1.2.2 Napisy rozszerzone (nagranie) - A

Napisy rozszerzone (nagranie) dotyczy filmów i nagrań wideo, które mają zarówno obraz, jak i dźwięk — czyli np. filmy instruktażowe, prezentacje, wykłady online, nagrane webinary. Ten punkt mówi, że do takich materiałów trzeba dodać napisy, które nie tylko pokazują wypowiadane słowa, ale także inne istotne dźwięki — takie jak śmiech, muzyka, hałasy w tle czy informacje o tym, kto mówi.

Tego typu napisy nazywa się „napisami rozszerzonymi” albo „napisami dla niesłyszących”, ponieważ zawierają więcej niż tylko dialogi. Ich celem jest to, żeby osoba niesłysząca mogła w pełni zrozumieć, co dzieje się w nagraniu — nie tylko to, co jest mówione, ale też jak, kto i co jeszcze słychać.

Przykład takiego napisu: <code> [Mężczyzna śmieje się] ANIA: To świetny pomysł! [dźwięk dzwonka do drzwi] </code>

Jeśli film nie ma takich napisów, osoba niesłysząca traci dużą część treści — dlatego ten punkt WCAG nakazuje ich stosowanie, chyba że film pełni tylko rolę zamiennika tekstu (czyli np. przedstawia tekst w formie wideo).

1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - A

Audiodeskrypcja lub alternatywa tekstowa (nagranie) dotyczy filmów i nagrań wideo, które mają obraz i dźwięk — czyli np. nagrania wideo z osobami mówiącymi, prezentacje, animacje. Ten punkt skupia się na potrzebach osób, które nie widzą lub mają ograniczony wzrok.

Chodzi o to, że nie wszystko, co ważne w filmie, jest powiedziane na głos. Często dzieją się rzeczy widoczne tylko na ekranie — np. ktoś pokazuje slajd, gestykuluje, pojawia się tekst, zmienia się obraz, coś się wydarza w tle. Osoba niewidoma tego nie zobaczy, więc trzeba te elementy opisać słowami — tak, żeby również mogła zrozumieć, co się dzieje.

Można to zrobić na dwa sposoby:
Audiodeskrypcja – czyli dodatkowy głos w filmie, który w przerwach między dialogami opisuje, co się dzieje na ekranie (np. „Kobieta podchodzi do drzwi i otwiera je”).
Alternatywa tekstowa – czyli osobny opis w formie tekstu, który zawiera streszczenie całego filmu, łącznie z tym, co jest widoczne, ale nie zostało powiedziane.

Ten punkt nie obowiązuje, jeśli film jest już alternatywą dla tekstu — na przykład nagranie wideo, które przedstawia czytany artykuł.

Celem tego wymagania jest to, aby osoby niewidome miały dostęp do całej treści filmu, a nie tylko do tego, co zostało wypowiedziane.

1.2.4 Napisy rozszerzone (na żywo) - AA

Napisy rozszerzone (na żywo) dotyczy transmisji na żywo, które zawierają dźwięk i obraz — na przykład webinary, wykłady online, spotkania wideo, relacje z wydarzeń czy konferencje. Ten punkt mówi, że w takich przypadkach powinno się zapewnić napisy na żywo, czyli takie, które pojawiają się na ekranie w trakcie trwania wydarzenia i przekazują to, co jest mówione oraz inne ważne dźwięki.

Takie napisy są szczególnie ważne dla osób niesłyszących lub niedosłyszących, bo dzięki nim mogą śledzić to, co dzieje się w czasie rzeczywistym, tak samo jak pozostali uczestnicy. Napisy powinny zawierać nie tylko wypowiadane słowa, ale też informacje o tym, kto mówi, a także inne istotne dźwięki, jak śmiech, muzyka czy reakcje z sali.

Przykład napisu na żywo: <code> [PROWADZĄCY]: Dziękuję wszystkim za obecność. [Śmiech z publiczności] </code>

To wymaganie pojawia się dopiero na poziomie AA, ponieważ jego spełnienie wymaga większego zaangażowania technicznego — często zatrudnienia osoby do pisania napisów na żywo lub wykorzystania automatycznego rozpoznawania mowy.

Ale jego celem jest jasny: zapewnić pełen dostęp do treści na żywo każdemu, bez względu na to, czy może ją usłyszeć.

1.2.5 Audiodeskrypcja (nagranie) - AA

Audiodeskrypcja (nagranie) dotyczy nagranych filmów i wideo, które zawierają zarówno obraz, jak i dźwięk — czyli np. filmy instruktażowe, prezentacje, reklamy czy nagrania szkoleniowe. W tym punkcie chodzi o to, żeby dodać audiodeskrypcję, czyli dodatkowy głos, który opisuje to, co widać na ekranie, a co nie zostało powiedziane na głos.

Taka audiodeskrypcja jest bardzo ważna dla osób niewidomych lub słabowidzących, ponieważ pozwala im „zobaczyć” film słuchając opisu. Głos lektora wtrąca się w naturalnych przerwach między dialogami i mówi np.: „Kobieta wchodzi do pokoju i kładzie torbę na stół” albo „Na ekranie pojawia się napis: ‘Zarejestruj się teraz’”.

Ten punkt dotyczy tylko filmów nagranych wcześniej, nie transmisji na żywo, i obowiązuje od poziomu AA. Audiodeskrypcja może być częścią filmu (czyli odtwarzana razem z nim) albo dostępna jako osobna wersja filmu z dodanym opisem.

Dzięki temu rozwiązaniu osoby, które nie widzą, mogą w pełni zrozumieć, co się dzieje w filmie — nie tylko słuchać dialogów, ale też „zobaczyć” obraz przez opis.

1.2.6 Język migowy (nagranie) - AAA

Język migowy (nagranie) dotyczy nagrań wideo, które zawierają dźwięk, czyli np. wypowiedzi, filmy, instruktaże czy prezentacje. Ten punkt mówi, że dla takich materiałów warto zapewnić tłumaczenie na język migowy, tak aby osoby Głuche (czyli nie tylko niesłyszące, ale posługujące się na co dzień językiem migowym) mogły w pełni zrozumieć treść.

Dlaczego to ważne? Bo nie każda osoba niesłysząca dobrze rozumie język polski w formie pisanej. Dla wielu Głuchych polski język migowy (PJM) jest pierwszym i naturalnym językiem, a język pisany jest jak obcy. Dlatego dodanie tłumaczenia na migowy — czyli osoby pokazującej treść filmu w języku migowym — jest ogromnym ułatwieniem i sprawia, że film staje się naprawdę dostępny.

Takie tłumaczenie można umieścić w narożniku filmu (jak ma to miejsce w telewizji) albo przygotować osobną wersję nagrania z tłumaczem. Ten punkt jest na poziomie AAA, czyli nie jest obowiązkowy na podstawowym poziomie dostępności, ale jeśli zależy nam na jak najszerszej dostępności — warto go rozważyć.

1.2.7 Rozszerzona audiodeskrypcja (nagranie) - AAA

Rozszerzona audiodeskrypcja (nagranie) to punkt, który dotyczy filmów zawierających obraz i dźwięk. Chodzi w nim o sytuacje, w których w nagraniu jest tak dużo mówionych treści, że nie ma przerw, w które można by w naturalny sposób wstawić audiodeskrypcję — czyli opis tego, co dzieje się na ekranie.

W takiej sytuacji zwykła audiodeskrypcja (czyli dodana pomiędzy wypowiedziami) nie wystarczy, bo brakuje na nią miejsca. Właśnie wtedy należy przygotować rozszerzoną audiodeskrypcję — czyli specjalną wersję filmu, w której zatrzymuje się obraz lub dźwięk, aby lektor mógł spokojnie opisać, co się dzieje na ekranie.

Taki film może się np. zatrzymać na moment, a lektor powie: „Na ekranie pojawia się plansza z napisem ‘Zgłoś się już dziś’. W tle widać uśmiechniętą kobietę podnoszącą kciuk”. Dopiero po tym opisanym fragmencie film rusza dalej.

To rozwiązanie jest bardzo pomocne dla osób niewidomych, gdy zwykła audiodeskrypcja nie jest w stanie przekazać wystarczająco dużo informacji. Ten punkt znajduje się na poziomie AAA, czyli jest dodatkowym, bardziej zaawansowanym wymaganiem.

1.2.8 Alternatywa dla mediów (nagranie) - AAA

Alternatywa dla multimediów (nagranie) dotyczy sytuacji, w której na stronie znajduje się nagranie wideo z dźwiękiem, albo nagranie, które zawiera tylko obraz. Punkt ten mówi, że w takich przypadkach warto zapewnić pełny opis całego nagrania w formie tekstu.

To nie jest zwykła transkrypcja (czyli tylko spis dialogów), ale rozszerzony opis, który zawiera wszystko: co zostało powiedziane, co się dzieje na ekranie, jakie są ważne dźwięki, gesty, napisy, reakcje czy zmiany obrazu. Taki tekst pozwala osobie, która nie widzi i nie słyszy, zrozumieć pełną treść nagrania, czytając ją zamiast oglądać lub słuchać.

Na przykład, jeśli na filmie ktoś mówi, a w tym czasie pokazuje coś na ekranie, to alternatywa tekstowa powinna zawierać i treść wypowiedzi, i opis obrazu. Czyli coś w stylu:

„Na ekranie pojawia się mężczyzna w garniturze. Mówi: ‘Dziękujemy za udział’. Za nim widać salę konferencyjną z napisem ‘Równość w dostępie’. W tle gra spokojna muzyka.”

Taka forma jest szczególnie ważna dla osób z jednoczesnymi ograniczeniami wzroku i słuchu, które nie mogą skorzystać ani z obrazu, ani z dźwięku, ale mogą przeczytać opis albo wysłuchać go przez czytnik ekranu w wersji tekstowej.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy, ale znacznie zwiększa dostępność i zrozumiałość multimediów.

1.2.9 Tylko audio (na żywo) - AAA

Alternatywa dla tylko-audio na żywo dotyczy sytuacji, kiedy na stronie pojawia się transmisja dźwiękowa na żywo — czyli np. audycja radiowa, webinar bez obrazu, wystąpienie transmitowane na żywo tylko w formie dźwięku. Ten punkt mówi, że w takim przypadku warto zapewnić równoczesny opis w formie tekstu, który przekazuje tę samą treść, co mówione słowa.

Dlaczego to ważne? Bo osoba niesłysząca lub niedosłysząca nie ma dostępu do treści mówionych na żywo, jeśli nie ma do tego żadnej formy tekstowej. Alternatywa może mieć postać na przykład relacji tekstowej „na żywo” — czyli ktoś wpisuje na bieżąco to, co jest mówione — albo może to być automatyczne rozpoznawanie mowy, które pokazuje tekst w czasie rzeczywistym.

Taki zapis może wyglądać jak czat lub specjalne okno z tekstem obok odtwarzanego dźwięku. Dzięki temu osoby, które nie słyszą, mogą mimo wszystko śledzić przebieg wydarzenia w czasie rzeczywistym, podobnie jak inni uczestnicy.

Ten punkt znajduje się na poziomie AAA, czyli nie jest obowiązkowy w podstawowych wymaganiach, ale jego wdrożenie znacząco zwiększa dostępność treści dla osób Głuchych i niedosłyszących.

1.3 Możliwość adaptacji

Możliwość adaptacji mówi o tym, że treść na stronie powinna być zbudowana w taki sposób, aby mogła być prezentowana na różne sposoby, bez utraty jej sensu i struktury. Chodzi o to, żeby użytkownik — niezależnie od tego, czy korzysta z dużego ekranu, telefonu, czytnika ekranu czy własnych ustawień przeglądarki — mógł nadal dobrze zrozumieć, co jest na stronie i jak wszystko jest ze sobą powiązane.

Na przykład: jeśli na stronie jest tabela, lista, formularz czy nagłówek, to te elementy powinny być opisane tak, aby urządzenia wspomagające (np. czytniki ekranu) wiedziały, że to tabela albo nagłówek. To oznacza używanie odpowiednich znaczników HTML (<h1>, <ul>, <table>, <label> itd.) zamiast tylko wizualnego formatowania (np. pogrubiania tekstu zamiast oznaczania nagłówka).

Dzięki temu osoby korzystające z technologii wspomagających mogą zrozumieć strukturę strony: co jest tytułem, co jest przyciskiem, gdzie zaczyna się lista albo formularz. Z kolei osoby korzystające z własnych ustawień wyświetlania (np. powiększony tekst, wysoki kontrast, czy orientacja pionowa) mogą zobaczyć te treści w inny sposób — ale z tą samą logiką i kolejnością.

Krótko mówiąc: strona powinna być elastyczna i logicznie zbudowana, żeby każdy mógł się w niej odnaleźć, niezależnie od tego, jak ją widzi lub odczytuje.

1.3.1 Informacje i relacje - A

Informacje i relacje mówi o tym, że wszystkie związki między treściami na stronie — takie jak nagłówki, listy, pola formularza z etykietami, grupy informacji, sekcje czy kolejność — powinny być opisane w taki sposób, żeby technologie wspomagające mogły je rozpoznać i przekazać użytkownikowi.

Inaczej mówiąc: jeśli coś wygląda jak nagłówek, to powinno być oznaczone jako nagłówek (np. <h1>, <h2>), a nie tylko pogrubione. Jeśli pole formularza ma etykietę (np. „Imię”), to powinno być z tą etykietą połączone w kodzie HTML (<label for="...">). Jeśli na stronie jest lista, to nie powinno być po prostu wypunktowanych zdań, tylko prawdziwa lista (<ul>, <li>).

To ważne, bo użytkownik korzystający z czytnika ekranu nie widzi wizualnych wskazówek — ale technologia może odczytać strukturę, jeśli została dobrze opisana. Czytnik może wtedy powiedzieć: „Nagłówek drugi poziom: Kontakt”, „Lista z trzema elementami” albo „Pole: Imię – wymagane”.

Ten punkt ma na celu zachowanie logicznych powiązań między elementami strony — tak, aby osoby z niepełnosprawnościami mogły zrozumieć nie tylko treść, ale też jej strukturę i sens.

1.3.2 Zrozumiała kolejność - A

Zrozumiała kolejność mówi o tym, że kolejność, w jakiej treści pojawiają się na stronie, musi być logiczna i zrozumiała, nawet wtedy, gdy użytkownik korzysta z technologii wspomagających, takich jak czytnik ekranu albo klawiatura.

To oznacza, że elementy strony powinny być ułożone w takiej kolejności, która ma sens przy odczycie liniowym — czyli krok po kroku, od góry do dołu. Jeśli np. najpierw pojawia się tytuł, potem opis, a na końcu przycisk „Wyślij” – to ta sama kolejność powinna obowiązywać także przy odczycie przez czytnik ekranu.

Nie może być tak, że coś wygląda dobrze wizualnie (bo zostało ułożone np. za pomocą CSS), ale w kodzie jest pomieszane – bo wtedy osoba, która nie widzi strony, dostaje informacje w złej kolejności i może się pogubić.

Przykład: jeśli na stronie mamy formularz z pytaniami, to nie może się zdarzyć, że etykieta pytania jest odczytywana dopiero po polu do wpisania odpowiedzi. Kolejność musi odpowiadać naturalnemu sposobowi czytania i rozumienia treści.

Dzięki temu użytkownicy, niezależnie od sposobu, w jaki korzystają ze strony, otrzymują treści w takim samym, logicznym porządku.

1.3.3 Właściwości zmysłowe - A

Właściwości zmysłowe mówi o tym, że nie można polegać wyłącznie na wskazówkach opartych na jednym zmyśle, np. wzroku, gdy tłumaczymy użytkownikowi, co ma zrobić. Chodzi o to, aby instrukcje na stronie były zrozumiałe niezależnie od tego, czy ktoś widzi kolory, kształty, pozycje elementów albo obrazy.

Przykład problemu: jeśli na stronie piszemy „Kliknij czerwony przycisk, aby przejść dalej”, to osoba niewidoma albo osoba nierozróżniająca kolorów nie będzie wiedziała, o który przycisk chodzi. Albo jeśli powiemy „Zaznacz opcję po lewej stronie” – to też może być niejasne dla osoby korzystającej z czytnika ekranu, bo on nie „widzi”, co jest po lewej.

Zamiast tego powinniśmy stosować jasne, opisowe instrukcje – np. „Kliknij przycisk z napisem ‘Dalej’” albo „Wybierz opcję ‘Zamów teraz’ z listy poniżej”. Takie podejście sprawia, że każdy użytkownik, niezależnie od zmysłów, których używa, może zrozumieć, co ma zrobić.

Ten punkt pomaga tworzyć strony, które nie wykluczają nikogo tylko dlatego, że ktoś nie widzi koloru, nie dostrzega ikonki, albo nie korzysta z myszy.

1.3.4 Orientacja - AA

Orientacja dotyczy sposobu wyświetlania treści na ekranie — czyli tego, czy strona działa w układzie pionowym (portretowym) czy poziomym (krajobrazowym). Ten punkt mówi, że strona nie powinna wymuszać konkretnej orientacji ekranu, chyba że jest to naprawdę konieczne.

Co to znaczy w praktyce? Jeśli ktoś przegląda stronę na telefonie lub tablecie i trzyma urządzenie pionowo, to strona powinna działać poprawnie — bez komunikatu typu „Obróć urządzenie, aby kontynuować”. Podobnie, jeśli użytkownik woli korzystać z poziomego widoku, to też powinien móc tak zrobić.

Są oczywiście wyjątki — na przykład aplikacja do skanowania dokumentów, gra wyścigowa czy interaktywna mapa, która naprawdę wymaga konkretnego ustawienia. W takich przypadkach wymuszenie orientacji jest dopuszczalne.

Ale w większości przypadków — szczególnie w serwisach internetowych, formularzach, treściach tekstowych — strona powinna dostosować się do tego, jak użytkownik trzyma urządzenie, a nie odwrotnie.

Ten punkt pomaga szczególnie osobom z niepełnosprawnościami ruchowymi, które korzystają z urządzeń zamocowanych na stałe i nie mogą ich łatwo obrócić.

1.3.5 Określenie pożądanej wartości - AA

Określenie pożądanej wartości odnosi się głównie do formularzy, czyli miejsc, gdzie użytkownik wpisuje swoje dane — na przykład imię, nazwisko, e-mail, numer telefonu czy datę urodzenia. Ten punkt mówi, że cel każdego pola formularza powinien być rozpoznawalny przez technologie wspomagające, takie jak czytniki ekranu, a nawet przeglądarki z funkcją automatycznego uzupełniania.

Chodzi o to, żeby nie tylko wizualnie było wiadomo, co wpisać (bo widać etykietę pola), ale też żeby program komputerowy wiedział, że to pole służy np. do wpisania imienia, hasła, kodu pocztowego itp.

Dzięki temu użytkownik, który korzysta z czytnika ekranu, usłyszy coś więcej niż tylko „pole edycji” — usłyszy: „Imię – pole tekstowe wymagane”. Co więcej, przeglądarka będzie mogła sama podpowiedzieć dane użytkownika, np. na podstawie zapisanych informacji.

Aby to działało, trzeba w kodzie formularza zastosować specjalne atrybuty, takie jak autocomplete="given-name", autocomplete="email", autocomplete="postal-code". To sprawia, że zarówno technologia wspomagająca, jak i sama przeglądarka rozumieją, czego dotyczy dane pole.

Ten punkt ułatwia życie wszystkim — nie tylko osobom z niepełnosprawnościami, ale każdemu, kto wypełnia formularz na komputerze lub telefonie i chce zrobić to szybciej, łatwiej i bez pomyłek.

1.3.6 Określenie przeznaczenia - AAA

Określenie przeznaczenia to bardziej zaawansowany punkt dostępności, który mówi o tym, że elementy strony powinny być opisane w taki sposób, aby można było automatycznie rozpoznać ich przeznaczenie — nie tylko co to jest (np. przycisk), ale do czego służy (np. przycisk „Kup teraz” albo ikona koszyka).

W praktyce chodzi o to, żeby programy, aplikacje i technologie wspomagające mogły lepiej interpretować interfejs użytkownika – np. wiedziały, że dany przycisk służy do wysłania formularza, a pole służy do wpisania adresu e-mail. To może pozwolić np. na dostosowanie wyglądu strony, nawigacji głosowej czy sugestii dla użytkownika.

Dotyczy to takich elementów jak: ikony (np. lupa = wyszukiwanie), przyciski i pola formularzy (np. imię, telefon, hasło), obszary strony (np. menu, stopka, główna treść), a nawet ikony oznaczające funkcje (np. ikona ustawień, udostępniania, logowania).

Aby to było możliwe, twórca strony może używać znacznika semantycznego HTML, ról ARIA i specjalnych identyfikatorów (na przykład z listy predefinedów WCAG lub standardu schema.org).

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy, ale bardzo pomaga w tworzeniu inteligentnych, samodostosowujących się stron, które mogą być łatwiej obsługiwane przez osoby z różnymi ograniczeniami — albo nawet przez sztuczną inteligencję, która pomaga w nawigacji.

1.4 Rozróżnialność

Rozróżnialność dotyczy tego, jak łatwo można zobaczyć i zrozumieć informacje na stronie internetowej. Chodzi przede wszystkim o to, aby tekst, obrazy i inne elementy były czytelne, wyraźne i nie zlewały się z tłem, a także żeby użytkownik mógł łatwo oddzielić ważne informacje od mniej istotnych elementów wizualnych.

Zasada ta obejmuje różne kwestie — takie jak odpowiedni kontrast między tekstem a tłem, możliwość powiększania tekstu, czytelność czcionki, niepoleganie wyłącznie na kolorze do przekazywania informacji (np. „błąd oznaczony na czerwono” to za mało) oraz unikanie migających, rozpraszających treści, które mogą być trudne do śledzenia albo wręcz niebezpieczne (np. dla osób z padaczką).

Dobrym przykładem zgodnym z tą zasadą jest strona, na której czarny tekst pojawia się na białym tle, ważne przyciski są dobrze widoczne, kolor nie jest jedynym sposobem, by coś zaznaczyć (np. błąd jest też opisany tekstem), a użytkownik może powiększyć tekst bez utraty funkcjonalności strony.

Rozróżnialność pomaga nie tylko osobom słabowidzącym, ale też każdemu w trudnych warunkach – np. przy złym świetle, na ekranie telefonu w słońcu albo po prostu przy zmęczonych oczach.

1.4.1 Użycie koloru - A

Użycie koloru mówi, że kolor nie może być jedynym sposobem przekazywania informacji. Czyli: jeśli coś jest ważne, wymaga działania lub oznacza jakiś stan (np. błąd, sukces, aktywność), nie wystarczy zaznaczyć tego samym kolorem – trzeba to pokazać również w inny sposób.

Dlaczego? Bo nie wszyscy widzą kolory tak samo. Osoby z daltonizmem (czyli nierozróżniające niektórych kolorów) mogą nie zauważyć różnicy między np. czerwonym a zielonym. Z kolei osoby niewidome lub słabowidzące mogą w ogóle tych kolorów nie dostrzec.

Przykłady źle:
- „Pola zaznaczone na czerwono są obowiązkowe” – a jeśli ktoś nie widzi czerwonego?
- „Poprawne odpowiedzi są na zielono” – ale co, jeśli kolor zielony wygląda jak szary?

Przykłady dobrze:
- Oprócz koloru dodaj ikonę (np. !), tekst (np. „Błąd: to pole jest wymagane”) lub inny znacznik wizualny, jak pogrubienie czy ramka.

Czyli: kolor może być pomocny, ale nie może być jedynym sposobem na przekazanie znaczenia.

Ten punkt to podstawowe wymaganie (poziom A) i jeden z najczęściej łamanych warunków dostępności, mimo że jego naprawienie jest bardzo proste.

1.4.2 Kontrola odtwarzania dźwięku - A

Kontrola odtwarzania dźwięku mówi o tym, że jeśli na stronie internetowej dźwięk włącza się automatycznie i trwa dłużej niż 3 sekundy, to użytkownik musi mieć możliwość go zatrzymać, wyłączyć albo ściszyć — i to niezależnie od ustawień systemowych.

Dlaczego to ważne? Bo automatycznie odtwarzany dźwięk:
- może przeszkadzać w koncentracji,
- może nakładać się na czytnik ekranu, który czyta treść strony (co tworzy chaos),
- może zaskoczyć użytkownika w miejscu publicznym lub w pracy,
- albo po prostu utrudnia korzystanie ze strony w ciszy (np. w bibliotece).

Strona zgodna z WCAG powinna więc zapewnić wyraźny przycisk „pauza” lub „wyłącz dźwięk”. Dobrze, jeśli można też regulować głośność dźwięku niezależnie od reszty systemu — ale najważniejsze, żeby dało się ten dźwięk wyłączyć.

Ten punkt nie dotyczy krótkich efektów dźwiękowych (np. kliknięcie), które trwają mniej niż 3 sekundy — ale muzyka w tle, nagranie wideo lub inne dźwięki grające długo i bez kontroli – to już problem.

Ten wymóg znajduje się na poziomie A i jest szczególnie ważny dla osób korzystających z czytników ekranu lub uczących się za pomocą słuchu.

1.4.3 Kontrast (minimum) - AA

Kontrast (minimum) mówi o tym, że tekst na stronie powinien mieć wystarczający kontrast względem tła, żeby był czytelny dla jak największej liczby osób — zwłaszcza dla osób słabowidzących, starszych lub korzystających ze słabych ekranów (np. w słońcu).

Ten punkt określa konkretne wartości: zwykły tekst (czyli standardowa wielkość pisma) powinien mieć kontrast co najmniej 4.5:1 względem tła. Duży tekst (czyli powiększony, np. nagłówki) powinien mieć minimum 3:1, bo większy rozmiar ułatwia czytanie.

Kontrast 4.5:1 oznacza, że np. ciemnoszary tekst na jasnoszarym tle to za mało — ale czarny na białym albo ciemny granat na jasnym beżu już zwykle spełnia wymagania.

Kiedy kontrast nie musi być spełniony? Jeśli tekst jest dekoracyjny, np. w tle jako ozdoba. Jeśli to logo lub element graficzny — logotypy są z tego zwolnione. Jeśli tekst jest niewidoczny lub wyłączony (np. ukryty tymczasowo).

Ten punkt dotyczy także obrazów zawierających tekst, np. przycisków w formie grafik – tam kontrast tekstu na tle też ma znaczenie.

Jest to wymóg poziomu AA, czyli obowiązkowy w standardowym podejściu do dostępności. Zapewnienie odpowiedniego kontrastu nie tylko ułatwia dostępność, ale też poprawia ogólną czytelność i wygodę strony.

1.4.4 Zmiana rozmiaru tekstu - AA

Zmiana rozmiaru tekstu mówi o tym, że użytkownik powinien mieć możliwość powiększenia tekstu nawet do 200% jego oryginalnego rozmiaru bez utraty treści ani funkcjonalności strony — i to bez potrzeby korzystania z dodatkowych technologii wspomagających.

Co to znaczy w praktyce? Osoba, która gorzej widzi, może chcieć powiększyć tekst w swojej przeglądarce (np. skrótem Ctrl + +), żeby móc go łatwiej przeczytać. Strona powinna się wtedy automatycznie dostosować: tekst się powiększy, układ się przesunie, ale nic nie powinno się uciąć, ukryć, nachodzić na inne elementy ani przestać działać.

Nie chodzi tylko o tekst w paragrafach, ale też o: etykiety pól formularza, przyciski, linki, menu i inne interaktywne elementy.

Ten punkt nie dotyczy obrazów zawierających tekst ani napisów do filmów, bo one są trudniejsze do skalowania. Dlatego lepiej unikać grafiki z tekstem i używać prawdziwego tekstu HTML – który łatwiej powiększyć.

Wymóg ten jest na poziomie AA i jest bardzo istotny dla osób słabowidzących, starszych oraz tych, którzy korzystają z małych ekranów — np. na telefonach. Dzięki temu strona staje się bardziej elastyczna i przyjazna dla każdego.

1.4.5 Obrazy tekstu - AA

Obrazy tekstu mówi o tym, że jeśli to tylko możliwe, tekst na stronie powinien być prawdziwym tekstem, a nie częścią obrazka.

Chodzi o to, że wiele lat temu niektóre napisy na stronach były po prostu wstawiane jako obrazki (np. przycisk „Kup teraz” w formie grafiki). To sprawiało, że taki tekst:
- nie dało się powiększyć, skopiować ani przeczytać czytnikiem ekranu,
- nie dostosowywał się do różnych ekranów,
- miał często zbyt niski kontrast,
- i ogólnie był trudny do odczytania dla wielu osób.

Ten punkt mówi: jeśli można, używaj tekstu w HTML i CSS, bo dzięki temu:
- można go powiększyć,
- jest czytelny dla technologii wspomagających,
- łatwiej go przetłumaczyć czy przetworzyć,
- i wygląda dobrze na różnych urządzeniach.

Są jednak dwa wyjątki, kiedy można użyć obrazu tekstu:
- Gdy użytkownik może go sam zmienić (np. grafikę z tekstem, która można powiększyć lub zmienić kontrast).
- Gdy taki wygląd jest istotny dla przekazu — na przykład logo firmy, znak firmowy albo artystyczna grafika z tekstem.

Ten punkt znajduje się na poziomie AA, więc jest częścią standardowego zestawu wymagań dostępności. W skrócie: używaj tekstu jako tekstu, a nie jako obrazka, chyba że masz bardzo dobry powód.

1.4.6 Kontrast (wzmocniony) - AAA

Kontrast (wzmocniony) to bardziej zaawansowana wersja wcześniejszego punktu o kontraście (1.4.3). Mówi on, że dla jeszcze lepszej dostępności, kontrast między tekstem a tłem powinien być jeszcze wyraźniejszy — zwłaszcza dla osób ze znacznymi problemami ze wzrokiem.

Wartości kontrastu w tym przypadku są wyższe: - Zwykły tekst – kontrast powinien wynosić co najmniej 7:1
- Duży tekst (czyli np. nagłówki 18px lub większe, pogrubione) – co najmniej 4.5:1

To sprawia, że treści są jeszcze bardziej czytelne dla osób z osłabionym wzrokiem, starszych użytkowników czy tych, którzy korzystają ze strony w trudnych warunkach oświetleniowych.

Podobnie jak w wersji podstawowej (1.4.3), są też wyjątki: - Logo i nazwy firm – mogą mieć dowolny kontrast.
- Elementy dekoracyjne lub nieaktywne – nie muszą spełniać tych wymagań.

Ten punkt znajduje się na poziomie AAA, czyli nie jest obowiązkowy w standardowym podejściu, ale jego spełnienie znacząco podnosi komfort korzystania ze strony – zwłaszcza dla osób niedowidzących.

W skrócie: im wyraźniejszy tekst na tle, tym lepiej – a ten punkt ustala najwyższe standardy, jeśli chodzi o czytelność.

1.4.7 Niska głośność lub bez dźwięków w tle - AAA

Niska głośność lub bez dźwięków w tle dotyczy nagranego dźwięku, w którym na pierwszym planie znajduje się mowa (czyli wypowiedzi ludzi). Ten punkt mówi, że jeśli takie nagranie ma być czytelne i zrozumiałe, to dźwięki w tle nie mogą zagłuszać głosu.

Są trzy sposoby, żeby spełnić ten wymóg: Brak dźwięków w tle – najlepsza opcja: słychać tylko mowę, bez muzyki, szumów, efektów dźwiękowych.
Możliwość wyłączenia tła – użytkownik może np. kliknąć przycisk i wyłączyć dźwięki w tle, zostawiając sam głos.
Dźwięki w tle są bardzo ciche – konkretnie: muszą być co najmniej 20 decybeli cichsze niż głos, żeby go nie zagłuszać. To oznacza, że głos powinien być wyraźnie na pierwszym planie.

Ten punkt jest ważny, bo osoby z problemami słuchu (np. niedosłyszące) mają trudności z oddzieleniem głosu od muzyki czy szumu. Ale nawet osoby bez niepełnosprawności mogą się frustrować, jeśli film czy nagranie brzmi jak podcast z imprezy w tle.

Ten wymóg znajduje się na poziomie AAA, więc nie jest obowiązkowy, ale zdecydowanie poprawia zrozumiałość i komfort słuchania.

1.4.8 Prezentacja wizualna - AAA

Prezentacja wizualna mówi o tym, że bloki tekstu powinny być prezentowane w taki sposób, aby były jak najłatwiejsze do czytania — zwłaszcza dla osób z trudnościami w przetwarzaniu tekstu, np. z dysleksją, słabym wzrokiem lub problemami z koncentracją.

Ten punkt dotyczy dłuższych fragmentów tekstu, np. artykułów, opisów, instrukcji, i wprowadza kilka konkretnych zasad, które poprawiają ich czytelność:
- Możliwość zmiany kolorów tła i tekstu – użytkownik powinien móc samodzielnie dobrać kontrast i kolory (np. czarny tekst na żółtym tle).
- Ograniczona szerokość linii – tekst nie powinien być zbyt szeroki: maksymalnie 80 znaków w wierszu, a przy językach takich jak chiński, japoński czy koreański – 40 znaków. Dlaczego? Bo krótsze linie są łatwiejsze do śledzenia wzrokiem.
- Brak justowania – tekst nie powinien być wyjustowany (czyli wyrównany do lewej i prawej jednocześnie), bo powoduje nierówne odstępy między słowami, co utrudnia czytanie.
- Odstępy między wierszami – powinny wynosić co najmniej 1,5 wysokości linii. To poprawia przejrzystość.
- Odstępy między akapitami – większe niż między wierszami w tym samym akapicie (minimum 1,5 razy większe).
- Możliwość powiększenia do 200% – bez potrzeby poziomego przewijania (czyli bez przesuwania się w bok, żeby przeczytać całą linię).

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy, ale jego spełnienie znacząco ułatwia czytanie i przyswajanie treści przez wszystkich użytkowników, nie tylko osoby z niepełnosprawnościami.

1.4.9 Obrazy tekstu (bez wyjątków) - AAA

Obrazy tekstu (bez wyjątków) to najbardziej rygorystyczna wersja zasady o nieużywaniu tekstu w formie grafiki. Mówi on jasno: tekst powinien być wyświetlany jako prawdziwy tekst, a nie jako obraz, bez żadnych wyjątków.

Oznacza to, że nawet jeśli: grafika wygląda ładniej, pasuje do projektu strony, jest szybciej do zrobienia jako plik JPG lub PNG …to i tak nie powinna zawierać tekstu, który pełni istotną rolę (np. nagłówek, przycisk, informacja, wezwanie do działania).

Dlaczego? Bo obraz tekstu nie da się powiększyć bez utraty jakości, nie można go zaznaczyć ani przeczytać czytnikiem ekranu, nie reaguje na preferencje użytkownika (np. tryb wysokiego kontrastu, większy rozmiar czcionki).

Ten punkt nie dopuszcza wyjątków, nawet dla logotypów czy tekstów artystycznych, jak w niższych poziomach WCAG. Zgodność z tą zasadą oznacza, że wszystko, co przekazuje informację w formie tekstu, musi być kodowane jako tekst w HTML/CSS.

To wymaganie jest na poziomie AAA, więc nie jest obowiązkowe w podstawowym zakresie, ale jego spełnienie sprawia, że strona staje się w pełni dostępna, elastyczna i przyjazna dla każdego — niezależnie od technologii, z której korzysta.

1.4.10 Dopasowanie do ekranu - AA

Dopasowanie do ekranu mówi o tym, że strona internetowa powinna działać poprawnie na małych ekranach, takich jak smartfony czy tablety, bez potrzeby przewijania w dwóch kierunkach (pionowo i poziomo jednocześnie).

Innymi słowy: użytkownik powinien móc czytać i korzystać ze strony, przewijając tylko w dół, a nie w bok, żeby przeczytać cały tekst czy zobaczyć elementy interfejsu.

Co to oznacza w praktyce? Tekst nie może „ucinać się” na małych ekranach. Obrazy i elementy interaktywne (np. przyciski, formularze) powinny się skalować i ustawiać elastycznie, zależnie od szerokości ekranu. Układ strony powinien się dostosowywać automatycznie – nazywamy to „responsywnością”.

Punkt ten dotyczy ekranów o minimalnych rozmiarach: 320 pikseli szerokości (typowa szerokość smartfona), 256 pikseli wysokości (dla treści, które przewijamy w pionie).

Są jednak wyjątki – np. kiedy dana treść naprawdę wymaga dwóch wymiarów, jak: mapy interaktywne, gry planszowe online, arkusze kalkulacyjne, wykresy, które pokazują dane na całej szerokości i wysokości.

Ten punkt jest na poziomie AA i ma ogromne znaczenie dziś, gdy wiele osób korzysta ze stron głównie na telefonie. Dzięki niemu strona staje się łatwa w użyciu i czytelna na każdym urządzeniu, bez potrzeby „przesuwania w bok”.

1.4.11 Kontrast elementów nietekstowych - AA

Kontrast elementów nietekstowych mówi, że nie tylko tekst musi być dobrze widoczny – ale również inne ważne elementy graficzne, takie jak przyciski, ikony, ramki, wykresy, suwaki itp.

Ten punkt wymaga, aby takie elementy miały wystarczający kontrast w stosunku do tła, czyli żeby łatwo było je zauważyć i zrozumieć ich funkcję — nawet przez osoby słabowidzące lub w trudnych warunkach oświetleniowych.

Minimalny wymagany kontrast to co najmniej 3:1 (czyli np. ciemnoszary na jasnym tle).

Dotyczy to dwóch typów elementów:
Komponenty interfejsu użytkownika – np.: przyciski (nawet te bez tekstu), pola formularzy, suwaki, przełączniki, ikony „zamknij”, „menu” itp.
Elementy graficzne zawierające informacje – np.: linie wykresów, oznaczenia na mapie, ikony z symbolem alertu, sukcesu, błędu itd.

Wyjątki: Elementy nieaktywne (np. wyszarzone przyciski).
Czysta dekoracja (np. tło ozdobne).
Elementy generowane przez przeglądarkę, których nie da się zmienić przez autora strony.

Dlaczego to ważne? Bo jeśli np. pole formularza zlewa się z tłem, użytkownik może go nie zauważyć. A jeśli ikonka błędu nie ma kontrastu, nie będzie wiadomo, że coś poszło nie tak.

Ten punkt znajduje się na poziomie AA i znacząco poprawia dostępność wizualną — nie tylko dla osób z niepełnosprawnościami, ale dla każdego użytkownika.

1.4.12 Odstępy w tekście - AA

Odstępy w tekście mówi o tym, że użytkownicy powinni mieć możliwość dostosowania odstępów między wierszami, wyrazami i literami, bez utraty treści czy funkcjonalności strony.

Ten punkt jest szczególnie ważny dla osób z dysleksją, zaburzeniami koncentracji, trudnościami w czytaniu długich bloków tekstu.

Takie osoby często korzystają z własnych ustawień stylu tekstu (np. przez rozszerzenia przeglądarki lub arkusze stylów CSS), które zwiększają odstępy i tym samym ułatwiają czytanie.

WCAG określa minimalne wartości odstępów, które strona musi wytrzymać, nie „rozsypując się”:
- Wysokość linii (line-height): co najmniej 1.5x wielkości fontu
- Odstęp między akapitami: co najmniej 2x wielkości fontu
- Odstęp między literami (letter-spacing): co najmniej 0.12x wielkości fontu
- Odstęp między wyrazami (word-spacing): co najmniej 0.16x wielkości fontu

Co ważne: nie musisz od razu stosować takich odstępów na swojej stronie. Ale musisz zadbać o to, żeby jeśli ktoś je sobie ustawi — nic na stronie się nie popsuje: tekst nie nachodzi na inne elementy, nic się nie ucina, wszystko da się przeczytać i obsłużyć.

To wymaganie jest na poziomie AA, więc jest częścią standardowego zestawu WCAG. Dzięki jego spełnieniu strona staje się bardziej czytelna i elastyczna, nawet dla osób, które potrzebują indywidualnych ustawień.

1.4.13 Treść spod kursora lub fokusu - AA

Treść spod kursora lub fokusu mówi o tym, że jeśli na stronie pojawia się jakaś dodatkowa informacja w momencie, gdy użytkownik: najeżdża kursorem myszy (czyli tzw. „hover”), lub ustawia fokus klawiatury na elemencie (np. tabulatorem) - to ta dodatkowa treść musi działać w przewidywalny, dostępny sposób.

Chodzi o takie rzeczy jak: dymki podpowiedzi (tooltipy), podpowiedzi formularza, menu rozwijane po najechaniu, informacje wyświetlane przy ikonkach np. “?” lub “i”.

WCAG wymaga, aby taka treść spełniała 3 zasady:
- Można ją zamknąć (odrzucić) - użytkownik powinien mieć możliwość zamknięcia tej treści bez potrzeby poruszania myszą czy tracenia fokusu — np. klikając „x” albo klawiszem ESC.
- Można się na nią przenieść - jeśli coś się pojawia po najechaniu kursorem, użytkownik powinien móc przenieść kursor na tę treść, żeby z niej skorzystać (np. kliknąć link albo przeczytać cały tekst), bez tego, że natychmiast zniknie.
- Treść nie znika zbyt szybko - dodatkowa treść powinna pozostać widoczna tak długo, jak użytkownik potrzebuje, dopóki sam jej nie zamknie, nie zdejmie kursora albo nie wyjdzie z fokusu.

Wyjątek: jeśli to przeglądarka automatycznie pokazuje taką podpowiedź (np. atrybut title w HTML), a autor strony nie ma nad tym kontroli, to ten wymóg nie musi być spełniony. Ale — lepiej unikać title i stosować własne, dostępne podpowiedzi.

Ten punkt znajduje się na poziomie AA i poprawia czytelność i kontrolę nad tym, co się dzieje na stronie, szczególnie dla osób z trudnościami poznawczymi, ruchowymi albo korzystających z samej klawiatury.

2 Funkcjonalność

Funkcjonalność to druga zasada dostępności, która mówi, że wszystkie elementy strony internetowej muszą być możliwe do użycia przez każdego użytkownika — niezależnie od tego, w jaki sposób korzysta on z komputera czy telefonu. Oznacza to na przykład, że jeśli ktoś nie używa myszy, to powinien móc obsłużyć całą stronę tylko za pomocą klawiatury. Dotyczy to formularzy, przycisków, menu czy innych interaktywnych części strony. Ważne jest także to, żeby użytkownik wiedział, gdzie aktualnie znajduje się na stronie, na czym ma skupioną uwagę (czyli tzw. fokus), i żeby nie był zaskakiwany przez nagłe zmiany — jak np. automatyczne przeniesienie na inną stronę bez uprzedzenia. Funkcjonalność oznacza również, że użytkownik powinien mieć wystarczająco dużo czasu na przeczytanie i wykonanie wszystkich działań na stronie, a jeśli coś się porusza, miga lub automatycznie przewija, to powinna być możliwość zatrzymania tego. Dzięki zasadzie funkcjonalności strona staje się wygodna i możliwa do obsługi przez każdego, niezależnie od sposobu, w jaki z niej korzysta.

2.1 Dostępność z klawiatury

Dostępność z klawiatury oznacza, że wszystko na stronie internetowej powinno dać się obsłużyć za pomocą samej klawiatury, bez konieczności używania myszy, ekranu dotykowego czy innych urządzeń.

Dlaczego to ważne? Bo wiele osób z niepełnosprawnościami nie może używać myszy (np. z powodu ograniczeń ruchowych), korzysta z czytników ekranu, które współpracują z klawiaturą, używa specjalistycznych urządzeń, które działają jak klawiatura (np. przyciski sterujące głową lub językiem).

Co to oznacza w praktyce? Użytkownik powinien móc przechodzić po stronie klawiszem Tab. Powinien widzieć, gdzie aktualnie znajduje się tzw. fokus (czyli aktywny element). Wszystkie interaktywne elementy (linki, przyciski, formularze, menu) muszą być dostępne i działające z klawiatury. Żadne funkcje nie mogą być zablokowane wyłącznie dla myszy (np. kliknięcie działa, ale Enter już nie).

Przykład dobrego podejścia: przycisk „Wyślij” w formularzu działa po naciśnięciu Enter lub Spacji. Menu rozwija się po naciśnięciu strzałki lub Tab.

Ten punkt to główna zasada całej dostępności – bez niego wiele osób po prostu nie może korzystać z internetu.

2.1.1 Klawiatura - A

Klawiatura oznacza, że wszystkie funkcje na stronie muszą być dostępne przy użyciu samej klawiatury, bez konieczności korzystania z myszy czy ekranu dotykowego. Jeśli użytkownik potrafi poruszać się po stronie za pomocą klawiszy, powinien mieć możliwość wykonania każdej interakcji — kliknięcia przycisku, otwarcia menu, wypełnienia formularza czy przesłania danych.

To bardzo istotne, ponieważ wiele osób nie jest w stanie obsługiwać myszy z powodów zdrowotnych, albo korzysta z technologii wspomagających, które działają właśnie jak klawiatura. Kluczowe jest, aby wszystkie aktywne elementy — takie jak linki, przyciski czy pola formularzy — dało się osiągnąć i obsłużyć tylko za pomocą klawiszy, np. Tab, Enter, Spacja czy strzałki.

Nie chodzi tu o obsługę w określonym czasie — ważne jest tylko, żeby dana funkcja mogła być wykonana klawiaturą i żeby nic nie było blokowane. Jedynym dopuszczalnym wyjątkiem są sytuacje, w których dana funkcjonalność nie może być sensownie odwzorowana na klawiaturze, np. rysowanie palcem na ekranie lub gesty wymagające dokładnego ruchu.

Ten punkt to absolutna podstawa dostępności i znajduje się na poziomie A. Jeśli strona nie spełnia tego warunku, wiele osób po prostu nie będzie mogło z niej skorzystać.

2.1.2 Bez pułapki na klawiaturę - A

Ten punkt mówi o tym, że użytkownik poruszający się po stronie za pomocą klawiatury nie może utknąć w żadnym miejscu. Innymi słowy: jeśli ktoś wejdzie za pomocą klawisza Tab do jakiegoś interaktywnego elementu (na przykład formularza, wyskakującego okna, rozwijanego menu), to musi mieć możliwość równie łatwego wyjścia z niego, znowu używając klawiatury.

Wyobraź sobie, że przeskakujesz klawiszem Tab z jednego pola do drugiego, i nagle trafiasz na jakiś element, z którego już nie da się uciec — klawisze nie reagują albo ciągle wracasz w to samo miejsce. To właśnie pułapka na klawiaturę, którą ten punkt ma eliminować.

Jeśli element wymaga nietypowego sposobu wyjścia (czyli np. nie wystarczy sam Tab czy Esc), to strona powinna poinformować użytkownika, jak może opuścić dany obszar. Dzięki temu osoby niewidome, niedowidzące albo z ograniczeniami ruchowymi mogą komfortowo poruszać się po stronie i nie będą zmuszone do zamykania całej przeglądarki tylko dlatego, że nie mogą się cofnąć.

To wymaganie znajduje się na poziomie A, czyli jest absolutną podstawą dostępności każdej strony internetowej.

2.1.3 Klawiatura (bez wyjątków) - AAA

Ten punkt rozwija zasadę opisaną wcześniej w 2.1.1, ale podnosi poprzeczkę jeszcze wyżej. Mówi, że wszystkie funkcje na stronie muszą być w pełni dostępne za pomocą klawiatury, bez żadnych wyjątków — nawet tych, które wcześniej były dopuszczalne.

O ile punkt 2.1.1 pozwalał pominąć funkcje, które nie mogą być sensownie odwzorowane klawiaturą (jak np. rysowanie palcem), tutaj takie wyjątki już nie obowiązują. Jeśli dana funkcjonalność istnieje, to użytkownik musi mieć możliwość skorzystania z niej tylko przy użyciu klawiatury lub urządzenia działającego jak klawiatura — niezależnie od tego, jak skomplikowana jest ta funkcja.

To wymaganie znajduje się na poziomie AAA, więc nie jest obowiązkowe w podstawowym zestawie WCAG, ale jego spełnienie oznacza, że strona staje się w pełni dostępna nawet dla najbardziej wymagających użytkowników, w tym osób z poważnymi ograniczeniami ruchowymi.

2.1.4 Jednoznakowe skróty klawiaturowe - A

Ten punkt dotyczy sytuacji, w których strona lub aplikacja internetowa reaguje na naciśnięcie pojedynczego znaku na klawiaturze — takiego jak litera, cyfra, znak interpunkcyjny czy symbol. Może to być przydatna funkcja (np. naciśnij „S”, aby wyszukać), ale jednocześnie może prowadzić do przypadkowych działań, szczególnie w przypadku osób korzystających z technologii wspomagających, które symulują naciśnięcia klawiszy.

Dlatego WCAG 2.1.4 mówi, że jeśli na stronie są aktywne takie jednoznakowe skróty, to musi być spełniony przynajmniej jeden z trzech warunków:

Po pierwsze — użytkownik powinien mieć możliwość wyłączenia takiego skrótu, jeśli go nie potrzebuje. Po drugie — powinien móc zmienić kombinację klawiszy na inną, np. z dodatkowym klawiszem modyfikującym, takim jak Ctrl czy Alt. Po trzecie — skrót powinien działać tylko wtedy, gdy dany element ma fokus, czyli np. jest aktywnie zaznaczony lub wybrany przez użytkownika.

Ten punkt znajduje się na poziomie A, ponieważ zapobiega niezamierzonym kliknięciom i utracie danych. Jest szczególnie ważny dla osób korzystających z alternatywnych metod wprowadzania tekstu, np. dyktowania głosowego, wirtualnych klawiatur lub urządzeń wspomagających.

2.2 Wystarczający czas

Wystarczający czas dotyczy sytuacji, w których użytkownik musi wykonać jakąś akcję w określonym czasie — na przykład wypełnić formularz, przeczytać komunikat, kliknąć przycisk albo zareagować na coś, zanim minie limit.

Ta zasada mówi, że każdy użytkownik powinien mieć dość czasu na przeczytanie, zrozumienie i zareagowanie, bez presji. Oznacza to, że jeśli strona lub aplikacja wprowadza ograniczenia czasowe, to powinna dawać możliwość ich: wyłączenia, dostosowania (np. wydłużenia czasu), przedłużenia w trakcie działania.

To bardzo ważne dla osób, które potrzebują więcej czasu, na przykład: osób z niepełnosprawnościami poznawczymi lub ruchowymi, osób korzystających z czytników ekranu, osób, które czytają wolniej albo mają problemy z koncentracją.

Jeśli strona wymusza szybkie reakcje (np. „masz 30 sekund na wpisanie kodu”), a nie daje możliwości regulacji czasu, może stać się niedostępna lub frustrująca dla wielu użytkowników.

Punkt 2.2 składa się z kilku podpunktów — każdy z nich dotyczy innego aspektu związanego z czasem.

2.2.1 Dostosowanie czasu - A

Dostosowanie czasu mówi o tym, że jeśli jakaś funkcja na stronie ma ograniczenie czasowe, to użytkownik powinien mieć możliwość zareagowania na to ograniczenie w sposób, który daje mu komfort i kontrolę.

Zasada jest taka: jeśli strona wymaga od użytkownika działania w określonym czasie (np. sesja wygasa po 5 minutach, trzeba coś kliknąć w 30 sekund, licznik odlicza czas), to przynajmniej jedna z poniższych opcji musi być dostępna:
– Wyłączenie limitu czasu – użytkownik może całkowicie wyłączyć zegar (np. „Nie wylogowuj mnie automatycznie”).
– Dostosowanie limitu – użytkownik może sam wybrać dłuższy czas działania (np. zamiast 5 minut, ustawia 20 minut).
– Wydłużenie czasu w trakcie – użytkownik otrzymuje ostrzeżenie i może kliknąć „przedłuż” lub wykonać prostą akcję, aby zyskać więcej czasu.
– Wyjątki – jeśli ograniczenie czasu jest naprawdę nieuniknione, bo np. chodzi o aukcję na żywo albo transmisję na żywo, to strona nie musi tego regulować — ale tylko wtedy.

To wymaganie znajduje się na poziomie A, co oznacza, że jest podstawowym standardem dostępności. Dzięki niemu osoby, które potrzebują więcej czasu — czy to z powodu niepełnosprawności, czy chwilowej dekoncentracji — mogą spokojnie korzystać z treści i funkcji strony, bez stresu i pośpiechu.

2.2.2 Pauza, zatrzymanie, ukrycie - A

Ten punkt dotyczy wszelkich elementów na stronie, które poruszają się, migają, przewijają lub aktualizują automatycznie. WCAG 2.2.2 mówi, że jeśli taka treść jest widoczna przez więcej niż 5 sekund i może rozpraszać uwagę lub przeszkadzać w korzystaniu ze strony, to użytkownik musi mieć możliwość jej zatrzymania, ukrycia albo spauzowania.

Wyobraź sobie baner przewijający się co kilka sekund, tekst biegnący przez ekran, karuzelę ze slajdami, która zmienia się automatycznie, albo licznik aktualizujący dane w czasie rzeczywistym. Tego typu dynamiczne treści mogą być trudne do śledzenia — szczególnie dla osób z trudnościami w koncentracji, osób z padaczką światłoczułą albo tych, które korzystają z czytnika ekranu.

Strona powinna więc zawierać łatwy do znalezienia mechanizm (np. przycisk „pauza” lub „zatrzymaj”), który pozwala użytkownikowi przejąć kontrolę nad tym, co się dzieje na ekranie.

Wyjątkiem są sytuacje, w których ruch lub automatyczna zmiana jest niezbędna do funkcji strony – np. transmisja na żywo, czat w czasie rzeczywistym albo funkcja, która po zatrzymaniu nie miałaby sensu.<p/>

To wymaganie jest na poziomie A i zapewnia spokojniejsze i bardziej kontrolowane korzystanie ze strony, co znacząco wpływa na komfort i dostępność.

2.2.3 Bez ograniczeń czasowych - AAA

Ten punkt dotyczy wszelkich elementów na stronie, które poruszają się, migają, przewijają lub aktualizują automatycznie. WCAG 2.2.2 mówi, że jeśli taka treść jest widoczna przez więcej niż 5 sekund i może rozpraszać uwagę lub przeszkadzać w korzystaniu ze strony, to użytkownik musi mieć możliwość jej zatrzymania, ukrycia albo spauzowania.

Wyobraź sobie baner przewijający się co kilka sekund, tekst biegnący przez ekran, karuzelę ze slajdami, która zmienia się automatycznie, albo licznik aktualizujący dane w czasie rzeczywistym. Tego typu dynamiczne treści mogą być trudne do śledzenia — szczególnie dla osób z trudnościami w koncentracji, osób z padaczką światłoczułą albo tych, które korzystają z czytnika ekranu.

Strona powinna więc zawierać łatwy do znalezienia mechanizm (np. przycisk „pauza” lub „zatrzymaj”), który pozwala użytkownikowi przejąć kontrolę nad tym, co się dzieje na ekranie.

Wyjątkiem są sytuacje, w których ruch lub automatyczna zmiana jest niezbędna do funkcji strony – np. transmisja na żywo, czat w czasie rzeczywistym albo funkcja, która po zatrzymaniu nie miałaby sensu.

To wymaganie jest na poziomie A i zapewnia spokojniejsze i bardziej kontrolowane korzystanie ze strony, co znacząco wpływa na komfort i dostępność.

2.2.4 Przerywanie - AAA

Ten punkt dotyczy wszelkich elementów na stronie, które poruszają się, migają, przewijają lub aktualizują automatycznie. WCAG 2.2.2 mówi, że jeśli taka treść jest widoczna przez więcej niż 5 sekund i może rozpraszać uwagę lub przeszkadzać w korzystaniu ze strony, to użytkownik musi mieć możliwość jej zatrzymania, ukrycia albo spauzowania.

Wyobraź sobie baner przewijający się co kilka sekund, tekst biegnący przez ekran, karuzelę ze slajdami, która zmienia się automatycznie, albo licznik aktualizujący dane w czasie rzeczywistym. Tego typu dynamiczne treści mogą być trudne do śledzenia — szczególnie dla osób z trudnościami w koncentracji, osób z padaczką światłoczułą albo tych, które korzystają z czytnika ekranu.

Strona powinna więc zawierać łatwy do znalezienia mechanizm (np. przycisk „pauza” lub „zatrzymaj”), który pozwala użytkownikowi przejąć kontrolę nad tym, co się dzieje na ekranie.

Wyjątkiem są sytuacje, w których ruch lub automatyczna zmiana jest niezbędna do funkcji strony – np. transmisja na żywo, czat w czasie rzeczywistym albo funkcja, która po zatrzymaniu nie miałaby sensu.

To wymaganie jest na poziomie A i zapewnia spokojniejsze i bardziej kontrolowane korzystanie ze strony, co znacząco wpływa na komfort i dostępność.

2.2.5 Ponowne potwierdzenie autentyczności - AAA

Ten punkt dotyczy sytuacji, w których użytkownik został wcześniej zalogowany lub uwierzytelniony (np. przez hasło, kod SMS, logowanie bankowe) i jego sesja dobiega końca – bo np. strona wygasza ją po dłuższym czasie bezczynności.

WCAG 2.2.5 mówi, że jeśli taka sesja się kończy, to użytkownik powinien móc się ponownie zalogować bez utraty danych, nad którymi pracował. Innymi słowy: po ponownym potwierdzeniu tożsamości, powinien kontynuować od miejsca, w którym przerwał.

Przykład: wypełniasz długi formularz i zostajesz automatycznie wylogowany. Jeśli po ponownym zalogowaniu wszystko, co wpisałeś, znika — to nie spełnia tego punktu. Ale jeśli formularz zostaje przywrócony, i możesz kontynuować – to już tak.

To ważne szczególnie w usługach bankowych, urzędowych, e-commerce i wszędzie tam, gdzie logowanie i czas sesji mają znaczenie. Chroni to przed frustracją, powtarzaniem czynności i stratą cennych danych.

Ten punkt jest na poziomie AAA, więc nie jest obowiązkowy, ale zdecydowanie podnosi jakość doświadczenia użytkownika, zwłaszcza osób z wolniejszym tempem pracy, trudnościami w pisaniu czy rozumieniu formularzy.

2.2.6 Ostrzeżenie o limicie czasu - AAA

Ten punkt mówi, że jeśli na stronie ustawiony jest limit czasu, po którym może nastąpić utratę danych lub wylogowanie użytkownika, to osoba korzystająca z tej strony musi zostać wcześniej o tym ostrzeżona.

To znaczy: jeśli np. po 10 minutach bezczynności system ma zamiar wylogować użytkownika, powinien wcześniej wyświetlić informację, że czas się kończy — i dać mu szansę, by zareagował (np. kliknął przycisk „Przedłuż sesję”).

Jedyny wyjątek to sytuacja, w której utrata danych nie grozi użytkownikowi, bo jego dane i tak zostaną automatycznie zapisane na serwerze lub w przeglądarce przez co najmniej 20 godzin od ostatniego działania.

Dlaczego to ważne? Bo niektóre osoby potrzebują więcej czasu — np. do przeczytania tekstu, przemyślenia odpowiedzi, czy obsługi formularzy. Jeśli strona nagle „wyrzuci” je bez ostrzeżenia, może to prowadzić do stresu i frustracji, a także do utraty ważnych informacji, które były w trakcie wprowadzania.

Ten punkt znajduje się na poziomie AAA i pozwala użytkownikom zachować kontrolę nad tym, co dzieje się na stronie, nawet jeśli coś im chwilowo przerwie pracę.

2.3 Atak padaczki

Ataki padaczki mówi wprost: strona internetowa nie powinna zawierać treści, które mogą wywołać napad padaczki.

Najczęstszą przyczyną takiego ryzyka są migające światła, animacje lub błyski, szczególnie czerwone, które pojawiają się więcej niż 3 razy na sekundę. Dla większości ludzi są one tylko denerwujące, ale dla niektórych — niebezpieczne.

Ten punkt to przede wszystkim środek zapobiegawczy. Jeśli tworzysz np. film promocyjny, baner animowany, efekt specjalny, albo grę — musisz uważać, by nie stosować gwałtownych, powtarzających się błysków, które mogą zaszkodzić użytkownikom.

To wymaganie znajduje się na poziomie A, więc jest absolutną podstawą. Jego przestrzeganie chroni zdrowie użytkowników i sprawia, że strona jest bezpieczna dla wszystkich — bez względu na stan zdrowia.

2.3.1 Trzy błyski lub wartości poniżej progu - A

Ten punkt mówi, że żadna treść na stronie nie może błyskać częściej niż trzy razy na sekundę, chyba że te błyski mieszczą się poniżej tzw. progu bezpieczeństwa (czyli nie wywołują ryzyka napadu padaczkowego).

To dotyczy wszystkiego, co miga, mruga, błyska — może to być animacja wideo, reklama z efektem stroboskopu, gra z intensywnymi efektami świetlnymi czy nawet migający komunikat o błędzie.

Jeśli coś błyska więcej niż trzy razy na sekundę i nie jest odpowiednio złagodzone, to może być niebezpieczne dla osób z padaczką światłoczułą. Dlatego WCAG wymaga, by: albo zrezygnować z takich efektów albo upewnić się, że nie przekraczają bezpiecznych wartości, które określają eksperci medyczni (to tzw. próg błysków).

Dla bezpieczeństwa najlepiej po prostu unikać wszelkich błysków przekraczających tę częstotliwość — zwłaszcza czerwonych, jasnych i pełnoekranowych.

Ten punkt znajduje się na poziomie A, co oznacza, że jest absolutnie podstawowy. Chodzi tu nie tylko o dostępność, ale o realne bezpieczeństwo zdrowia użytkownika.

2.3.2 Trzy błyski - AAA

Ten punkt to zaostrzenie zasady z poprzedniego kryterium. Mówi on jasno: na stronie nie może być żadnych treści, które błyskają częściej niż trzy razy na sekundę — bez żadnych wyjątków.

W odróżnieniu od 2.3.1, tutaj nawet tzw. „bezpieczne błyski” (czyli poniżej progu medycznego) są niedozwolone. Nieważne, czy błysk jest mały, niepozorny czy łagodny — jeśli występuje częściej niż 3 razy na sekundę, to nie spełnia tego wymagania.

To wymóg bardzo rygorystyczny i znajduje się na poziomie AAA, czyli jest opcjonalny, ale stanowi najwyższy standard dostępności i bezpieczeństwa. Jest przeznaczony głównie dla stron i aplikacji, które chcą być w pełni dostępne dla wszystkich — także dla osób szczególnie wrażliwych na światło.

W praktyce oznacza to, że najlepiej unikać wszelkich migających lub stroboskopowych efektów, nawet jeśli wydają się „bezpieczne”. Zamiast tego można użyć delikatnych przejść, animacji o płynnej zmianie albo statycznych komunikatów.

2.3.3 Animacja po interakcji - AAA

Ten punkt dotyczy ruchomych animacji, które uruchamiają się po wykonaniu jakiejś akcji przez użytkownika, np. po kliknięciu przycisku, przesunięciu suwaka albo przewinięciu strony.

WCAG 2.3.3 mówi, że jeśli taka animacja nie jest absolutnie niezbędna do działania strony, to użytkownik powinien mieć możliwość jej wyłączenia.

Chodzi tu głównie o efekty wizualne, które mogą być rozpraszające, wywoływać dyskomfort a u niektórych osób (np. z zaburzeniami neurologicznymi, lękowymi czy ADHD) — nawet fizyczne objawy, jak zawroty głowy czy mdłości.

Przykład: po kliknięciu na kartę w interfejsie karta robi „salto” albo obraca się z dynamiczną animacją. Dla niektórych osób to efektowny detal. Dla innych – przeszkoda w odbiorze treści.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy w podstawowym zestawie, ale jego spełnienie sprawia, że strona staje się spokojniejsza, bardziej przewidywalna i przyjazna dla wszystkich użytkowników.

Najlepszym rozwiązaniem jest stosowanie ustawień systemowych — jeśli użytkownik w swoim systemie operacyjnym zaznaczył „preferuję ograniczone animacje”, strona powinna to uszanować i nie wyświetlać ruchomych efektów.

2.4 Możliwość nawigacji

Ten punkt dotyczy tego, jak łatwo i logicznie użytkownik może poruszać się po stronie internetowej. WCAG 2.4 – Możliwość nawigacji — skupia się na tym, żeby użytkownicy:
- mogli znaleźć potrzebne informacje, - zrozumieli, gdzie aktualnie się znajdują na stronie lub w strukturze serwisu, - oraz przemieszczali się w sposób przewidywalny i uporządkowany.

Nie chodzi tu tylko o menu czy spis treści, ale także o układ nagłówków, poprawną kolejność poruszania się po stronie za pomocą klawiatury, sensowne etykiety przycisków czy linków oraz odpowiednie tytuły stron. Wszystko to razem pomaga w orientacji i pozwala na komfortowe korzystanie ze strony — także osobom z niepełnosprawnościami, starszym użytkownikom czy osobom uczącym się nowej technologii.

Nawigacja to nie tylko funkcjonalność, ale też poczucie kontroli. Jeśli użytkownik wie, gdzie jest, i bez problemu potrafi wrócić, przejść dalej lub pominąć coś, co go nie interesuje — to oznacza, że strona jest dobrze zaprojektowana.

Sekcja 2.4 obejmuje kilka szczegółowych punktów — od możliwości pominięcia powtarzających się bloków, przez tytuły stron i kolejność fokusu, aż po widoczność wskaźnika klawiatury.

2.4.1 Możliwość pominięcia bloków - A

Ten punkt mówi, że użytkownik powinien mieć możliwość szybkiego przejścia do głównej treści strony, pomijając powtarzające się elementy, takie jak nagłówki, menu, paski boczne czy banery.

Chodzi o to, że wiele stron ma te same fragmenty na każdej podstronie — np. górne menu nawigacyjne, logo, pole wyszukiwania. Dla osób korzystających z klawiatury lub czytników ekranu przewijanie przez to wszystko na każdej stronie od nowa byłoby bardzo męczące.

Dlatego WCAG wymaga, żeby na początku strony znajdował się np. niewidoczny na pierwszy rzut oka, ale dostępny link tekstowy typu: „Przejdź do treści” lub „Pomiń nawigację”.

Gdy ktoś używa klawiatury (klawisz Tab), taki link powinien się pojawić i umożliwić szybki skok do właściwej treści strony.

Dzięki temu osoby korzystające z klawiatury, technologii wspomagających albo po prostu poruszające się szybko po stronie mają lepsze doświadczenie i większą kontrolę.

Ten punkt znajduje się na poziomie A, czyli należy do podstawowych wymagań dostępności.

2.4.2 Tytuł strony - A

Ten punkt mówi, że każda strona internetowa powinna mieć jasno określony i opisowy tytuł, który pokazuje, jaki jest jej cel lub temat.

Chodzi tu o tytuł widoczny na karcie przeglądarki (czyli ten zapisany w tagu <title> w kodzie HTML). To właśnie ten tytuł jest często pierwszą informacją, jaką użytkownik zobaczy — zarówno w przeglądarce, jak i np. w wynikach wyszukiwania albo w czytniku ekranu.

Dobrze dobrany tytuł pomaga zrozumieć, gdzie użytkownik się znajduje, ułatwia nawigację między wieloma otwartymi kartami, wspiera osoby korzystające z czytników ekranu, a także poprawia dostępność i SEO.

Przykład: zamiast ogólnego „Strona główna” — lepiej napisać „Strona główna – Biblioteka Miejska w Gdańsku”. Zamiast „Artykuł” — „Jak dodać podpis do dokumentu PDF – poradnik”.

Ten punkt jest na poziomie A, co oznacza, że należy do podstawowych zasad dostępności i powinien być spełniony na każdej stronie — nie tylko głównej, ale też podstronach, formularzach czy wynikach wyszukiwania.

2.4.3 Kolejność fokusu - A

Ten punkt dotyczy tego, w jakiej kolejności użytkownik porusza się po stronie za pomocą klawiatury, czyli tzw. fokusu. Fokus to aktywny element — taki, który aktualnie jest „na celowniku” i z którym można wejść w interakcję, np. kliknąć Enter lub Spację.

WCAG 2.4.3 mówi, że jeśli poruszanie się po stronie ma jakąkolwiek logiczną lub funkcjonalną kolejność (a prawie zawsze ma), to ta kolejność musi być zachowana przy używaniu klawiatury. Czyli: elementy powinny być odwiedzane w sensownej kolejności — z góry na dół, od lewej do prawej, nie powinno dochodzić do przeskakiwania w dziwne miejsca ani zapętlenia, użytkownik nie powinien czuć się zagubiony, bo coś nagle wyskoczyło poza kontekst.

Przykład dobrego działania: Użytkownik wciska Tab i najpierw trafia na logo, potem menu, później przycisk „Zaloguj się”, następnie na formularz i przycisk „Wyślij”.

Zły przykład: Użytkownik wciska Tab i nagle przenosi się z nagłówka od razu na stopkę, omijając całą treść, albo wraca w górę strony bez powodu.

To szczególnie ważne dla osób, które nie korzystają z myszy, tylko z klawiatury lub technologii wspomagających — muszą mieć poczucie, że poruszają się intuicyjnie i przewidywalnie.

Ten punkt znajduje się na poziomie A, więc jego spełnienie to absolutna podstawa dobrej dostępności.

2.4.4 Cel łącza (w kontekście) - A

Ten punkt mówi o tym, że użytkownik powinien zrozumieć, dokąd prowadzi link, zanim w niego kliknie — nawet jeśli patrzy tylko na sam tekst linku albo słucha go z czytnika ekranu.

To oznacza, że linki typu “kliknij tutaj”, “więcej”, “czytaj dalej” są niewystarczające, jeśli nie mają kontekstu. Osoba korzystająca z czytnika ekranu może usłyszeć jedynie listę linków na stronie — jeśli każdy z nich nazywa się „więcej”, to nie wiadomo, czego dotyczy.

Dlatego tekst linku powinien być konkretny i zrozumiały sam w sobie, albo przynajmniej wynikać z otoczenia — np. z tytułu akapitu lub nagłówka, który jest tuż przed linkiem.

Przykład zgodny z WCAG: „Więcej o historii miasta” – albo: Nagłówek: „Historia miasta”. Link pod spodem: „Więcej informacji”

Obie wersje dają użytkownikowi jasny obraz, co się stanie po kliknięciu.

Ten punkt znajduje się na poziomie A, więc należy do podstawowych zasad dostępności. Dzięki niemu poruszanie się po stronie jest przejrzyste, zrozumiałe i bez frustracji, zwłaszcza dla osób z niepełnosprawnością wzroku lub poznawczą.

2.4.5 Wiele dróg - AA

Ten punkt mówi, że użytkownik powinien mieć więcej niż jeden sposób, aby znaleźć stronę w obrębie serwisu, jeśli nie trafił na nią bezpośrednio.

Inaczej mówiąc — jeżeli Twoja strona jest częścią większego serwisu (np. blog, sklep, portal), to użytkownik powinien móc do niej dotrzeć nie tylko z głównego menu, ale też np. poprzez wyszukiwarkę, mapę strony, listę kategorii, indeks alfabetyczny, spis treści.

Dzięki temu każdy użytkownik — bez względu na styl nawigacji, możliwości poznawcze czy sposób korzystania z urządzenia — ma większą szansę odnaleźć to, czego szuka. Dla jednej osoby najwygodniejsza będzie struktura menu, dla innej — wyszukiwarka, a jeszcze inna może woleć przeglądać listę tematów.

Jedyny wyjątek to sytuacje, w których dana strona jest częścią jakiegoś procesu — np. formularz płatności, krok 2 z 3 — wtedy naturalnie dostęp do niej jest ograniczony.

Ten punkt znajduje się na poziomie AA, co oznacza, że należy do rozszerzonego, ale zalecanego poziomu dostępności. Spełnienie go zwiększa elastyczność strony i ułatwia orientację wszystkim użytkownikom, niezależnie od sposobu poruszania się po treściach.

2.4.6 Nagłówki i etykiety - AA

Ten punkt mówi, że nagłówki i etykiety na stronie powinny jasno opisywać, czego dotyczą. Czyli każdy nagłówek, tytuł sekcji czy podpis pola w formularzu powinien być zrozumiały, konkretny i pomocny.

To ważne, ponieważ nagłówki i etykiety pomagają użytkownikom szybko zorientować się w strukturze strony, umożliwiają przeskakiwanie między sekcjami (np. przy użyciu czytnika ekranu), ułatwiają wypełnianie formularzy i odnajdywanie informacji.

Na przykład: zamiast ogólnego nagłówka „Informacje” lepiej użyć „Informacje o zamówieniu”. Zamiast pola oznaczonego „Wpisz tutaj” — lepiej napisać „Adres e-mail”.

Im bardziej precyzyjnie opiszesz, do czego służy dany element, tym łatwiej użytkownikom — szczególnie osobom z niepełnosprawnościami poznawczymi lub korzystającym z technologii wspomagających — zrozumieć i wykonać działanie bez pomyłek i stresu.

Ten punkt znajduje się na poziomie AA, więc jest jednym z kluczowych zaleceń poprawiających dostępność i czytelność treści.

2.4.7 Widoczny fokus - AA

Ten punkt mówi, że gdy użytkownik porusza się po stronie za pomocą klawiatury, zawsze powinien widzieć, który element jest aktualnie aktywny, czyli który ma tzw. fokus.

Fokus to specjalne „podświetlenie” lub obramowanie elementu, które pokazuje, że właśnie ten przycisk, link, pole tekstowe czy inny element jest gotowy do działania — można go kliknąć klawiszem Enter, wypełnić albo aktywować.

Jeśli tego oznaczenia nie ma (albo jest prawie niewidoczne), osoba korzystająca wyłącznie z klawiatury może całkowicie stracić orientację na stronie — nie wiedząc, gdzie jest, co robi, ani co się stanie po naciśnięciu klawisza.

Dlatego WCAG wymaga, aby wszystkie interaktywne elementy miały wyraźny, widoczny fokus, który odróżnia się od tła, nie jest ukryty przez grafikę ani style CSS, nie znika ani nie ginie, gdy użytkownik naciska Tab lub Shift+Tab.

Ten punkt znajduje się na poziomie AA, czyli jest jednym z kluczowych dla zapewnienia wygodnej i dostępnej nawigacji — nie tylko dla osób z niepełnosprawnościami, ale też dla każdego, kto korzysta z klawiatury, np. na laptopie, w trybie oszczędzania baterii lub przy awarii myszy.

2.4.8 Lokalizacja - AAA

Ten punkt mówi, że użytkownik powinien mieć łatwy dostęp do informacji o tym, gdzie się aktualnie znajduje w obrębie większego zestawu stron — na przykład w serwisie internetowym, sklepie online czy systemie e-learningowym.

Inaczej mówiąc: strona powinna zawierać czytelny mechanizm wskazujący pozycję użytkownika, czyli coś, co działa jak „jesteś tutaj”.

Najpopularniejszym sposobem realizacji tego wymagania jest tzw. okruszkowe menu (ang. breadcrumbs), czyli pasek pokazujący ścieżkę, np.: Strona główna › Produkty › Elektronika › Smartfony › iPhone 13

Dzięki temu użytkownik wie gdzie się znajduje, jak głęboko „wszedł” w strukturę strony i jak może wrócić krok po kroku.

To szczególnie pomocne osobom z trudnościami poznawczymi, osobom korzystającym z czytników ekranu albo tym, którzy po prostu chcą się zorientować, czy są we właściwym miejscu.

Ten punkt znajduje się na poziomie AAA, czyli jest dobrowolny, ale bardzo korzystny. Jego zastosowanie zwiększa poczucie kontroli, zmniejsza zagubienie i poprawia ogólną wygodę poruszania się po stronie.

2.4.9 Cel łącza (z samego łącza) - AAA

Ten punkt mówi, że tekst linku powinien sam w sobie jasno wskazywać, dokąd prowadzi, bez konieczności czytania dodatkowego kontekstu wokół niego.

To znaczy, że użytkownik — np. korzystający z czytnika ekranu, który czyta tylko same linki — powinien od razu wiedzieć, co się stanie po kliknięciu. Nie powinien zgadywać ani wracać do poprzednich zdań, by się domyślić.

Przykład złego linku: „Kliknij tutaj”

Przykład zgodny z WCAG 2.4.9: „Zobacz cennik usług”

Wcześniej, w punkcie 2.4.4, dopuszczano sytuację, gdzie kontekst pochodził np. z nagłówka przed linkiem. Tutaj — ten kontekst nie może być potrzebny. Tekst linku musi być zrozumiały samodzielnie.

To wymaganie znajduje się na poziomie AAA, więc nie jest obowiązkowe w podstawowym zestawie WCAG, ale jego spełnienie znacząco poprawia komfort nawigacji, zwłaszcza dla osób niewidomych, dla osób, które przeszukują stronę za pomocą listy linków i dla każdego, kto chce szybko znaleźć konkretną informację.

2.4.10 Nagłówki sekcji - AAA

Ten punkt mówi, że dłuższe lub bardziej złożone treści powinny być podzielone na logiczne sekcje, a każda z nich powinna mieć swój nagłówek.

Nagłówki pomagają zrozumieć strukturę strony, ułatwiają szybkie odnalezienie informacji i umożliwiają skanowanie treści wzrokiem lub przy użyciu technologii wspomagających. Działają jak punkty orientacyjne, które mówią: „tu zaczyna się nowy temat”.

Nie chodzi tu tylko o wizualne pogrubienie tekstu. Nagłówki powinny być oznaczone odpowiednimi znacznikami HTML (<h1>, <h2>, <h3>, itd.), tak by były czytelne także dla czytników ekranu i innych narzędzi wspierających.

Dzięki temu osoba korzystająca z czytnika ekranu może przeskakiwać od nagłówka do nagłówka, użytkownik może się szybciej odnaleźć a cała treść staje się bardziej uporządkowana i przejrzysta.

To szczególnie ważne w przypadku dłuższych artykułów, stron pomocy, regulaminów, formularzy z wieloma sekcjami czy rozbudowanych podstron.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy, ale jego zastosowanie znacząco podnosi jakość i użyteczność treści — dla wszystkich użytkowników.

2.5 Metody obsługi

Metody obsługi podkreśla, że nie każdy użytkownik posługuje się myszą, dotykiem lub złożonymi gestami. Niektórzy używają klawiatury, przycisków głosowych, przełączników, a nawet pojedynczych ruchów głowy lub oczu. Dlatego strona powinna być przygotowana na różne sposoby obsługi — nie tylko te najpopularniejsze.

Zasady w tej sekcji koncentrują się m.in. na tym, aby: gesty wielopunktowe (np. uszczypnij, przesuń dwoma palcami) miały prostą alternatywę, działania wymagające dotyku były możliwe do wykonania także przez inne urządzenia, pola i przyciski były odpowiednio duże i łatwe do kliknięcia, nawet dla osób z ograniczoną precyzją ruchu, użytkownik miał możliwość kontrolowania funkcji uruchamianych ruchem urządzenia (np. potrząśnięciem telefonu).

Chodzi o to, by każdy — bez względu na sprzęt, sprawność czy sposób obsługi — mógł wygodnie korzystać z interfejsu strony.

Ta sekcja zawiera szczegółowe punkty, które rozwijają konkretne wymagania, i zaczyna się od 2.5.1 – Gesty dotykowe.

2.5.1 Gesty dotykowe - A

Ten punkt mówi, że jeśli jakaś funkcja na stronie wymaga gestów z użyciem więcej niż jednego palca (np. rozsuwanie palców, przesuwanie po ekranie w konkretnym kierunku lub wykonanie określonego ruchu), to ta sama funkcja powinna być dostępna również w prostszy sposób — np. za pomocą pojedynczego kliknięcia, stuknięcia czy przycisku.

Dlaczego to ważne? Bo nie wszyscy użytkownicy są w stanie wykonać gesty wymagające precyzji, szybkości albo siły obu dłoni. Osoby z niepełnosprawnościami ruchowymi, osoby starsze, a nawet użytkownicy na komputerach bez ekranów dotykowych — mogą nie mieć fizycznej możliwości wykonania takich gestów.

Przykład: Jeśli powiększenie zdjęcia działa tylko przez gest „rozsuwania palców” (tzw. pinch-to-zoom), to użytkownik powinien mieć też możliwość powiększenia go np. przez kliknięcie przycisku „+”.

To samo dotyczy np. przesuwania karuzeli zdjęć czy rysowania palcem — jeśli strona wymaga takiego gestu, musi też dać możliwość wykonania tej samej akcji w prostszy sposób.

Wyjątek: jeśli gest wielopunktowy lub oparty na ścieżce jest naprawdę niezbędny do działania (np. gra oparta na rysowaniu), to nie trzeba oferować alternatywy.

Ten punkt jest na poziomie A, więc spełnienie go to podstawa dostępności — i ogromna różnica dla wielu użytkowników.

2.5.2 Rezygnacja ze wskazania - A

Ten punkt dotyczy działań na stronie, które są wykonywane za pomocą dotyku — czyli gdy użytkownik naciska palcem na ekran (lub stylusem) w celu aktywowania jakiejś funkcji, np. kliknięcia przycisku, otwarcia menu albo uruchomienia akcji.

WCAG 2.5.2 mówi, że jeśli jakieś działanie uruchamia się już w momencie naciśnięcia, to użytkownik powinien mieć możliwość:
– zatrzymania tego działania przed jego zakończeniem,
– cofnięcia go po puszczeniu palca,
– albo mieć wybór, żeby coś się stało dopiero po puszczeniu dotyku, a nie od razu po jego rozpoczęciu.

Chodzi o to, by użytkownik miał kontrolę i nie wywołał czegoś przypadkowo tylko dlatego, że coś niechcący dotknął lub musnął palcem. To szczególnie ważne dla osób:
– z drżeniem rąk,
– z trudnościami motorycznymi,
– albo korzystających z urządzeń z nietypową czułością ekranu.

Przykład: Jeśli dotknięcie elementu natychmiast uruchamia usuwanie pliku, to użytkownik powinien mieć możliwość przerwania tego działania (np. poprzez cofnięcie palca lub kliknięcie „anuluj”).

Ten punkt jest na poziomie A, więc należy do podstawowych zasad dostępności. Zapewnia, że każde działanie dotykowe będzie bezpieczne i da użytkownikowi szansę na decyzję, a nie przypadkowe kliknięcie.

2.5.3 Etykieta w nazwie - A

Ten punkt dotyczy komponentów interfejsu użytkownika, które mają etykietę widoczną na ekranie, np. przyciski, pola formularza czy linki. Chodzi o to, aby ta widoczna etykieta była zgodna z nazwą, którą rozpoznają technologie wspomagające, np. czytniki ekranu albo systemy rozpoznawania mowy.

W praktyce:
– jeśli na przycisku widać napis „Szukaj”,
– to również jego nazwa programowa (czyli np. aria-label, title, lub tekst przycisku w kodzie) powinna zawierać słowo „Szukaj”.

Dlaczego to ważne? Bo niektóre osoby sterują komputerem głosowo, mówiąc np. „kliknij Szukaj”. Jeśli system nie widzi w kodzie słowa „Szukaj”, tylko np. „btn-search”, to polecenie nie zadziała. Podobnie, czytnik ekranu może odczytać coś zupełnie innego niż to, co widzi użytkownik na ekranie — i wtedy łatwo o dezorientację.

Przykład poprawny: Widoczny przycisk: „Zaloguj się”. W kodzie: <button aria-label="Zaloguj się">Zaloguj się</button>

Przykład błędny: Widoczny tekst: „Zaloguj się”. W kodzie: <button aria-label="Wejdź do panelu"></button> – to może zmylić system rozpoznawania głosu lub czytnik ekranu.

Ten punkt znajduje się na poziomie A, czyli jest obowiązkowy w podstawowym zakresie dostępności i zapewnia spójność między tym, co widać, a tym, co słyszy lub mówi użytkownik.

2.5.4 Aktywowanie ruchem - A

Ten punkt mówi o tym, że jeśli jakaś funkcja na stronie lub w aplikacji uruchamia się przez ruch — na przykład potrząśnięcie telefonem albo przechylenie go — to użytkownik powinien mieć możliwość wykonania tej samej czynności w inny, prostszy sposób. Na przykład zamiast potrząsania, wystarczy kliknąć przycisk na ekranie.

Nie każdy może wykonać taki ruch. Niektórzy użytkownicy mają ograniczoną sprawność, a inni korzystają z komputerów bez wbudowanych czujników ruchu. Dlatego strona lub aplikacja powinna zapewniać alternatywę. Dodatkowo, jeśli ktoś nie chce przypadkowo aktywować czegoś przez poruszenie urządzeniem, powinien móc to wyłączyć.

Są jednak wyjątki. Jeśli ruch jest niezbędny do działania danej funkcji — na przykład w grze, która polega na poruszaniu telefonem — wtedy nie trzeba dodawać innej opcji.

To wymaganie jest na poziomie A, więc należy do podstawowych zasad dostępności. Dzięki niemu więcej osób może korzystać z serwisów i aplikacji bez przeszkód.

2.5.5 Rozmiar celu dotykowego - AAA

Ten punkt mówi o tym, że elementy, które można dotknąć palcem na ekranie, powinny być odpowiednio duże. Chodzi o to, żeby łatwo było w nie trafić i żeby nie trzeba było celować z wielką precyzją. Jeśli ktoś ma większe palce, trzęsą mu się ręce albo używa urządzenia o małym ekranie, za mały przycisk może być trudny do kliknięcia. Dlatego zaleca się, żeby elementy dotykowe miały co najmniej 44 na 44 piksele (czyli były mniej więcej wielkości opuszków palców).

Nie zawsze trzeba tego pilnować. Jeśli taki element jest np. częścią tekstu, albo istnieje inny, większy odpowiednik tego przycisku w innym miejscu na stronie, to można zastosować wyjątek. Ale w większości przypadków warto zadbać o to, żeby guziki, linki, ikony i inne rzeczy do klikania miały odpowiedni rozmiar — wtedy są po prostu wygodniejsze i bezpieczniejsze w użyciu.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy w podstawowym zakresie dostępności, ale bardzo ułatwia życie użytkownikom — niezależnie od ich sprawności.

2.5.6 Równoległy mechanizm wprowadzania danych - AAA

Ten punkt mówi, że strona internetowa lub aplikacja nie powinna ograniczać sposobu, w jaki użytkownik może wprowadzać dane. Jeżeli urządzenie pozwala na kilka metod wprowadzania (na przykład klawiatura, ekran dotykowy, głos, mysz), to użytkownik powinien móc skorzystać z tej, która jest dla niego najwygodniejsza.

To oznacza, że nie powinno się zmuszać nikogo do używania jednej konkretnej metody, chyba że ma to naprawdę ważny powód. Na przykład: jeśli formularz działa tylko z użyciem głosu, a nie można go wypełnić klawiaturą, to może to być problem dla wielu osób.

Oczywiście, są wyjątki — na przykład wtedy, gdy ograniczenie sposobu wprowadzania danych jest potrzebne dla bezpieczeństwa albo wynika z ustawień użytkownika. Ale w większości przypadków warto dawać wybór. Dzięki temu osoby z różnymi potrzebami, urządzeniami i umiejętnościami mogą korzystać ze strony bez przeszkód.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy w podstawowym zakresie, ale jego spełnienie znacznie zwiększa komfort i dostępność serwisów.

3 Zrozumiałość

Zrozumiałość to trzecia zasada dostępności, która mówi o tym, że wszystko na stronie — zarówno treść, jak i sposób jej działania — powinno być jasne i łatwe do zrozumienia dla każdego użytkownika. Oznacza to, że język używany na stronie powinien być czytelny i dostosowany do odbiorcy. Jeśli używane są skróty, trudne słowa, żargon lub specjalistyczne wyrażenia, warto je wyjaśnić albo dać możliwość poznania ich znaczenia. Formularze powinny być opisane w sposób, który nie pozostawia wątpliwości — użytkownik powinien wiedzieć, co ma wpisać w konkretne pole i co się stanie, gdy kliknie przycisk. Ważne jest też, aby sposób działania strony był przewidywalny. To znaczy, że elementy, które wyglądają podobnie i pełnią te same funkcje, powinny działać zawsze tak samo. Jeśli użytkownik wprowadzi jakiś błąd, np. nie wypełni obowiązkowego pola, powinien otrzymać jasną informację o tym, co poszło nie tak i jak to poprawić. Dzięki zasadzie zrozumiałości strona jest bardziej przyjazna i intuicyjna — nie wymaga domyślania się ani specjalnej wiedzy, żeby z niej skorzystać.

3.1 Możliwość odczytania

Ta sekcja dotyczy tego, żeby teksty na stronie były zrozumiałe i czytelne dla jak najszerszego grona odbiorców. Chodzi tu nie tylko o to, jak treść wygląda, ale przede wszystkim — w jakim języku jest napisana, czy można ją dobrze zinterpretować, i czy trudniejsze słowa lub skróty da się łatwo wyjaśnić.

Jeśli użytkownik nie wie, w jakim języku jest tekst, czy napotka trudne wyrazy, skróty lub fachowe sformułowania, to może mieć problem ze zrozumieniem treści — zwłaszcza osoby z trudnościami poznawczymi, słabiej znające język, dzieci, osoby starsze czy korzystające z tłumaczy maszynowych lub czytników ekranu.

Dlatego WCAG zaleca:
– aby język strony był jasno określony w kodzie,
– aby zmiany języka wewnątrz tekstu też były oznaczone,
– aby trudniejsze słowa, skróty i nietypowe zwroty miały w razie potrzeby swoje wyjaśnienie.

Dzięki temu strona staje się bardziej przyjazna, przejrzysta i dostępna – nawet jeśli porusza skomplikowane tematy.

3.1.1 Język strony - A

Ten punkt mówi, że strona internetowa powinna mieć jasno określony język, w jakim została napisana — i to nie tylko wizualnie dla człowieka, ale także w kodzie strony, żeby wiedziały o tym również technologie wspomagające, takie jak czytniki ekranu.

Jeśli w kodzie nie ma informacji, że strona jest np. po polsku, to czytnik ekranu może próbować odczytać ją po angielsku, niemiecku albo w jakimkolwiek domyślnym języku. Wtedy tekst będzie brzmiał dziwnie, niezrozumiale i może całkowicie stracić sens.

Podobnie dzieje się w przypadku tłumaczy online — jeśli nie wiedzą, w jakim języku jest treść, nie przetłumaczą jej poprawnie.

Ustawienie języka strony odbywa się najczęściej w znaczniku <html> w kodzie — np. tak: <html lang="pl">. Dzięki temu zarówno przeglądarki, jak i narzędzia dostępności wiedzą od razu, że cała strona jest po polsku — i mogą odpowiednio dostosować głos lektora, tłumaczenie czy sprawdzanie pisowni.

Ten punkt znajduje się na poziomie A, czyli jest jednym z podstawowych wymagań dostępności. Bez niego wiele osób może mieć trudności w zrozumieniu nawet najprostszej treści.

3.1.2 Język części - AA

Ten punkt mówi, że jeśli na stronie pojawiają się fragmenty tekstu w innym języku niż główny język strony, to powinny być one oznaczone w kodzie jako tekst w tym właśnie języku.

Chodzi o sytuacje, gdy np. strona jest po polsku, ale w treści występują pojedyncze słowa, cytaty lub zwroty po angielsku, francusku czy w innym języku. Wtedy przeglądarka albo czytnik ekranu powinien wiedzieć, że ma na chwilę zmienić język czytania — inaczej wypowie takie słowo zniekształcone, niezgodnie z jego prawdziwym brzmieniem, co może być mylące lub po prostu zabawnie błędne.

Na przykład: Jeśli na stronie jest zdanie: „To był prawdziwy game changer”, to słowo „game changer” powinno być w kodzie oznaczone jako angielskie. W HTML wyglądałoby to tak: To był prawdziwy <span lang="en">game changer</span>.

Dzięki temu czytnik ekranu przełączy się na odpowiedni akcent i przeczyta to poprawnie po angielsku.

Ten punkt znajduje się na poziomie AA, więc nie jest absolutnym minimum, ale jest bardzo ważny dla zrozumiałości treści, zwłaszcza dla osób korzystających z technologii wspomagających.

3.1.3 Nietypowe słowa - AAA

Ten punkt mówi, że jeśli na stronie pojawiają się słowa, które są rzadko używane, trudne, specjalistyczne, żargonowe albo mają inne znaczenie niż zwykle, to powinien istnieć sposób na ich wyjaśnienie.

Nie każdy użytkownik rozumie język branżowy, naukowy czy techniczny. Osoby młodsze, starsze, uczące się języka lub mające trudności z czytaniem mogą nie wiedzieć, co oznaczają pewne terminy. Dlatego warto im pomóc, dając dodatkowe objaśnienia, słowniczek, definicje albo podpowiedzi w kontekście.

Na przykład, jeśli w tekście używasz słowa „interoperacyjność” albo „asynchroniczny”, dobrze byłoby, żeby użytkownik mógł kliknąć w słowo i zobaczyć krótkie wytłumaczenie — albo przeczytać definicję w słowniczku na stronie.

Nie chodzi o to, żeby unikać trudnych słów — tylko o to, żeby zapewnić możliwość ich zrozumienia.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy w podstawowych wymaganiach WCAG, ale znacząco poprawia dostępność dla osób, które nie są specjalistami w danym temacie.

3.1.4 Skróty - AAA

Ten punkt mówi, że jeśli na stronie używasz skrótów, to użytkownik powinien mieć możliwość dowiedzenia się, co one oznaczają.

Skróty mogą być wygodne, ale nie zawsze są zrozumiałe — zwłaszcza dla osób, które nie znają kontekstu, są spoza danej branży, uczą się języka albo korzystają z czytników ekranu. Dla takich użytkowników skrót może wyglądać jak losowe litery.

Na przykład: Jeśli na stronie pojawia się skrót BIP, API, CSS, USG albo RWD, to powinien być sposób, by dowiedzieć się, co one znaczą — np. po najechaniu kursorem, kliknięciu lub w słowniczku na stronie.

W HTML można to zrobić na przykład tak: <abbr title="Biuletyn Informacji Publicznej">BIP</abbr>

Wtedy po najechaniu myszką pokaże się pełna nazwa. A czytnik ekranu odczyta „BIP, Biuletyn Informacji Publicznej”.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy w podstawowym zestawie zasad, ale znacząco poprawia zrozumiałość tekstu i komfort czytania dla różnych użytkowników.

3.1.5 Poziom umiejętności czytania - AAA

Ten punkt mówi, że jeśli tekst na stronie jest trudny i wymaga wysokiego poziomu czytania, to powinno się zapewnić prostszą wersję lub dodatkowe wyjaśnienie.

Nie każdy użytkownik czyta na takim samym poziomie. Niektórzy mogą mieć problemy z długimi zdaniami, skomplikowanym słownictwem albo abstrakcyjnymi pojęciami. Dlatego jeśli strona zawiera treści, które są zrozumiałe tylko dla osób z wyższym wykształceniem albo specjalistyczną wiedzą, to dobrze byłoby udostępnić wersję bardziej przystępną.

Na przykład: Jeśli opisujesz skomplikowaną procedurę prawną, możesz dodać obok streszczenie w prostych słowach. Jeśli używasz trudnych wyrażeń, możesz je wyjaśnić w nawiasie lub w osobnym okienku z podpowiedzią.

Ten punkt nie dotyczy nazw własnych czy tytułów, tylko ogólnego poziomu tekstu — czy da się go zrozumieć bez specjalistycznej wiedzy. Chodzi o to, żeby treści były dostępne także dla osób z trudnościami w czytaniu, osób uczących się języka, starszych użytkowników czy osób z niepełnosprawnościami poznawczymi.

To kryterium znajduje się na poziomie AAA, więc nie jest obowiązkowe, ale jego spełnienie sprawia, że strona staje się naprawdę inkluzywna i bardziej przyjazna dla każdego.

3.1.6 Wymowa - AAA

Ten punkt mówi, że jeśli na stronie znajdują się słowa, które mogą być trudne do wymówienia (np. nietypowe wyrazy, nazwy własne, skróty lub obce słowa), to powinno być możliwość sprawdzenia, jak te słowa się wymawia.

Chodzi o to, że nie każdy użytkownik zna wymowę trudniejszych słów. Może to dotyczyć osób uczących się języka, osób z problemami ze słuchem, osób starszych czy osób korzystających z czytników ekranu, które muszą odczytać tekst na głos. Bez odpowiedniej informacji o wymowie, takie osoby mogą nie zrozumieć, jak dane słowo brzmi lub jak powinno zostać wypowiedziane.

Dobre rozwiązanie to dodanie mechanizmu sprawdzania wymowy, który może działać poprzez:
– pokazanie transkrypcji fonetycznej (np. zapis wymowy słowa),
– umożliwienie odsłuchania wymowy przez kliknięcie lub najechanie kursorem na słowo.

Na przykład:
Jeśli na stronie jest słowo „psychozofia” (które może być trudne do wymówienia), warto dodać możliwość odsłuchania jego wymowy lub umieścić zapisaną wersję fonetyczną (np. „psy-cho-zo-fia”) obok.

Ten punkt znajduje się na poziomie AAA, więc nie jest obowiązkowy, ale jego spełnienie znacząco ułatwia zrozumienie tekstu, szczególnie w przypadku trudnych lub obcych słów.

3.2 Przewidywalność

Ten punkt mówi, że strony internetowe powinny być przewidywalne i działać w sposób, który użytkownik może łatwo zrozumieć.

Chodzi o to, żeby użytkownik wiedział, czego się spodziewać, gdy będzie korzystał z interakcji na stronie. Strona powinna być tak zaprojektowana, żeby użytkownik nie czuł się zaskoczony ani zagubiony. Na przykład, jeżeli kliknie przycisk, to powinien wiedzieć, co się stanie, a interakcje powinny działać zgodnie z tym, co użytkownik już zna.

Ważne zasady w tym punkcie to: - Przewidywalność interakcji — na przykład, jeśli klikniesz na link, który wygląda jak przycisk, to powinno to rzeczywiście być linkiem, a nie czymś innym, by użytkownik wiedział, co kliknął.
- Spójność — jeśli na jednej stronie kliknięcie przycisku powoduje otwarcie nowego okna, to na wszystkich stronach powinno działać w ten sam sposób.
- Zrozumiałe zmiany kontekstu — np. jeśli po kliknięciu na formularz wprowadzane dane zmieniają się w sposób, którego użytkownik się nie spodziewa, to powinno być wyraźnie wyjaśnione, dlaczego to się dzieje.

Wszystkie te zasady mają na celu zapewnienie, żeby strona była łatwa do zrozumienia i używania, a użytkownik nie był zaskoczony niespodziewanymi zmianami.

Ten punkt jest na poziomie AA, co oznacza, że jest to ważny element w poprawianiu użyteczności strony, ale nie jest aż tak wymagający jak punkt na poziomie A.

3.2.1 Po otrzymaniu fokusu - A

Ten punkt mówi, że jeśli jakiś element na stronie (np. przycisk, pole formularza, link) zyskuje fokus, to nie powinno to powodować żadnej nieoczekiwanej zmiany na stronie.

Fokus to stan, w którym dany element jest aktywny i gotowy do interakcji. Użytkownicy nawigujący po stronie przy użyciu klawiatury lub technologii wspomagających przechodzą z jednego elementu do drugiego, ale zmiana fokusu nie powinna niespodziewanie zmieniać treści, układu strony ani powodować niezamierzonych akcji.

Na przykład:
- Jeśli użytkownik przechodzi z pola tekstowego na przycisk (za pomocą klawisza Tab), nie powinno to automatycznie powodować otwarcia okna, zmiany nawigacji ani wysłania formularza.
- W sytuacjach, gdy przejście fokusu może wywołać jakąś akcję, użytkownik powinien być o tym wcześniej poinformowany, a opcja ta powinna być w pełni kontrolowana.

W skrócie: jeśli użytkownik zmienia fokus, to strona powinna działać zgodnie z jego oczekiwaniami, a nie wprowadzać go w zaskoczenie.

Ten punkt jest na poziomie A, więc jest to jedno z podstawowych wymagań dostępności, które zapewnia, że użytkownik ma pełną kontrolę nad stroną i nie zostanie zaskoczony żadnymi nieoczekiwanymi zmianami.

3.2.2 Podczas wprowadzania danych - A

Ten punkt mówi, że zmiany ustawień lub danych na stronie nie powinny powodować automatycznych, nieoczekiwanych zmian w kontekście.

Jeśli użytkownik wprowadza dane w formularzu, zmienia ustawienia, wybiera opcje czy klika na coś, to zmiany wprowadzone przez niego nie powinny nagle zmieniać całej strony, chyba że użytkownik został wcześniej o tym poinformowany.

Przykład złego działania:
- Użytkownik zaznacza pole wyboru „Chcę otrzymać newsletter”. W wyniku tego zaznaczenia od razu pojawia się wyskakujące okno z komunikatem „Zarejestruj się do newslettera”, które zmienia cały układ strony.

Przykład dobrego działania:
- Użytkownik zaznacza „Chcę otrzymać newsletter”, a po zaznaczeniu w górnej części formularza pojawia się informacja lub opcja, która nie powoduje żadnej zmiany kontekstu.

O co chodzi?
Użytkownik powinien być świadomy wszelkich zmian, które zachodzą w wyniku jego działań. Strona powinna dawać użytkownikowi pełną kontrolę nad tym, co się dzieje. Wszelkie zmiany w kontekście (np. zmiana wartości w formularzu, ukrycie sekcji) muszą być oczekiwane i jasno zaplanowane, a użytkownik powinien mieć możliwość ich anulowania, jeśli tego chce.

Ten punkt jest na poziomie A, więc należy do podstawowych zasad dostępności.

3.2.3 Spójna nawigacja - AA

Ten punkt mówi, że mechanizmy nawigacji, które powtarzają się na wielu stronach w obrębie jednej witryny, powinny występować w tej samej kolejności i z tymi samymi funkcjami.

Chodzi o to, żeby użytkownicy nie musieli uczyć się nowego sposobu poruszania się po stronie za każdym razem, kiedy przechodzą na inną podstronę. Jeśli na jednej stronie nawigacja jest u góry, na drugiej — w innym miejscu, a na trzeciej — w ogóle jej brakuje, to może to sprawić, że użytkownik będzie się czuł zagubiony.

Warto, żeby:
- menu główne było w tym samym miejscu na wszystkich stronach,
- elementy nawigacyjne były w tej samej kolejności (np. przycisk „Powrót do góry” na końcu strony, a menu w stałym miejscu).

Wszystkie te rzeczy sprawiają, że poruszanie się po stronie staje się łatwiejsze, bardziej intuicyjne i przewidywalne, co zwiększa komfort użytkowania, zwłaszcza dla osób z ograniczeniami poznawczymi lub korzystających z technologii wspomagających.

Ten punkt znajduje się na poziomie AA, więc jest ważny, ale nie absolutnie podstawowy. Dbałość o spójność w nawigacji zapewnia lepszą i bardziej komfortową obsługę strony.

3.2.4 Spójna identyfikacja - AA

Ten punkt mówi, że komponenty, które mają tę samą funkcjonalność w obrębie jednej strony lub w ramach całego serwisu, powinny być rozpoznawane w ten sam sposób.

Chodzi o to, aby użytkownicy nie musieli zgadywać, jak działają różne elementy na stronie, tylko po prostu wiedzieli, co robią. Na przykład, jeśli na jednej stronie przycisk do wyszukiwania ma ikonę lupy i tekst „Szukaj”, to na innych stronach ten sam przycisk również powinien wyglądać tak samo, żeby użytkownicy wiedzieli, że wykonuje tę samą funkcję.

Podobnie:
- Jeśli w jednym miejscu formularza pole tekstowe do wpisania adresu e-mail ma etykietę „Wpisz adres e-mail”, to w innych miejscach formularzy z podobnym celem również powinna być używana ta sama etykieta.
- Linki o tej samej funkcji (np. „Więcej informacji”) powinny mieć ten sam tekst lub układ na każdej stronie.

Dzięki temu użytkownicy mogą szybciej zrozumieć, jak poruszać się po stronie, ponieważ identyfikacja przycisków, linków czy innych komponentów interfejsu będzie zawsze spójna.

Ten punkt znajduje się na poziomie AA, więc jest istotny dla zapewnienia komfortu i przewidywalności na stronie, ale nie jest absolutnie podstawowym wymaganiem.

3.2.5 Zmiana na żądanie - AAA

Ten punkt mówi, że wszystkie zmiany na stronie, które mogą się zdarzyć w wyniku działania użytkownika, powinny być inicjowane przez niego lub przynajmniej możliwe do wyłączenia przez niego.

Chodzi o to, że jeśli strona automatycznie zmienia coś na ekranie, np. wyświetla komunikat, zmienia układ, odświeża treść, uruchamia animację, to użytkownik powinien mieć kontrolę nad tym procesem. Tzn. jeśli nie chce, żeby coś się zmieniało, powinien mieć możliwość zatrzymania tej zmiany lub zatrzymania jej odświeżania.

Na przykład:
- Jeśli na stronie pojawia się wyskakujące okno informacyjne, które znika po kilku sekundach, to użytkownik powinien mieć możliwość zatrzymania tego.
- Jeśli strona automatycznie odświeża się co jakiś czas, to użytkownik powinien móc wyłączyć tę funkcję.

Tego typu zasady są bardzo ważne dla osób, które korzystają z technologii wspomagających (np. czytniki ekranu) lub mają trudności z koncentracją — automatyczne zmiany mogą im przeszkadzać lub dezorientować.

Ten punkt jest na poziomie AAA, co oznacza, że nie jest wymagany w podstawowych zasadach dostępności, ale znacznie poprawia komfort użytkowania strony.

3.3 Pomoc przy wprowadzaniu informacji

Ten punkt mówi, że strony internetowe powinny pomagać użytkownikom unikać błędów podczas wprowadzania danych oraz ułatwiać ich poprawianie.

Wielu użytkowników napotyka trudności przy wypełnianiu formularzy, szczególnie jeśli wymagane są różne informacje — np. imię, nazwisko, adres, numer karty kredytowej. Pomocne wskazówki, walidacja danych i możliwość poprawienia błędów mogą znacznie ułatwić im to zadanie.

Oto główne zasady tego punktu:
- Identyfikacja błędów — Jeśli użytkownik popełni błąd (np. wpisze zły adres e-mail), strona powinna go poinformować i wskazać, co jest nie tak. Przykład: „Nieprawidłowy adres e-mail. Sprawdź, czy nie brakuje @.”
- Sugestie korekty — Jeśli system rozpozna błąd, powinien zaproponować rozwiązanie. Przykład: „Adres e-mail powinien zawierać znak @, np. ‘example@domain.com’.”
- Instrukcje lub etykiety — Jeśli użytkownik ma wprowadzić dane w określonym formacie (np. numer telefonu, kod pocztowy), powinny być dostępne jasne instrukcje lub przykłady, które pokażą mu, jak to zrobić.

Dzięki tym zasadom strona staje się bardziej przyjazna i nie powoduje frustracji u osób, które popełniają błędy, zwłaszcza jeśli są one dla nich trudne do dostrzegania lub rozumienia.

Ten punkt znajduje się na poziomie AA, co oznacza, że jest bardzo ważny, ale nie absolutnie obowiązkowy w podstawowym zestawie WCAG.

3.3.1 Identyfikacja błędu - A

Ten punkt mówi, że jeśli użytkownik popełni błąd podczas wypełniania formularza, strona powinna wskazać, co jest nie tak z wprowadzonymi danymi.

Kiedy ktoś wypełnia formularz, może się zdarzyć, że wpisze coś niepoprawnie — na przykład błędny adres e-mail, niepełny numer telefonu lub niewłaściwy format daty. Strona powinna jasno poinformować użytkownika, co jest nie tak, żeby mógł poprawić błąd i kontynuować.

Na przykład:
- Jeśli ktoś wpisuje adres e-mail bez znaku „@”, strona powinna pokazać komunikat typu: „Adres e-mail jest nieprawidłowy. Sprawdź, czy zawiera znak @.”
- Jeśli ktoś nie wypełni obowiązkowego pola, powinien otrzymać komunikat: „To pole jest wymagane. Proszę je uzupełnić.”

Ważne jest, by takie komunikaty były czytelne, zrozumiałe i pomagały użytkownikowi szybko poprawić błąd.

Ten punkt znajduje się na poziomie A, co oznacza, że jest to jedno z podstawowych wymagań dostępności — powinno się go zawsze stosować, aby użytkownicy nie byli zdezorientowani lub nie musieli zgadywać, co poszło nie tak.

3.3.2 Etykiety lub instrukcje - A

Ten punkt mówi, że jeśli użytkownik popełni błąd podczas wypełniania formularza, strona powinna wskazać, co jest nie tak z wprowadzonymi danymi.

Kiedy ktoś wypełnia formularz, może się zdarzyć, że wpisze coś niepoprawnie — na przykład błędny adres e-mail, niepełny numer telefonu lub niewłaściwy format daty. Strona powinna jasno poinformować użytkownika, co jest nie tak, żeby mógł poprawić błąd i kontynuować.

Na przykład:
- Jeśli ktoś wpisuje adres e-mail bez znaku „@”, strona powinna pokazać komunikat typu: „Adres e-mail jest nieprawidłowy. Sprawdź, czy zawiera znak @.”
- Jeśli ktoś nie wypełni obowiązkowego pola, powinien otrzymać komunikat: „To pole jest wymagane. Proszę je uzupełnić.”

Ważne jest, by takie komunikaty były czytelne, zrozumiałe i pomagały użytkownikowi szybko poprawić błąd.

Ten punkt znajduje się na poziomie A, co oznacza, że jest to jedno z podstawowych wymagań dostępności — powinno się go zawsze stosować, aby użytkownicy nie byli zdezorientowani lub nie musieli zgadywać, co poszło nie tak.

3.3.3 Sugestie korekty błędów - AA

Ten punkt mówi, że jeśli podczas wypełniania formularza użytkownik popełni błąd, a system rozpozna ten błąd, to strona powinna zaoferować użytkownikowi sugestię lub rozwiązanie, jak poprawić ten błąd.

Na przykład:
- Jeśli użytkownik wpisuje adres e-mail w niepoprawnym formacie (np. brakuje „@”), strona powinna nie tylko pokazać komunikat o błędzie, ale również zaproponować sposób naprawy, np. „Adres e-mail powinien zawierać znak @. Proszę dodać go do adresu.”
- Jeśli użytkownik wpisuje zły format daty, np. „32/13/2022” (gdzie jest nieprawidłowy dzień i miesiąc), strona powinna podpowiedzieć, że „Proszę wpisać datę w formacie DD/MM/RRRR, np. 25/12/2022.”

Chodzi o to, żeby pomóc użytkownikowi szybko i łatwo naprawić błędy, które popełnił, bez konieczności szukania pomocy lub zgadywania, co zrobił źle.

Ten punkt znajduje się na poziomie AA, co oznacza, że jego spełnienie jest bardzo ważne, ale nie jest absolutnie podstawowym wymaganiem w dostępności stron internetowych.

3.3.4 Zapobieganie błędom (prawnym, finansowym, w danych) - AA

Ten punkt mówi, że jeśli podczas wypełniania formularza użytkownik popełni błąd, a system rozpozna ten błąd, to strona powinna zaoferować użytkownikowi sugestię lub rozwiązanie, jak poprawić ten błąd.

Na przykład:
- Jeśli użytkownik wpisuje adres e-mail w niepoprawnym formacie (np. brakuje „@”), strona powinna nie tylko pokazać komunikat o błędzie, ale również zaproponować sposób naprawy, np. „Adres e-mail powinien zawierać znak @. Proszę dodać go do adresu.”
- Jeśli użytkownik wpisuje zły format daty, np. „32/13/2022” (gdzie jest nieprawidłowy dzień i miesiąc), strona powinna podpowiedzieć, że „Proszę wpisać datę w formacie DD/MM/RRRR, np. 25/12/2022.”

Chodzi o to, żeby pomóc użytkownikowi szybko i łatwo naprawić błędy, które popełnił, bez konieczności szukania pomocy lub zgadywania, co zrobił źle.

Ten punkt znajduje się na poziomie AA, co oznacza, że jego spełnienie jest bardzo ważne, ale nie jest absolutnie podstawowym wymaganiem w dostępności stron internetowych.

3.3.5 Pomoc - AAA

Ten punkt mówi, że strony internetowe powinny zapewniać pomoc kontekstową, która pomoże użytkownikom w trakcie interakcji z formularzami lub innymi elementami na stronie.

Pomoc kontekstowa to dodatkowe informacje, które użytkownik może uzyskać w razie potrzeby. Może to być np. wyjaśnienie, jak prawidłowo wypełnić formularz, co wpisać w określone pole, jakie wymagania muszą być spełnione przy wypełnianiu danych, lub czym są wymagane pola.

Na przykład: - Formularz z adresem e-mail: Obok pola wpisywania adresu e-mail użytkownik może zobaczyć krótką podpowiedź „Proszę wpisać swój adres e-mail, np. imię@example.com”.
- Opis obowiązkowych pól: Przy formularzu rejestracyjnym można dodać informację „Pola oznaczone gwiazdką (*) są wymagane”.
- Dodatkowa pomoc dla trudniejszych zagadnień: Jeśli użytkownik wpisuje datę, system może wyświetlić podpowiedź w formacie: „Proszę wpisać datę w formacie DD/MM/RRRR”.

Tego typu pomoc ułatwia użytkownikom interakcję z formularzami i stroną, zapewniając, że rozumieją, co muszą zrobić, aby wypełnić formularz poprawnie.

Ten punkt znajduje się na poziomie AAA, co oznacza, że jest to zaawansowana opcja, która może znacząco poprawić doświadczenie użytkownika, ale nie jest absolutnie wymagane do podstawowej dostępności.

3.3.6 Zapobieganie błędom (wszystkim) - AAA

Ten punkt mówi, że strona internetowa powinna mieć mechanizmy, które pomagają zapobiegać błędom użytkownika, zwłaszcza jeśli te błędy mogą mieć poważne konsekwencje.

Chodzi o to, że jeśli strona wymaga od użytkownika wprowadzenia jakichkolwiek danych, np. w formularzach rejestracyjnych, kontaktowych, czy w koszykach zakupowych, to należy zapobiec powstawaniu błędów, które mogłyby wystąpić w procesie wprowadzania tych informacji.

Przykłady tego, jak można to osiągnąć:
- Podwójne sprawdzenie danych: Jeśli użytkownik wpisuje dane, np. adres e-mail, to przed wysłaniem formularza system może zapytać, czy dane są poprawne: „Czy na pewno chcesz wysłać te informacje?”.
- Autokorekta: Jeśli użytkownik wprowadzi coś w niewłaściwym formacie (np. numer telefonu bez kodu kraju), system może automatycznie poprawić format lub zaproponować sposób poprawy.
- Potwierdzenie przed ostateczną akcją: Na przykład przed wysłaniem formularza z danymi osobowymi użytkownik powinien być zapytany, czy na pewno chce to zrobić, szczególnie jeśli wprowadzone dane mogą mieć wpływ na jego konto lub prywatność.

Podstawowym celem tego punktu jest zapewnienie, że użytkownik nie popełni błędu, który może być trudny do naprawienia lub mieć niepożądane skutki. Dzięki temu strona staje się bardziej bezpieczna i przyjazna, szczególnie w przypadku wprowadzania danych wrażliwych, takich jak dane osobowe czy finansowe.

Ten punkt jest na poziomie AAA, co oznacza, że jest to zaawansowane wymaganie, które może poprawić użyteczność strony, ale nie jest wymagane w podstawowym zestawie zasad WCAG.

4 Solidność

Solidność to czwarta i ostatnia zasada dostępności, która dotyczy technicznej jakości strony internetowej. Chodzi o to, aby strona była zbudowana w sposób poprawny, zgodny ze standardami i działała dobrze w różnych przeglądarkach oraz z różnymi technologiami wspomagającymi — na przykład z czytnikami ekranu, lupami ekranowymi czy oprogramowaniem głosowym.

Jeśli kod strony (HTML, ARIA, itd.) zawiera błędy, to te narzędzia mogą nie być w stanie jej prawidłowo odczytać i użytkownicy mogą nie uzyskać dostępu do ważnych informacji lub funkcji.

Dlatego tak ważne jest, aby elementy strony miały jasno określone role, nazwy i stany — na przykład przyciski powinny być rozpoznawane jako przyciski, a formularze jako formularze. Solidność oznacza też, że strona powinna być przygotowana nie tylko na obecne technologie, ale też przyszłe.

Jeśli jest zbudowana solidnie i zgodnie z zasadami, będzie długo działać dobrze i bezpiecznie, niezależnie od tego, z jakiego urządzenia czy programu korzysta użytkownik.

4.1 Kompatybilność

Ten punkt mówi, że treści na stronie internetowej muszą być solidne, czyli poprawnie zaimplementowane, tak aby mogły być prawidłowo interpretowane przez różne technologie i przeglądarki, w tym przez technologie wspomagające, takie jak czytniki ekranu.

Chodzi o to, żeby strona działała stabilnie, niezależnie od tego, jakiego narzędzia czy urządzenia używa użytkownik. Jeśli strona nie jest dobrze zbudowana, różne programy mogą źle interpretować jej zawartość, co sprawia, że stanie się ona niedostępna lub trudna do używania dla osób korzystających z tych technologii.

Zasady w tym punkcie obejmują:
- Poprawność kodu — kod strony musi być zgodny z standardami i poprawnie napisany. Jeśli np. używasz HTML, to tagi muszą być dobrze zagnieżdżone i zamknięte, a atrybuty muszą być poprawnie przypisane. To zapewnia, że strony będą poprawnie renderowane we wszystkich przeglądarkach i technologach wspomagających.
- Zgodność z technologiami asystującymi — strony muszą być tak zbudowane, żeby czytniki ekranu, systemy rozpoznawania mowy i inne technologie wspomagające mogły prawidłowo odczytać ich treść i przekazać ją użytkownikowi.

Ten punkt jest na poziomie A, co oznacza, że jest to podstawowe wymaganie, aby strona była dostępna i działała poprawnie we wszystkich warunkach.

4.1.1 Poprawność kodu - A

Chodzi o to, że wszystkie elementy HTML i inne technologie używane do tworzenia strony muszą być poprawnie zapisane. Na przykład tagi w HTML muszą być zamknięte (np. <div></div>), a atrybuty muszą być poprawnie przypisane (np. src w tagu <img src="image.jpg">). Jeśli kod nie jest poprawny, może to spowodować, że strona nie będzie wyświetlana poprawnie na różnych urządzeniach lub w różnych przeglądarkach.

Dlaczego to ważne?
- Kompatybilność z różnymi przeglądarkami i urządzeniami — poprawny kod zapewnia, że strona będzie wyglądała i działała tak samo na różnych urządzeniach i przeglądarkach. W przeciwnym razie, na przykład w przypadku błędnego kodu, część użytkowników może zobaczyć błędy na stronie, a inni mogą w ogóle jej nie wyświetlić.
- Dostępność dla technologii wspomagających — poprawny kod pozwala, aby strony były prawidłowo interpretowane przez technologie wspomagające, takie jak czytniki ekranu. Dzięki temu osoby z niepełnosprawnościami mogą łatwiej korzystać ze strony.

Jak to wygląda w praktyce?
- Poprawny kod: <input type="text" id="email" name="email">
- Błędny kod: <input type="text" id="email" name="email"> <div> — tutaj mamy otwarty tag <div>, który nie jest zamknięty.

Ten punkt jest na poziomie A, co oznacza, że jest to podstawowe wymaganie i należy do jednego z najważniejszych aspektów tworzenia dostępnych stron internetowych.

4.1.2 Nazwa, rola, wartość - A

Ten punkt mówi, że wszystkie interaktywne elementy na stronie, takie jak przyciski, formularze, linki czy inne komponenty, muszą być rozpoznawane przez technologie wspomagające, takie jak czytniki ekranu.

Aby to było możliwe, każdy taki element musi mieć trzy rzeczy:
- Nazwa: Powinna jasno określać, do czego służy dany element. Na przykład, przycisk „Wyślij” mówi użytkownikowi, że po kliknięciu wyśle formularz.
- Rola: Musi być określone, czy dany element jest przyciskiem, polem tekstowym, linkiem, itd. Dzięki temu użytkownik wie, co może z nim zrobić (np. kliknąć, wpisać tekst, zaznaczyć opcję).
- Wartość: Jeśli użytkownik wprowadza jakąś informację, na przykład w formularzu, to ta informacja musi być dostępna dla systemu. Na przykład, jeśli ktoś wpisuje adres e-mail, wartość tego adresu powinna być znana systemowi.

Chodzi o to, żeby użytkownicy, którzy korzystają z czytników ekranu lub innych technologii wspomagających, mogli w pełni zrozumieć, co robią na stronie i jak wchodzić w interakcje z różnymi elementami.

4.1.3 Komunikaty o stanie - AA

Ten punkt mówi, że wszystkie zmiany na stronie, które mogą wpłynąć na użytkownika, muszą być wyraźnie sygnalizowane. Innymi słowy, jeśli coś się zmienia na stronie, np. nowe informacje się pojawiają, elementy się aktywują lub zmieniają swój stan (np. po kliknięciu na przycisk), użytkownik musi o tym wiedzieć.

Na przykład:
- Jeśli po kliknięciu na przycisk strona zaczyna ładować nowe informacje, użytkownik powinien być poinformowany, że proces ładowania trwa.
- Jeśli formularz jest wysyłany, użytkownik powinien dostać informację o tym, że dane zostały poprawnie wysłane lub że wystąpił błąd.

Wszystkie te zmiany muszą być dostępne także dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Oznacza to, że technologie wspomagające powinny być w stanie odczytać te komunikaty, aby użytkownicy wiedzieli, co się dzieje na stronie.

Jest to ważne, aby użytkownicy czuli się pewnie i wiedzieli, co się dzieje na stronie, zwłaszcza w sytuacjach, gdy coś zmienia się w tle (np. ładowanie danych, zmiana statusu, itp.).