Dostępność stron (WCAG) — zrobić stronę dla wszystkich i lepszą dla Google

Dostępność (accessibility) to design i kod stron, które mogą być używane przez każdego — niezależnie od umiejętności.

Obejmuje osoby z niepełnosprawnościami: wzroku (niewidomi, słabowidzący), słuchu (głusi, niedosłyszący), mobilności (paraliza, drgawki).

Ale dostępność pomaga też osobom bez niepełnosprawności — na wolnym wi-fi, na starej przeglądarce, w złym oświetleniu.

WCAG (Web Content Accessibility Guidelines) to międzynarodowy standard definiujący jak robić dostępne strony.

Ok 15% populacji ma jakąś formę niepełnosprawności. To są potencjalni klienci, których tracisz.

W wielu krajach (w tym Polsce) niedostępne strony mogą być podstawą do pozwu o dyskryminację.

Google preferuje dostępne strony — to ranking factor. Strona dostępna será lepiej pozycjonowana.

Dostępna strona to też lepszy UX dla WSZYSTKICH — czyszczej, szybciej, łatwiej się czyta.

1. Perceivable (Dostrzegalne) — informacja musi być widoczna/słyszalna. Alt text dla obrazów, napisy dla filmów.

2. Operable (Obsługiwalne) — interfejs musi być obsługiwalny bez myszy. Keyboard navigation, brak pułapek.

3. Understandable (Zrozumiałe) — tekst jasny, instrukcje proste, zmienne błędy z wyjaśnieniami.

4. Robust (Solidne) — kod powinien być kompatybilny ze screen readers i innymi asystujące tech.

Alt text — każdy obraz musi mieć opisowy alt tekst. Nie 'image1.jpg' a 'Osoba piszące na laptopie'.

Kontrast kolorów — minimum 4.5:1 dla normalnego tekstu, 3:1 dla dużego tekstu (18px+).

Keyboard navigation — każdy element powinien być osiągalny przy użyciu TAB i ENTER.

Headings — użyj H1, H2, H3 w logicznym porządku. Nigdy nie pomijaj poziomów (H1 -> H3).

Labels — każde pole formularza musi mieć label powiązany z input elementem.

Użyj właściwych elementów HTML: <button> zamiast <div onclick>, <nav>, <main>, <article>, <section>.

Screen readers polegają na semantyce — jeśli użyjesz <div>, asystent nie wie co to jest.

ARIA attributes — <aria-label>, <aria-describedby>, <aria-hidden> pomagają gdzie HTML nie wystarczy.

Struktura — logiczny flow, sensowny porządek tabindex, brak pułapek w nawigacji.

Każde video musi mieć napisy dla niesłyszących (captions).

Każdy audio musi mieć transkrypt dla głuchych.

Nie używaj auto-play dla multimediów — irytuje i może być niebezpieczne dla osób z epilepsją.

Pliki PDF — muszą być dostępne (tagged PDF). Zeskanowane PDFy bez OCR są niedostępne.

Narzędzia automatyczne: Axe, WAVE, Lighthouse (w Chrome DevTools), pa11y.

Testowanie ręczne: nawiguj tylko TAB-em, wyłącz CSS, używaj screen reader (NVDA, JAWS).

Testowanie z rzeczywistymi użytkownikami — osoby z niepełnosprawnościami odkryją rzeczy, które tool misi.

Continuous testing — accessibility to nie jednorazowy audit. Sprawdzaj przy każdej zmianie.

Błąd 1: Images bez alt tekstu. Alt='image' też nie helps.

Błąd 2: Kolory jako jedyna forma informacji. Używaj też tekstu, ikony, wzory.

Błąd 3: Wszystko w obrazach zamiast HTML tekstu.

Błąd 4: Pliki bez struktur logicznej — chaos w heading lub tabelach bez th/tr/td.

Błąd 5: Auto-play muzyki/video — frustrujące i mogą trigger czasami.

Dostępność to nie łaska — to prawo człowieka i biznesowy smart move.

WCAG 2.1 Level AA to standard, do którego powinniś dążyć.

Dostępna strona to strona, którą lubią wszyscy — nie tylko osoby z niepełnosprawnościami.

Inwestycja w dostępność to inwestycja w większy market i lepszy SEO.