Szybka odpowiedź
Podstawowa kontrola dostępności obejmuje obsługę klawiaturą, widoczny fokus, kontrast, strukturę nagłówków, etykiety formularzy i zrozumiałe komunikaty błędów. Automatyczny test nie zastępuje ręcznego przejścia strony.
Dostępność strony nie jest pojedynczą wtyczką ani deklaracją w stopce. To sposób projektowania treści, nawigacji i formularzy tak, aby z serwisu mogły korzystać osoby o różnych potrzebach. Podstawowe testy warto wykonywać od początku projektu, ponieważ poprawki po publikacji są zwykle trudniejsze.
Ręczny test dostępności w 15 minut
Automatyczny audyt jest dobrym filtrem, ale nie odpowiada na pytanie, czy użytkownik potrafi wykonać zadanie. Otwórz stronę w nowym oknie i wykonaj poniższe próby bez myszy. Zapisuj adres, element oraz obserwację zamiast ogólnego „nie działa”.
| Próba | Oczekiwany wynik | Sygnał błędu |
|---|---|---|
| Tabulator od początku strony | Fokus jest widoczny i porusza się logicznie | Fokus znika albo wpada w pułapkę |
| Menu i formularz klawiaturą | Każdą kontrolkę można otworzyć i zamknąć | Element reaguje wyłącznie na kliknięcie |
| Powiększenie do 200% | Treść pozostaje czytelna bez utraty funkcji | Przyciski nachodzą na tekst |
| Błędne wysłanie formularza | Komunikat wskazuje pole i sposób poprawy | Zmienia się tylko kolor obramowania |
Na stronie eksperckiej Małgorzaty Dąbrowskiej można prześledzić, jak spokojna hierarchia pomaga oddzielić nagłówki, opis i kolejne działania. To przykład do analizy układu, nie deklaracja formalnej zgodności z całym standardem WCAG.
Sprawdź nawigację bez używania myszy
Przejdź stronę klawiszem Tab i obserwuj kolejność fokusu. Każdy link, przycisk oraz pole formularza powinny być osiągalne i wyraźnie zaznaczone. Użytkownik musi móc otworzyć menu, zamknąć element interaktywny i wysłać formularz bez pułapki klawiaturowej. Ten prosty test szybko ujawnia problemy niewidoczne podczas zwykłego klikania.
Zadbaj o czytelność treści i znaczenie elementów
Nagłówki powinny tworzyć logiczną hierarchię, a linki wyjaśniać, dokąd prowadzą. Tekst alternatywny opisuje znaczenie obrazu, nie jego dekoracyjny wygląd. Kontrast musi pozwalać odczytać treść także przy słabszym wzroku lub gorszym ekranie. Informacja nie może być przekazywana wyłącznie kolorem.
Formularze muszą pomagać poprawić błąd
Każde pole potrzebuje widocznej etykiety, a komunikat błędu powinien wskazywać problem oraz sposób poprawy. Po nieudanej wysyłce użytkownik nie może stracić wszystkich wpisanych danych. Warto sprawdzić powiększenie widoku, telefon i czytnik ekranu. Automatyczny audyt pomaga, ale nie zastępuje przejścia pełnego scenariusza.
Checklista przed decyzją
Przed rozmową o wdrożeniu przygotuj poniższe informacje. Ułatwią porównanie ofert i pozwolą przejść od ogólnej koncepcji do decyzji możliwej do wdrożenia.
- widoczny fokus i logiczna kolejność klawiatury
- hierarchia nagłówków oraz opisowe linki
- kontrast tekstu i elementów sterujących
- etykiety oraz czytelne błędy formularza
- ręczny test najważniejszego scenariusza
Najczęstsze błędy
W praktyce warto zatrzymać się przed tymi trzema skrótami myślowymi:
- usuwanie obramowania fokusu
- tekst alternatywny powtarzający nazwę pliku
- poleganie wyłącznie na wyniku automatycznego testu
Powiązane materiały i usługi
Źródło uzupełniające: W3C: Web Content Accessibility Guidelines 2.2.