Dostępność strony internetowej: lista kontrolna klawiatury, kontrastu i formularzy

Klient otwiera ofertę, przechodzi do formularza i nie może wysłać zapytania, bo przycisk działa wyłącznie po kliknięciu myszą. Inny nie odczytuje jasnoszarych instrukcji albo nie wie, które pole zawiera błąd. Dostępność strony internetowej rozstrzyga się właśnie w takich sytuacjach: czy użytkownik potrafi samodzielnie znaleźć informację i wykonać zadanie. Wiele podstawowych barier możesz wykryć bez znajomości programowania.

Lista kontrolna WCAG: przygotuj scenariusz sprawdzania

WCAG to wytyczne dotyczące dostępności treści internetowych. Poniższa lista obejmuje wybrane zagadnienia, które warto sprawdzić na stronie firmowej, w sklepie i w portfolio. Jej przejście pomaga znaleźć problemy, ale nie potwierdza pełnej zgodności z WCAG.

Zacznij od konkretnego zadania: znajdź usługę i wyślij zapytanie albo wybierz produkt i przejdź do podsumowania zamówienia. Sprawdź stronę główną, ofertę, kontakt oraz elementy pojawiające się w trakcie działania: rozwijane menu, okna dialogowe i komunikaty błędów.

Przy każdym problemie zapisz adres podstrony, wykonane kroki oraz oczekiwany rezultat. Dzięki temu wykonawca będzie mógł odtworzyć sytuację.

Obsługa klawiaturą: od wejścia na stronę do wykonania zadania

Odłóż mysz. Klawiszem Tab przechodź między elementami interaktywnymi, a Shift + Tab wracaj. Linki uruchamiaj Enterem; standardowe przyciski powinny reagować na Enter i Spację. W listach wyboru i innych złożonych elementach potrzebne bywają również strzałki.

Sprawdź kolejno:

• Czy możesz otworzyć menu i przejść do każdej istotnej podstrony?
• Czy obsłużysz wyszukiwarkę, filtry, galerię oraz formularz?
• Czy kolejność przechodzenia jest logiczna i odpowiada układowi treści?
• Czy możesz wykonać całe zadanie bez sięgania po mysz?
• Czy z każdego elementu da się przejść dalej lub wycofać?

Jeżeli przeglądarka pomija linki, sprawdź najpierw jej ustawienia nawigacji klawiaturą — mogą ograniczać zakres elementów osiągalnych Tabem.

Szczególną uwagę poświęć oknom modalnym, czyli takim, które wymagają interakcji przed powrotem do strony. Po otwarciu fokus powinien wejść do okna, a poruszanie Tabem pozostać w jego obrębie. Musi istnieć sposób zamknięcia okna klawiaturą; standardowym rozwiązaniem jest Escape. Po zamknięciu fokus zwykle wraca do przycisku otwierającego okno.

Widoczny fokus: zawsze wiadomo, gdzie jesteś

Fokus wskazuje element aktualnie obsługiwany klawiaturą. Najczęściej ma postać obramowania wokół linku, przycisku lub pola formularza. Sam fakt, że Tab działa, nie wystarcza — użytkownik musi widzieć, dokąd przeszedł.

• Każdy aktywny element ma wyraźne oznaczenie fokusu.
• Oznaczenie jest widoczne na jasnym i ciemnym tle.
• Przyklejony nagłówek, baner zgód ani inne nakładki nie zasłaniają aktualnie obsługiwanego elementu.
• Po rozwinięciu menu i zmianie kroku formularza nadal wiadomo, gdzie znajduje się fokus.

Jeśli obramowanie znika na części przycisków, zgłoś konkretne miejsca wykonawcy. Usunięcie domyślnego oznaczenia przeglądarki wymaga zapewnienia równie czytelnego rozwiązania zastępczego.

Kontrast: sprawdź liczby, nie tylko wrażenie

Tekst może wyglądać dobrze na dużym monitorze, a być trudny do odczytania na telefonie w słońcu. Kontrast warto zmierzyć narzędziem, które oblicza stosunek jasności koloru tekstu i tła.

Podstawowe progi dla poziomu AA wynoszą:

• 4,5:1 dla zwykłego tekstu;
• 3:1 dla dużego tekstu — co najmniej 18 punktów albo 14 punktów przy pogrubieniu;
• 3:1 dla elementów graficznych niezbędnych do rozpoznania funkcji, np. ikony przycisku lub granicy pola, jeśli to ona pozwala rozpoznać pole.

Progi i przykładowe narzędzia pomiarowe opisuje rządowy poradnik dotyczący kontrastu na stronach internetowych.

Podczas kontroli uwzględnij:

• Drobne teksty: etykiety pól, instrukcje, ceny i informacje w stopce.
• Napisy na przyciskach oraz komunikaty o błędach.
• Teksty na zdjęciach i gradientach — również w miejscach, gdzie tło jest najjaśniejsze.
• Stany po najechaniu myszą i podczas obsługi klawiaturą.

Kolor nie powinien być jedynym nośnikiem informacji. Błędne pole potrzebuje komunikatu tekstowego, a link w akapicie warto wyróżnić także podkreśleniem.

Opisy obrazów: przekaż znaczenie grafiki

Tekst alternatywny pozwala osobie korzystającej z czytnika ekranu poznać informację przekazywaną obrazem. Jego treść zależy od roli zdjęcia na konkretnej podstronie.

W portfolio pracowni projektowej opis „Jasna elewacja z drewnianymi panelami przy wejściu” może przekazywać istotną cechę realizacji. Nazwa „projekt_07_final.jpg” nie spełnia tego zadania.

• Zdjęcia informacyjne mają zwięzłe opisy odpowiadające ich znaczeniu.
• Obrazy dekoracyjne są pomijane przez czytniki ekranu; dla dekoracyjnego elementu img stosuje się pusty atrybut alt="".
• Przycisk przedstawiony wyłącznie ikoną ma dostępną nazwę, np. „Otwórz wyszukiwarkę”.
• Dane z wykresów i schematów są dostępne także w tekście lub tabeli.

W panelu zarządzania stroną zwykle możesz sprawdzić opisy zdjęć. Weryfikację sposobu udostępnienia ikon i dekoracji warto przekazać osobie technicznej.

Dostępne formularze: jasne pola i pomocne komunikaty

Formularz sprawdź zarówno z poprawnymi danymi, jak i po celowym popełnieniu błędu. W sklepie użyj środowiska testowego, aby nie tworzyć przypadkowych zamówień.

Etykiety i instrukcje

• Każde pole ma widoczną etykietę, która pozostaje po rozpoczęciu wpisywania.
• Pola wymagane są jednoznacznie oznaczone, a znaczenie ewentualnej gwiazdki jest wyjaśnione.
• Wymagany format danych jest opisany przed wysłaniem formularza.
• Pola wyboru mają zrozumiałe opisy i można je zaznaczać klawiaturą.

Podpowiedź wewnątrz pustego pola, czyli placeholder, nie zastępuje etykiety. Po wpisaniu pierwszego znaku znika, utrudniając sprawdzenie, czego dotyczy odpowiedź.

Widoczność etykiety to część kontroli. Programista powinien również sprawdzić jej powiązanie z polem w kodzie, tak aby czytnik ekranu odczytywał właściwą nazwę.

Błędy i potwierdzenie wysłania

Pozostaw wymagane pole puste i wpisz niepoprawny adres e-mail. Następnie spróbuj wysłać formularz.

• Komunikat wskazuje konkretne pole i wyjaśnia sposób poprawy.
• Informacja o błędzie nie opiera się wyłącznie na czerwonym obramowaniu.
• Poprawnie wpisane dane pozostają w formularzu.
• Do błędnych pól można sprawnie dotrzeć klawiaturą.
• Po poprawnym wysłaniu pojawia się jednoznaczne potwierdzenie.

Zamiast „Nieprawidłowa wartość” lepiej napisać: „Wpisz adres e-mail zawierający znak @”. Specjalista powinien dodatkowo sprawdzić, czy błędy i potwierdzenia są przekazywane użytkownikom czytników ekranu, również wtedy, gdy pojawiają się bez przeładowania strony.

Kiedy potrzebny jest specjalistyczny audyt?

Samodzielnie wykryjesz znikający fokus, niedziałające menu, nieczytelny tekst czy niejasny komunikat. Pełniejszej analizy wymagają m.in. struktura nagłówków, nazwy i stany elementów interaktywnych oraz współpraca z technologiami asystującymi.

Audyt warto zlecić przed odbiorem nowej strony, przy rozbudowie sklepu albo wtedy, gdy użytkownicy zgłaszają trudności, których nie potrafisz odtworzyć. Zakres powinien obejmować całe procesy, w tym zakup lub wysłanie zapytania, oraz testy ręczne z czytnikiem ekranu. Automatyczny skaner może pomóc znaleźć część błędów, lecz jego dobry wynik nie potwierdza dostępności całego serwisu.

Poproś o raport z opisem barier, krokami odtworzenia, odniesieniami do kryteriów WCAG i zaleceniami naprawy. Ustal również ponowną weryfikację po wdrożeniu poprawek.

Najpierw usuń problemy blokujące kontakt, nawigację i zakup. Później powtarzaj te same scenariusze po zmianach menu, formularzy i szablonów — także po aktualizacji wtyczek oraz dodaniu zewnętrznych modułów.