Wróć do bloga

Accessibility (po polsku: dostępność, w skrócie często pisane jako "a11y") oznacza, że strona internetowa działa dla jak największej liczby osób - także tych, które widzą słabiej, nie używają myszki, korzystają z czytnika ekranu albo po prostu mają migrenę i nie mogą patrzeć na jaskrawe, migające elementy. Według Światowej Organizacji Zdrowia jakąś formę niepełnosprawności ma około 16% populacji świata - to nie margines, to realnie jeden z sześciu odwiedzających Twoją stronę.

Co to oznacza w praktyce?

Spróbuj otworzyć dowolną stronę i poruszać się po niej tylko klawiszem Tab, bez dotykania myszki. Na wielu stronach po kilku kliknięciach zupełnie gubisz się, gdzie jesteś - bo nikt nie zaprojektował tej ścieżki z myślą o kimś, kto faktycznie z niej korzysta.

Najważniejsze elementy dostępności

  • Tekst alternatywny (alt) dla obrazków - krótki opis, który czytnik ekranu odczytuje na głos osobie niewidomej. Bez niego zdjęcie po prostu "nie istnieje" dla takiego użytkownika.
  • Kontrast kolorów - jasnoszary tekst na białym tle wygląda modnie, ale dla osób słabowidzących bywa praktycznie nieczytelny. Standard WCAG określa minimalny kontrast między tekstem a tłem.
  • Semantyczny HTML i struktura nagłówków - czytniki ekranu "skaczą" po stronie właśnie po nagłówkach (H1, H2, H3), jak po spisie treści. Jeśli nagłówki są używane tylko do tego, żeby tekst był większy, taka nawigacja się rozpada.
  • Nawigacja klawiaturą - strona powinna dać się obsłużyć samym Tabem i Enterem, z widocznym oznaczeniem, na którym elemencie aktualnie jesteśmy.
  • Etykiety formularzy - pole, które ma opis tylko jako znikający placeholder, jest bezużyteczne dla czytnika ekranu.

Efekt podjazdu dla wózków

Prawie wszystkie te poprawki pomagają nie tylko osobom z niepełnosprawnościami. Podjazdy przy chodnikach budowano dla osób na wózkach, a korzystają z nich też rodzice z wózkiem dziecięcym, kurierzy i każdy z walizką na kółkach. Dobry kontrast pomaga też przy słońcu odbijającym się od ekranu telefonu. Czytelna struktura nagłówków pomaga też Google lepiej zrozumieć Twoją stronę, co realnie wpływa na SEO.

Pisząc strony od podstaw, mam pełną kontrolę nad tym, jak wygląda kod w tle - co oznacza, że dostępność da się wbudować od pierwszej linijki, a nie doklejać na siłę później, kiedy okazuje się, że trzeba przebudować pół strony.