Czym jest dostępność cyfrowa? WCAG i projektowanie dla wszystkich

Dostępność cyfrowa oznacza budowanie stron i aplikacji tak, aby osoby z niepełnosprawnościami mogły z nich korzystać — czy są niewidome i używają czytnika ekranu, nie mogą korzystać z myszy, mają słabe widzenie lub daltonizm, są głuche, czy mają niepełnosprawności poznawcze lub związane z uczeniem się. W praktyce sprowadza się to do takich rzeczy jak tekstowe alternatywy dla obrazów, wystarczający kontrast kolorów, formularze z poprawnymi etykietami i działanie wszystkiego wyłącznie z klawiatury. Międzynarodowym standardem jest WCAG, czyli Web Content Accessibility Guidelines od W3C.

Dostępność cyfrową często skraca się do a11y — „a”, potem 11 liter, potem „y”.

Dlaczego dostępność ma znaczenie, gdy budujesz z AI

Asystenci AI dobrze tworzą aplikacje, które wyglądają poprawnie. Dostępność dotyczy głównie tego, czego nie widać na zrzucie ekranu: czy przycisk jest naprawdę przyciskiem, czy pole ma etykietę, którą czytnik ekranu może ogłosić, czy można dotrzeć do menu klawiszem Tab.

Dlatego warto o to pytać:

• Łatwo to przeoczyć. Ręcznie stylizowane rozwijane menu może wyglądać idealnie i być niemożliwe do użycia bez myszy. Nie zauważysz tego, dopóki tego nie sprawdzisz.
• Taniej to zrobić dobrze od początku. Poproszenie o dostępne komponenty już w pierwszym poleceniu kosztuje prawie nic. Dopisywanie tego do gotowej aplikacji oznacza zmiany na każdym ekranie.
• Pomaga wszystkim. Napisy pomagają ludziom w hałasie, dobry kontrast pomaga osobom z telefonami na słońcu, a jasne etykiety pomagają każdemu szybciej wypełnić formularz.
• Pokrywa się z SEO. Poprawne nagłówki, opisowe linki i tekst alternatywny pomagają wyszukiwarkom zrozumieć twoje strony — zobacz SEO dla stron budowanych przez AI.
• Może być wymagana. W zależności od miejsca działania i grupy odbiorców dostępność może być obowiązkiem prawnym.

Codzienna analogia

Pomyśl o wejściu do budynku.

Schody działają dobrze dla wielu osób. Podjazd działa dla osób na wózkach — ale również dla rodziców z wózkami dziecięcymi, pracowników dostarczających towar na wózkach i podróżnych z walizkami. Automatyczne drzwi, wyraźne znaki, napisy w alfabecie Braille'a przy przyciskach windy i dobre oświetlenie usuwają barierę dla kogoś.

Dostępność cyfrowa to ta sama idea dla przestrzeni cyfrowych: podjazdy, znaki i poręcze twojej aplikacji. I tak jak w budynku, znacznie łatwiej uwzględnić podjazd w planach niż dobudować go po zalaniu betonu.

WCAG w skrócie

WCAG publikuje Inicjatywa Dostępności Sieci (WAI) przy W3C. Obecna wersja to WCAG 2.2, po raz pierwszy opublikowana w październiku 2023 roku. Jest wstecznie kompatybilna: treść spełniająca WCAG 2.2 spełnia także 2.1 i 2.0, a W3C zachęca do korzystania z najnowszej wersji. WCAG 2.2 jest też zatwierdzony jako międzynarodowy standard ISO/IEC 40500:2025. Zupełnie inny WCAG 3 jest w fazie wczesnego projektu, a nie gotowym standardem.

WCAG jest zorganizowany wokół czterech zasad, często zapamiętywanych jako POUR:

Każda wytyczna ma testowalne kryteria sukcesu na trzech poziomach:

• Poziom A — minimum. Niespełnienie ich całkowicie blokuje niektórych ludzi.
• Poziom AA — standardowy cel i poziom, do którego odwołuje się większość przepisów i polityk.
• Poziom AAA — najwyższy poziom. Warto do niego dążyć w niektórych miejscach, ale W3C nie zaleca wymagania go dla całych stron, ponieważ niektóra treść nie może mu sprostać.

WCAG 2.2 dodał dziewięć kryteriów sukcesu do wersji 2.1, w tym Rozmiar celu (minimalny) na poziomie AA — klikalne cele powinny mieć zwykle co najmniej 24 na 24 piksele CSS, z wyjątkami — oraz Dostępne uwierzytelnianie (minimalne), które ogranicza kroki logowania wymagające pamięci lub łamigłówek, np. ponownego wpisywania hasła bez możliwości wklejenia go. Usunięto też stare kryterium „Parsowanie” jako przestarzałe.

Przykład: formularz rejestracji

Oto formularz rejestracji, jaki mógłby wygenerować AI, i to, co wykaże sprawdzenie dostępności:

Żadna z tych poprawek nie zmienia znacząco wyglądu formularza. Wszystkie zmieniają to, czy niektórzy ludzie w ogóle mogą z niego korzystać.

Kluczowe pojęcia

Częste mylne przekonania

• „Dostępność dotyczy tylko osób niewidomych.” Obejmuje niepełnosprawności wzrokowe, ruchowe, słuchowe, mowy i poznawcze, a także sytuacje tymczasowe, np. złamaną rękę.
• „Dostępne strony wyglądają nudno.” Dostępność ogranicza kilka rzeczy — kontrast, style ogniskowania, rozmiar tekstu — ale dobrze wyglądające dostępne strony są normą, a nie wyjątkiem.
• „Automatyczne narzędzie pokazuje 100, więc jesteśmy gotowi.” Narzędzia automatyczne wychwytują tylko część problemów. Czy tekst alternatywny ma sens albo czy przepływ jest zrozumiały przy czytniku ekranu, musi sprawdzić człowiek.
• „Widżet-nakładka sprawi, że będziemy zgodni.” Doczepione paski narzędzi nie naprawią brakujących etykiet ani zepsutego dostępu klawiaturą w twoim kodzie. Napraw źródło.
• „Nie mamy użytkowników z niepełnosprawnościami.” Możesz po prostu o nich nie wiedzieć. Wiele niepełnosprawności nie jest widocznych, a ludzie, którzy trafiają na barierę, zwykle po prostu odchodzą.

O co poprosić swojego asystenta AI

• „Zbuduj to zgodnie z WCAG 2.2 na poziomie AA.”
• „Używaj semantycznego HTML-u: prawdziwych przycisków, linków, nagłówków w kolejności i etykiet dla każdego pola formularza.”
• „Upewnij się, że każdy interaktywny element działa wyłącznie z klawiatury i ma widoczny styl ogniskowania.”
• „Sprawdź kontrast wszystkich kolorów tekstu i ikon — 4,5:1 dla zwykłego tekstu, 3:1 dla dużego tekstu i ikon.”
• „Dodaj znaczący tekst alternatywny do obrazów informacyjnych, a pusty do dekoracyjnych.”
• „Pokazuj błędy formularzy jako tekst, powiązany z polem, a nie tylko kolorem.”
• „Szanuj ustawienie użytkownika dotyczące ograniczenia ruchu (reduced motion) dla animacji.”
• „Uruchom automatyczne sprawdzenie dostępności i wypisz, czego nie potrafi przetestować, żebym mógł to sprawdzić ręcznie.”

Potem przetestuj sam: odłóż mysz i spróbuj ukończyć główny przepływ, używając tylko Tab, Shift+Tab, Enter i Spacji. Spróbuj wbudowanego czytnika ekranu w telefonie na głównej stronie. Przybliż przeglądarkę do 200% i sprawdź, czy coś się psuje.

Dostępność w Mythex

Mythex nie zawiera dedykowanego narzędzia do sprawdzania dostępności, więc traktuj dostępność jako część swoich poleceń i testów. Proś o WCAG 2.2 AA już w pierwszym poleceniu, sprawdź wynik w Podglądzie za pomocą klawiatury i użyj /test, aby agent przeszedł przez główne przepływy przed publikacją — zobacz App Testing. Przepis SEO również wymaga semantycznych nagłówków i znaczących tekstów alternatywnych, co służy obu celom.

Praktyczną listę kontrolną znajdziesz w jak zrobić stronę dostępną. Jeśli chodzi o projekt, przeczytaj jak zaprojektować dobrze wyglądającą aplikację z AI, a przed startem jak testować aplikację przed uruchomieniem. Najbardziej wiarygodnym źródłem jest własny przegląd WCAG od W3C.

Pytania