Podstawy dostepnosci stron internetowych — Tworzenie witryn dla wszystkich

Ponad miliard ludzi na swiecie zyje z jakas forma niepelnosprawnosci. To okolo 15 % swiatowej populacji. Wsrod nich sa osoby niewidome lub slabowidzace, osoby gluche lub slaboslyszace, osoby z niepelnosprawnosciami ruchowymi, roznicami poznawczymi lub tymczasowymi stanami, takimi jak zlamana reka czy migrena.

Kiedy budujemy strony internetowe bez uwzgledniania tych realiow, nie tylko utrudniamy zycie. Wykluczamy ludzi z dostepu do informacji, uslug i mozliwosci, ktore inni uznaja za oczywiste. Dostepnosc to nie funkcja. To odpowiedzialnosc.

Co oznacza dostepnosc stron internetowych

Dostepnosc stron internetowych oznacza projektowanie i tworzenie witryn w taki sposob, aby osoby z niepelnosprawnosciami mogly je postrzegac, rozumiec, nawigowac po nich i z nimi wchodzic w interakcje. Oznacza to rowniez, ze moga wspoltworzyc internet.

To wykracza poza czytniki ekranowe. Dostepnosc obejmuje:

• Wzrokowa: slepota, slabowidzenie, daltonizm
• Sluchowa: gluchota, niedosluch
• Ruchowa: ograniczona motoryka precyzyjna, dreszenie, paraliz
• Poznawcza: dysleksja, ADHD, trudnosci z pamiecia, trudnosci w uczeniu sie
• Tymczasowa i sytuacyjna: zlaman nadgarstek, intensywne swiatlo sloneczne na ekranie, halasliwe otoczenie, wolny internet

Kluczowy wniosek jest taki, ze dostepne projektowanie przynosi korzysci wszystkim. Napisy pomagaja w halasliwym miejscu. Wysoki kontrast pomaga w jasnym swietle. Nawigacja klawiaturowa pomaga zaawansowanym uzytkownikom. Jasne pisanie pomaga osobom, dla ktorych dany jezyk nie jest ojczystym. Dostepnosc to nie tryb specjalny — to dobre projektowanie.

Standard WCAG

Wytyczne dotyczace dostepnosci tresci internetowych (WCAG) to miedzynarodowy standard dostepnosci stron internetowych, opublikowany przez W3C. Aktualna wersja to WCAG 2.2, zorganizowana wokol czterech zasad znanych pod akronimem POUR:

Postrzegalnosc (Perceivable)

Informacje musza byc prezentowane w sposoby, ktore wszyscy uzytkownicy moga postrzegac.

• Alternatywy tekstowe: kazdy obraz potrzebuje atrybutu alt opisujacego jego zawartosc. Obrazy dekoracyjne uzywaja alt="".
• Napisy i transkrypcje: tresci wideo potrzebuja napisow; tresci audio potrzebuja transkrypcji.
• Dostosowywalna struktura: tresc powinna miec sens po usunieciu stylow. Uzyj semantycznego HTML (<h1>, <nav>, <main>, <article>), nie tylko wizualnego formatowania.
• Wyroznialnosc tresci: wystarczajacy kontrast kolorow, mozliwosc zmiany rozmiaru tekstu, zadna informacja przekazywana wylacznie przez kolor.

Funkcjonalnosc (Operable)

Uzytkownicy musza byc w stanie obsluzyc interfejs.

• Dostepnosc z klawiatury: kazdy interaktywny element musi byc osiagalny i uzywalny za pomoca samej klawiatury. Zadnych pulapek myszy.
• Wystarczajaco czasu: jesli tresc ma limity czasowe, uzytkownicy musza moc je wydluzyc lub wylaczyc.
• Brak wyzwalaczy napadow: unikaj tresci, ktore migaja czesciej niz trzy razy na sekunde.
• Nawigacja: jasne tytuly stron, logiczna struktura naglowkow, linki pomijajace nawigacje, widoczne wskazniki fokusa.

Zrozumialosc (Understandable)

Tresc i interfejs musza byc zrozumiale.

• Czytelny tekst: okresl jezyk strony (atrybut lang). Uzyj jasnego, prostego jezyka, gdy to mozliwe.
• Przewidywalne zachowanie: nawigacja powinna byc spojona. Strony nie powinny niespodziewanie zmieniac kontekstu.
• Pomoc przy wprowadzaniu danych: wyraznie oznacz pola formularzy. Dostarczaj pomocne komunikaty o bledach, ktore wyjasnaja, co poszlo nie tak i jak to naprawic.

Solidnosc (Robust)

Tresc musi byc wystarczajaco solidna, aby dzialac z obecnymi i przyszlymi technologiami.

• Poprawny HTML: prawidlowe znaczniki semantyczne, ktore technologie wspomagajace moga niezawodnie interpretowac.
• Nazwa, rola, wartosc: niestandardowe komponenty musza ujawniac swoje przeznaczenie interfejsom API dostepnosci (za pomoca ARIA w razie potrzeby).

Poziomy zgodnosci

WCAG definiuje trzy poziomy:

Wiekszosc przepisow na swiecie wymaga zgodnosci z Poziomem AA. To jest poziom, do ktorego powinienes dazy.

Typowe bariery i jak je usunac

Brak tekstu alternatywnego w obrazach

Problem: uzytkownicy czytnikow ekranowych slysza "obraz" lub nic.

Rozwiazanie: dodaj opisowy tekst alt do kazdego informacyjnego obrazu. Dla obrazow dekoracyjnych uzyj alt="", aby czytniki ekranowe je pominely.

<!-- Dobrze -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Dekoracyjny -->
<img src="divider.svg" alt="" />

Niewystarczajacy kontrast kolorow

Problem: osoby slabowidzace lub z daltonizmem nie moga przeczytac tekstu.

Rozwiazanie: zapewnij minimalny wspolczynnik kontrastu 4,5:1 dla zwyklego tekstu i 3:1 dla duzego tekstu (18px+ lub 14px pogrubiony). Uzyj narzedzia do sprawdzania kontrastu, aby zweryfikowac swoje kombinacje kolorow.

Brak etykiet formularzy

Problem: uzytkownicy czytnikow ekranowych nie wiedza, do czego sluzy pole formularza.

Rozwiazanie: kazde pole wejsciowe potrzebuje widocznego elementu <label> polaczonego atrybutem for.

<!-- Dobrze -->
<label for="email">Adres e-mail</label>
<input type="email" id="email" name="email" />

<!-- Zle: zastepczy tekst nie jest etykieta -->
<input type="email" placeholder="Adres e-mail" />

Brak nawigacji klawiaturowej

Problem: uzytkownicy, ktorzy nie moga uzywac myszy, sa zablokowani.

Rozwiazanie: uzyj natywnych elementow HTML (<button>, <a>, <select>), ktore sa domyslnie dostepne z klawiatury. Jesli tworzysz niestandardowe komponenty, upewnij sie, ze sa fokusowalne i reaguja na zdarzenia klawiatury. Nigdy nie usuwaj obramowania fokusa bez zapewnienia alternatywy.

Brak struktury strony

Problem: uzytkownicy czytnikow ekranowych nie moga efektywnie nawigowac.

Rozwiazanie: uzyj semantycznego HTML. Jeden <h1> na strone, logiczna hierarchia naglowkow (bez pomijania poziomow), landmarki (<nav>, <main>, <footer>).

Automatyczne odtwarzanie mediow

Problem: niespodziewany dzwiek przeszkadza uzytkownikom czytnikow ekranowych. Automatyczne odtwarzanie wideo moze wywolyc napady lub stres.

Rozwiazanie: nigdy nie odtwarzaj automatycznie dzwieku. Jesli wideo odtwarza sie automatycznie, upewnij sie, ze domyslnie nie ma dzwieku i zapewnij przyciski pauzy.

Sam kolor to za malo

Nigdy nie polegaj wylacznie na kolorze, aby przekazywac informacje. Rozwaz:

• Pole formularza z czerwona ramka dla bledow potrzebuje rowniez ikony bledu lub komunikatu tekstowego
• Wykres z kolorowymi liniami potrzebuje rowniez wzorow, etykiet lub legendy
• Link w tekscie ciaglym potrzebuje podkreslenia lub innej wizualnej wskazowki, nie tylko zmiany koloru

Okolo 8 % mezczyzn i 0,5 % kobiet ma jakas forme zaburzenia widzenia barw. Projektowanie z uwzglednieniem tego nie jest przypadkiem brzegowym — to podstawowa inkluzywnosc.

Testowanie dostepnosci

Testowanie automatyczne

Narzedzia automatyczne wykrywaja okolo 30-40 % problemow z dostepnoscia. Sa dobrym pierwszym krokiem, ale nie kompletnym rozwiazaniem.

• axe DevTools (rozszerzenie przegladarki) — skanuje strone i raportuje naruszenia WCAG
• Lighthouse (wbudowany w Chrome DevTools) — zawiera audyt dostepnosci
• WAVE (narzedzie internetowe) — wizualna nakladka pokazujaca problemy

Testowanie reczne

Wiele problemow z dostepnoscia wymaga ludzkiej oceny:

• Testy klawiatury: odlacz mysz i nawiguj cala witryne za pomoca Tab, Enter, Escape i klawiszy strzalek. Czy mozesz dotrzec do wszystkiego? Czy kolejnosc fokusa jest logiczna?
• Testy czytnikiem ekranowym: wyprobuj VoiceOver (Mac), NVDA (Windows, darmowy) lub TalkBack (Android). Czy tresc ma sens, gdy jest czytana na glos?
• Testy zoomu: powieksz przegladarke do 200 %. Czy uklad nadal dziala? Czy jakas tresc jest obcieta lub naklada sie?
• Ograniczony ruch: wlacz "ogranicz ruch" w ustawieniach systemu operacyjnego. Czy animacje respektuja to ustawienie?

Testy z uzytkownikami

Najcenniejsze opinie pochodza od osob, ktore naprawde korzystaja z technologii wspomagajacych w codziennym zyciu. Jesli Twoj budzet na to pozwala, wlacz osoby z niepelnosprawnosciami do procesu testowania.

Dostepnosc to spektrum, nie pole do zaznaczenia

Dostepnosc to nie jednorazowy projekt z linia mety. To ciagla praktyka. Witryny sie zmieniaja, tresci sa dodawane, a nowe bariery moga pojawic sie przy kazdej aktualizacji.

Celem nie jest perfekcja. Celem jest ciagla poprawa i szczera troska o ludzi, ktorzy korzystaja z tego, co budujesz. Zacznij od zmian o najwiekszym wplywie — kontrast kolorow, tekst alternatywny, nawigacja klawiaturowa, etykiety formularzy — i buduj na tym.

Kazda bariera, ktora usuwasz, to drzwi, ktore otwierasz.

Szybka lista kontrolna

• Wszystkie obrazy maja znaczacy tekst alt (lub alt="" jesli dekoracyjne)
• Kontrast kolorow spelnia WCAG AA (4,5:1 dla tekstu, 3:1 dla duzego tekstu)
• Wszystkie pola formularzy maja widoczne etykiety
• Witryna jest w pelni nawigowalna z klawiatury
• Naglowki sa w logicznej hierarchii
• Wskazniki fokusa sa widoczne
• Jezyk strony jest ustawiony (atrybut lang na <html>)
• Zadna informacja nie jest przekazywana wylacznie przez kolor
• Filmy maja napisy
• Animacje respektuja prefers-reduced-motion