Dostępność strony: kontrole, które pomagają ludziom z niej korzystać

Najszybszym sposobem na sprawdzenie, czy ze strony da się korzystać, jest próba wypełnienia zapytania o wycenę bez dotykania myszy. Jeśli się nie udaje — bo kursor znika, bo do pola nie da się dotrzeć, bo przycisk nie reaguje — to znaczy, że są osoby, które nie mogą do Państwa napisać, i nigdy się Państwo o tym nie dowiedzą: kto nie daje rady, nie wysyła zgłoszenia, tylko zamyka stronę.

Dostępność sprawdza się na ścieżkach, nie na stronach w oderwaniu. Liczące się ścieżki są dwie lub trzy: znaleźć usługę, zrozumieć, czy odpowiada danej osobie, zapytać. Ten przewodnik pomaga sprawdzić je własnymi rękami i zamienić to, co się znajdzie, na przypisane poprawki.

Cztery kontrole do wykonania w dziesięć minut, bez narzędzi

1. Klawiatura. Od pierwszej linii strony, klawiszem tabulacji, trzeba móc dotrzeć do każdego odnośnika, każdego pola i każdego przycisku, w kolejności zgodnej z czytaniem. Spróbujcie otworzyć menu, zamknąć okno, które pojawia się samo, wysłać formularz.
2. Widoczny fokus. Podczas poruszania się klawiaturą zawsze powinno być widać, gdzie się jest: obrys, kolor, cokolwiek. Wiele motywów graficznych go usuwa, uznając za nieestetyczny: to najczęstszy błąd i zarazem najłatwiejszy do poprawienia.
3. Kontrast. Jasnoszary tekst na białym tle, napisy na fotografii, przyciski z etykietą niemal w tym samym odcieniu co tło. To miejsca, w których traci się osoby czytające z ekranu w słońcu albo ze zmęczonym wzrokiem, czyli prędzej czy później niemal wszystkich.
4. Hierarchia nagłówków. Jeden główny nagłówek na stronę, potem sekcje i podsekcje w kolejności, bez przeskoków i bez nagłówków używanych tylko po to, by tekst wydawał się większy. Tak przegląda się stronę, gdy nie widzi się jej całej naraz.

Obrazy, formularze i komunikaty o błędach

Druga runda dotyczy tego, co strona przekazuje, gdy nie patrzy się na nią w całości.

• Teksty alternatywne: opisują, do czego służy obraz w danym miejscu, nie co na nim widać. Logo opisuje się nazwą firmy; fotografia dekoracyjna nie potrzebuje opisu; schemat niosący informację trzeba opisać w całości, albo tę informację zapisać też w tekście.
• Etykiety pól: każde pole ma swoją etykietę, widoczną i powiązaną z polem. Szary tekst wewnątrz pola nie jest etykietą: znika, gdy tylko zacznie się pisać, a kto się rozproszy, nie wie już, co wypełniał.
• Komunikaty o błędach: muszą wskazywać, które pole i co poprawić, pozostawać widoczne i nie zależeć wyłącznie od koloru. Czerwona ramka to nie komunikat.
• Pola obowiązkowe: podaje się je z góry, nie dopiero po nieudanej próbie wysłania. A formularz nie może kasować tego, co już zostało wpisane.

Narzędzia automatyczne i testy ręczne

Narzędzia automatyczne są przydatne i nie wystarczają: znajdują to, co da się policzyć, nie to, co ma sens. Potrzebne są oba, i warto wiedzieć, czego oczekiwać od każdego z nich.

Praktyczna zasada: kontrolę automatyczną przechodzi się raz, żeby oczyścić grubszy problem, a potem przy każdej publikacji; kontrolę ręczną powtarza się przy każdej zmianie głównych ścieżek, bo tylko ona mówi, czy osoba dochodzi do końca.

Protokół testowy dla zapytania o wycenę

Napisany raz, powtarza się go identycznie za każdym razem, gdy strona się zmienia. Wykonuje go jedna osoba, w pół godziny, zapisując, gdzie się zatrzymała i czego musiała się domyślić.

1. Otworzyć stronę główną i dotrzeć do strony usługi, używając wyłącznie klawiatury. Zanotować, ile kroków jest potrzebnych i czy zawsze widać, gdzie się jest.
2. Powiększyć tekst poleceniem przeglądarki do podwójnego rozmiaru. Sprawdzić, że nic nie znika, że menu wciąż da się otworzyć i że nie pojawia się pozioma belka przewijania.
3. Wypełnić formularz klawiaturą, celowo zostawiając puste pole obowiązkowe i błędnie wpisując adres e-mail. Sprawdzić, czy błąd jest opisany, osiągalny i zrozumiały bez patrzenia na kolor.
4. Poprawić i wysłać. Sprawdzić, czy potwierdzenie to tekst, który da się przeczytać i odnaleźć, a nie tylko zmiana koloru albo ikona.
5. Powtórzyć ścieżkę z telefonu, jedną ręką, a potem z ekranem w poziomie.
6. Powtórzyć pierwszy krok z włączonym czytnikiem ekranu, choćby tym już wbudowanym w system operacyjny. Nie trzeba być ekspertem, by zauważyć, że przycisk jest ogłaszany jako „przycisk” i nic więcej.

Przypisanie poprawek i ponowna weryfikacja

Lista problemów bez nazwiska przy każdym punkcie nie skutkuje poprawkami. Każdą pozycję trzeba opisać czterema informacjami: gdzie się dzieje, czego uniemożliwia, kto to poprawia, jak się sprawdza, że problem został rozwiązany. Kolejność nie jest taka, w jakiej problemy zostały znalezione.

• Najpierw to, co uniemożliwia ukończenie ścieżki: formularz, którego nie da się wysłać, jest ważniejszy niż nieco słaby kontrast.
• Potem to, co powtarza się w całej stronie: niewidoczny fokus albo brakujące etykiety poprawia się raz w szablonie strony i dotyczy to wszędzie.
• Na końcu pojedyncze przypadki, strona po stronie, które często są treścią, a nie kodem: opis do przepisania, nagłówek użyty w niewłaściwym miejscu.
• Po każdej poprawce powtarza się cały protokół na dotkniętych ścieżkach. Poprawki dostępności łatwo się rozsypują przy pierwszej zmianie grafiki albo pierwszym dodanym elemencie.

Czego nie obejmuje ten przewodnik

Tu sprawdza się, czy ze strony da się korzystać, nie czy spełnia ona obowiązek prawny: zastosowanie przepisów, formalne weryfikacje i ewentualne deklaracje wymagają dedykowanych kompetencji i trzeba je ocenić osobno. Nie omawiamy też, jakie pytania umieścić w formularzu kontaktowym — to kwestia treści, nie dostępności — ani ogólnego odbioru technicznego przed publikacją strony, który obejmuje wiele innych kontroli poza tymi.