Dostępność to nie opcja — to obowiązek

Dostępność cyfrowa (web accessibility) to projektowanie stron i aplikacji w sposób umożliwiający korzystanie z nich przez wszystkich użytkowników — w tym osoby z niepełnosprawnościami wzroku, słuchu, ruchu czy poznawczymi. W Polsce od czerwca 2025 roku obowiązuje Europejski Akt Dostępności, który rozszerza wymogi dostępności na sektor prywatny.

Ale nawet bez regulacji prawnych — dostępna strona to po prostu lepsza strona. Korzyści wykraczają daleko poza osoby z niepełnosprawnościami.

Czym jest WCAG?

WCAG (Web Content Accessibility Guidelines) to międzynarodowy standard dostępności cyfrowej opracowany przez W3C. Aktualna wersja to WCAG 2.2, opublikowana w 2023 roku.

WCAG definiuje trzy poziomy zgodności:

  • Poziom A — minimalne wymagania. Eliminacja najpoważniejszych barier dostępności
  • Poziom AA — rekomendowany standard. Wymagany przez większość regulacji prawnych, w tym Europejski Akt Dostępności
  • Poziom AAA — najwyższy poziom. Rzadko wymagany w całości, ale warto stosować wybrane kryteria

Standard opiera się na czterech zasadach — treść musi być postrzegalna, funkcjonalna, zrozumiała i solidna (POUR: Perceivable, Operable, Understandable, Robust).

Kontrast kolorów — najczęstszy problem

Niewystarczający kontrast między tekstem a tłem to najczęściej spotykane naruszenie dostępności w internecie. WCAG 2.2 wymaga:

  • Poziom AA: kontrast minimum 4.5:1 dla normalnego tekstu i 3:1 dla dużego tekstu (powyżej 18pt lub 14pt bold)
  • Poziom AAA: kontrast minimum 7:1 dla normalnego tekstu i 4.5:1 dla dużego tekstu

Jak to sprawdzić w praktyce? Narzędzia takie jak WebAIM Contrast Checker, Colour Contrast Analyser czy wbudowany audyt w Chrome DevTools (Lighthouse) automatycznie wykryją problemy z kontrastem.

Częste błędy:

  • Jasnoszary tekst na białym tle (np. #999 na #fff daje kontrast zaledwie 2.85:1)
  • Kolorowe przyciski z białym tekstem, gdzie kolor tła jest zbyt jasny
  • Placeholder w polach formularza o zbyt niskim kontraście

Semantyczny HTML — fundament dostępności

Poprawna semantyka HTML to najważniejszy i najtańszy sposób poprawy dostępności. Czytniki ekranu (screen readers) opierają się na strukturze HTML, aby zrozumieć i przedstawić treść strony.

Używaj natywnych elementów HTML zamiast div-ów z ARIA:

<!-- Źle -->
<div class="button" onclick="submit()" role="button" tabindex="0">
  Wyślij
</div>

<!-- Dobrze -->
<button type="submit">Wyślij</button>

Natywny <button> automatycznie obsługuje fokus klawiatury, aktywację Enterem i Spacją oraz jest rozpoznawany przez czytniki ekranu. Div z role="button" wymaga ręcznej implementacji tego wszystkiego.

Kluczowe elementy semantyczne:

  • <header>, <nav>, <main>, <footer> — definiują regiony strony (landmarks)
  • <h1> do <h6> — hierarchia nagłówków (nie pomijaj poziomów!)
  • <ul>, <ol> — listy, nie seria div-ów
  • <table> z <th> i scope — dla danych tabelarycznych
  • <label> z atrybutem for — powiązanie etykiet z polami formularza

Atrybuty ARIA — kiedy HTML nie wystarcza

ARIA (Accessible Rich Internet Applications) to zestaw atrybutów rozszerzających semantykę HTML. Stosuj je tylko wtedy, gdy natywny HTML nie zapewnia potrzebnej informacji.

Pierwsza zasada ARIA: nie używaj ARIA, jeśli możesz użyć natywnego HTML. Źle zastosowane atrybuty ARIA mogą pogorszyć dostępność zamiast ją poprawić.

Najczęściej potrzebne atrybuty:

  • aria-label — opis elementu, gdy nie ma widocznego tekstu (np. przycisk z samą ikoną)
  • aria-hidden="true" — ukrywa element dekoracyjny przed czytnikami ekranu
  • aria-live="polite" — informuje czytnik o dynamicznie zmieniającej się treści
  • aria-expanded — stan rozwinięcia/zwinięcia (np. menu, akordeon)
  • aria-describedby — powiązanie elementu z dodatkowym opisem

Nawigacja klawiaturą

Wielu użytkowników nie korzysta z myszy — osoby niewidome, osoby z niepełnosprawnościami ruchowymi, a także doświadczeni użytkownicy preferujący klawiaturę. Strona musi być w pełni obsługiwalna za pomocą klawiatury.

Kluczowe wymagania:

  • Widoczny fokus — użytkownik musi widzieć, który element jest aktywny. Nigdy nie usuwaj outline bez zastąpienia go równie widocznym stylem
  • Logiczna kolejność tabulacji — elementy powinny być fokusowane w kolejności odpowiadającej wizualnemu układowi strony
  • Brak pułapek fokusa — użytkownik musi mieć możliwość opuszczenia każdego elementu za pomocą klawiatury (Tab, Shift+Tab, Escape)
  • Skip link — link na początku strony pozwalający przeskoczyć nawigację i przejść do głównej treści
<a href="#main-content" class="skip-link">
  Przejdź do treści głównej
</a>

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
}

.skip-link:focus {
  top: 0;
  z-index: 1000;
}

Obrazy i multimedia

  • Każdy obraz informacyjny musi mieć atrybut alt z opisem treści
  • Obrazy dekoracyjne powinny mieć pusty alt="" (nie brak atrybutu, lecz pusty atrybut)
  • Filmy potrzebują napisów (captions) i opcjonalnie audiodeskrypcji
  • Animacje powinny respektować prefers-reduced-motion

Testowanie dostępności

Nie czekaj z testowaniem na koniec projektu. Regularne sprawdzanie dostępności podczas rozwoju jest znacznie tańsze niż naprawianie problemów po wdrożeniu.

Narzędzia automatyczne:

  • Lighthouse (wbudowany w Chrome DevTools) — szybki audyt dostępności
  • axe DevTools — rozszerzenie przeglądarki z szczegółowymi raportami
  • WAVE — wizualne nakładki pokazujące problemy na stronie

Testy manualne (niezbędne!):

  • Nawiguj po stronie wyłącznie klawiaturą (Tab, Enter, Escape, strzałki)
  • Przetestuj z czytnikiem ekranu (VoiceOver na Mac, NVDA na Windows)
  • Powiększ stronę do 200% i sprawdź, czy jest nadal użyteczna
  • Wyłącz CSS i sprawdź, czy treść jest zrozumiała

Podsumowanie

Dostępność to nie dodatkowy koszt — to inwestycja w jakość. Dostępna strona jest lepiej zoptymalizowana pod SEO, działa lepiej na urządzeniach mobilnych i zapewnia lepsze doświadczenie wszystkim użytkownikom.

Zacznij od podstaw: semantyczny HTML, wystarczający kontrast, obsługa klawiatury i atrybuty alt dla obrazów. Te cztery rzeczy rozwiążą większość problemów z dostępnością.

Potrzebujesz audytu dostępności swojej strony? Skontaktuj się z nami — pomożemy zidentyfikować i naprawić bariery dostępności.