Dostępność strony firmowej: co to znaczy w praktyce

Dostępność brzmi jak temat dla urzędów. W praktyce sprowadza się do jednego pytania: czy Twoją stronę da się obsłużyć, gdy ktoś nie widzi jej tak jak Ty. Nie widzi kolorów, nie używa myszki, powiększa tekst dwukrotnie albo słucha strony zamiast ją czytać. Ten tekst pokazuje, co sprawdzisz sam w kilka minut, co naprawia się przy okazji zwykłego wdrożenia, a co trzeba zaplanować z góry. Nie jestem prawnikiem i nie piszę tu o obowiązkach ustawowych, tylko o tym, co widać w kodzie i na ekranie.

Kogo to naprawdę dotyczy

Nie tylko osób niewidomych. Dotyczy to Twojego klienta po pięćdziesiątce, który powiększa tekst w przeglądarce, bo nie ma przy sobie okularów. Osoby, która przegląda stronę w słońcu i nie odróżnia jasnoszarego napisu od tła. Kogoś, kto ma złamaną rękę i klika klawiaturą. I każdego, kto wchodzi na stronę na telefonie w tramwaju.

Dlatego dostępność opłaca się nie z powodu przepisów, tylko dlatego, że te same poprawki zmniejszają liczbę osób, które wychodzą ze strony, bo czegoś nie dało się kliknąć albo przeczytać.

Pięć rzeczy, które sprawdzisz sam w pięć minut

1. Klawisz Tab. Wejdź na swoją stronę i naciskaj Tab. Powinno być widać, gdzie jesteś: ramka albo podświetlenie wędrujące po linkach i przyciskach, w kolejności zgodnej z układem strony. Jeśli nie widzisz nic albo podświetlenie skacze na dół i wraca, to pierwszy problem.DziałaNie działa
2. Powiększenie do 200 procent. W przeglądarce wciśnij Ctrl i plus dwa razy. Tekst ma się przelać, a nie zniknąć pod innym elementem. Nie powinien pojawić się poziomy pasek przewijania.DziałaNie działa
3. Obrazki bez obrazków. Wyłącz ładowanie obrazów albo najedź na zdjęcie i sprawdź opis alternatywny. Zdjęcie dekoracyjne może być bez opisu, ale logo, ikona z informacją i zdjęcie produktu bez opisu to dziura.DziałaNie działa
4. Kontrast. Jasnoszary tekst na białym tle wygląda elegancko na Twoim monitorze i znika na tanim laptopie. Wystarczy otworzyć stronę na najciemniejszym ekranie w firmie.DziałaNie działa
5. Formularz bez podpowiedzi. Kliknij w pole formularza i sprawdź, czy opis pola nie znika, gdy zaczynasz pisać. Etykieta wpisana tylko w środek pola jest opisem, który przepada w momencie, w którym staje się potrzebny.DziałaNie działa

Zaznacz, co u Ciebie działa, a co nie. Policzę i powiem, co z tego wynika.

Co naprawia się przy okazji, a co trzeba zaplanować

Przy okazji

Kolejność nagłówków, opisy obrazków, widoczne zaznaczenie przy poruszaniu się klawiaturą, kontrast tekstu, etykiety pól, sensowne napisy na linkach zamiast „kliknij tutaj”. To są decyzje przy pisaniu kodu i przy pisaniu treści, nie osobna praca. Wykonawca, który robi to od początku, nie doliczy za to ani złotówki.

Do zaplanowania

Złożone elementy: rozwijane menu, zakładki, okna modalne, kalendarze i tabele z sortowaniem. Każdy z nich ma ustaloną obsługę klawiaturą i musi mówić czytnikowi ekranu, co się zmieniło. To realna robota, więc ma być wpisana w zakres, a nie dołożona na końcu.

Osobny projekt

Poprawianie dostępności strony, która już działa i nie była pod tym kątem pisana. Wtedy nie poprawia się wszystkiego naraz: robi się przegląd, ustawia kolejność według tego, ile osób blokuje dana rzecz, i poprawia etapami.

Materiały, o których wszyscy zapominają

Dwa najczęstsze przypadki. Pierwszy to pliki PDF: cennik, katalog, formularz zgłoszenia. Skan papierowej kartki jest dla czytnika ekranu obrazkiem, czyli niczym. Jeśli treść ma być dostępna, powinna być na stronie, a PDF najwyżej dodatkiem.

Drugi to filmy. Film bez napisów odpada nie tylko osobom niesłyszącym, ale też każdemu, kto ogląda bez dźwięku, czyli większości ludzi w miejscu publicznym.

Czego nie załatwi wtyczka

Na rynku są nakładki obiecujące „zgodność jednym kliknięciem”: pływająca ikonka z suwakami kontrastu i rozmiaru tekstu. Nie naprawiają tego, co jest w kodzie, bo nie mogą: nie wiedzą, co przedstawia zdjęcie ani co robi przycisk bez opisu. Bywa też, że przeszkadzają osobom, które mają własne, dobrze skonfigurowane narzędzia. Dostępność to sposób budowania strony, nie doklejony panel.

Cztery pytania do oferty

1. Czy stronę da się obsłużyć samą klawiaturą i czy to sprawdzacie? Odpowiedź „tak, klikamy Tab przed wdrożeniem” jest lepsza niż nazwa dowolnego standardu.
2. Jak sprawdzacie kontrast i kto o tym decyduje? Jeśli decyduje wyłącznie projektant graficzny, kontrast przegra z estetyką.
3. Które elementy strony są złożone i jak będą obsługiwane bez myszki? To pytanie oddziela ofertę pisaną na poważnie od skopiowanej.
4. Co z plikami i filmami, które będziemy dodawać po starcie? Najlepsza strona zepsuje się w miesiąc, jeśli nikt nie powie redaktorowi, na co uważać.

Jak to wygląda u mnie

Rzeczy z listy „przy okazji” robię zawsze przy stronach firmowych i nie wyceniam ich osobno: kolejność nagłówków, opisy obrazków, widoczne zaznaczenie przy poruszaniu się klawiaturą, kontrast i etykiety pól. Tę stronę, którą właśnie czytasz, da się obsłużyć samą klawiaturą, a na jej początku jest link „przejdź do treści”.

Elementy złożone wpisuję do zakresu razem z opisem, jak mają działać bez myszki, żeby nie okazało się to niespodzianką przy odbiorze. Jeśli masz już stronę i nie wiesz, jak z nią jest, przegląd pod tym kątem mieści się w bezpłatnym przeglądzie: dostajesz listę rzeczy do poprawienia, uszeregowaną według tego, ile osób blokuje każda z nich. Nie sprzedaję nakładek obiecujących zgodność jednym kliknięciem.