Dostępność w głębi — sieć, którą mogą wszyscy

Dostępność dotyczy tego, że jak najwięcej osób może korzystać z twojej strony — również tych, które nawigują za pomocą klawiatury, słuchają czytnika ekranu, mają pogorszony wzrok lub trudności z precyzyjnym kliknięciem myszą. To nie jest dodatkowa funkcja, którą się przypisuje na koniec; to sposób na budowanie, a zrobienie tego od początku kosztuje prawie nic ekstra.

Międzynarodowe wytyczne dostępnego sieci zbierają cele w czterech słowach. Treść powinna być percepcja (należy móc ją odczuć, np. przez tekst alternatywny i napisy dla osób głuchych), możliwa do użycia (należy móc ją obsługiwać, np. za pomocą klawiatury), zrozumiała (język i zachowanie powinny mieć sens) i solidna (powinna działać w przeglądarki i narzędziach pomocniczych).

Większość dostępności jest za darmo, jeśli HTML jest semantyczny. Guzik, który jest właściwym elementem guzika, można obsługiwać klawiatury i prawidłowo ogłaszany przez czytnik ekranu bez dalszych działań. Nagłówki w logicznej kolejności dają użytkownikom czytnika ekranu przegląd zawartości. Używaj elementów zgodnie z ich znaczeniem, zanim sięgniesz po dodatkowe atrybuty pomocy — najpierw semantyka, bezpieczne rozwiązania potem.

Wielu użytkowników w ogóle nie używa myszy. Dlatego wszystko powinno być dostępne i obsługiwane za pomocą klawiatury, w logicznym porządku, a element, który ma fokus, powinien być wyraźnie zaznaczony. Nigdy nie usuwaj zaznaczenia fokusa bez podania lepszego — pozostawiłbyś użytkownika klawiatury w nieznajomości, gdzie są na stronie.

• 01Napisz semantyczny HTML — prawidłowe przyciski, linki i nagłówki
• 02Upewnij się, że wszystko można obsługiwać samą klawiaturą
• 03Spraw aby fokus był wyraźnie widoczny
• 04Dołącz jasną etykietę do każdego pola formularza
• 05Nadaj obrazom znaczący tekst alternatywny — lub oznacz je jako dekoracyjne
• 06Zapewnia wystarczający kontrast między tekstem a tłem

Nie używaj koloru jako jedynego sposobu komunikowania czegoś — błąd zaznaczony tylko na czerwono jest niewidoczny dla użytkownika z zaburzeniami widzenia barw, ale wiadomość tekstowa obok pomaga wszystkim. Upewnij się, że jest dobry kontrast między tekstem a tłem. I szanuj użytkowników, którzy prosili o mniej ruchu: intensywne animacje mogą zarówno irytować, jak i sprawić, że niektórzy czują się bezpośrednio nieswojo.

Spróbuj odłożyć mysz i nawigować całą stronę klawiaturą. Włącz czytnik ekranu i posłuchaj, jak strona jest czytana. Użyj narzędzia do sprawdzenia kontrastu i struktury. Automatyczne sprawdzenia przechwytują wiele, ale nie wszystko — najlepszą próbą jest korzystanie ze strony na tych samych warunkach, dla których ją budujesz.

“Dostępność zrobiona od początku jest prawie bezpłatna. Dodana na koniec jest droga — i zwykle na pół serca.”

— Empiryczna reguła z pracy na froncie