Dostępność strony firmowej: klawiatura, kontrast i struktura w praktyce

Spróbuj znaleźć ofertę i wysłać pytanie bez dotykania myszy. Jeśli gubisz zaznaczenie albo nie możesz zamknąć menu, znalazłeś barierę, której efektowne zdjęcia nie zasłonią. Dostępność strony oznacza możliwość przeczytania treści i wykonania zadania przy różnych sposobach obsługi. Sprawdź klawiaturę, widoczny fokus — oznaczenie aktywnego elementu — kontrast, strukturę i komunikaty. Sam przycisk powiększania liter nie wykonuje tej pracy za całą witrynę.

Ten artykuł opisuje podstawowy odbiór funkcjonalny, z odniesieniami do wybranych kryteriów WCAG, czyli wytycznych dostępności treści internetowych. Nie jest oceną obowiązków prawnych konkretnej firmy ani potwierdzeniem pełnej zgodności strony ze standardem. Pełna ocena wymaga określenia zakresu, poziomu oraz właściwej metodyki. Proponowane testy pozwalają znaleźć realne bariery i przygotować sprawdzalne poprawki.

Ustal zakres przed uruchomieniem narzędzia

Zapisz, które adresy i funkcje obejmuje przegląd: stronę główną, ofertę, artykuł, menu, formularz oraz dokumenty. Dodaj stany, których nie widać po samym wejściu: błąd pola, rozwinięty panel, wysyłanie, sukces i brak wyniku wyszukiwania. Strona może działać poprawnie w stanie początkowym i blokować użytkownika po pierwszym działaniu. Jeżeli oferta korzysta z przestrzennej prezentacji, do zakresu dodaj także drogę bez sceny 3D, z tymi samymi ważnymi informacjami i dostępnym przejściem do dalszego działania.

Wybierz reprezentatywne scenariusze. Osoba chce znaleźć zakres usługi, przeczytać warunki i wysłać krótkie pytanie. Inna wraca do artykułu z dawnego odnośnika. Opisz zadanie bez wskazywania konkretnego przycisku. Wtedy sprawdzasz drogę odbiorcy, a nie umiejętność odtworzenia instrukcji autora projektu.

Wymagania warto wcześniej zapisać w briefie strony premium. Odbiór nie powinien po raz pierwszy ujawniać, że formularz ma działać klawiaturą albo że menu nie może zasłaniać aktywnego pola. Ustal też osobę odpowiedzialną za potwierdzenie poprawki i sposób zachowania dowodów.

Przejdź stronę samą klawiaturą

Odłóż mysz i rozpocznij od wejścia na adres. Przechodź klawiszem Tab oraz cofaj się przez Shift+Tab. Sprawdź aktywację linków i przycisków zgodnie z ich standardowym zachowaniem. Otwórz menu, panel pytań i kontakt. Zwróć uwagę, czy można dotrzeć do wszystkich istotnych działań i opuścić każdy otwarty element.

Kryterium 2.1.1 WCAG dotyczy obsługi klawiaturą, z określonym wyjątkiem dla czynności zależnych od przebiegu ruchu. Zwykłe menu lub formularz strony B2B nie stają się takim wyjątkiem tylko dlatego, że zaprojektowano je pierwotnie pod kursor.

Zapisuj konkretne bariery: „po otwarciu menu nie można przejść do kontaktu” albo „zamknięta odpowiedź nadal zawiera aktywny link w kolejności Tab”. Taki opis prowadzi do naprawy. Ogólne „klawiatura nie działa” pozostawia wykonawcy zbyt wiele domysłów i utrudnia ponowne sprawdzenie.

Sprawdź widoczność i kolejność fokusu

Fokus wskazuje miejsce aktualnej obsługi klawiatury. Musi być możliwy do dostrzeżenia, także na ciemnym i jasnym tle. Kryterium 2.4.7 WCAG opisuje widoczny wskaźnik fokusu. Sam efekt po najechaniu kursorem nie potwierdza spełnienia tego kryterium.

Porównaj kolejność przechodzenia z układem i znaczeniem treści. Czy po nagłówku trafiasz do właściwego działania, czy do ukrytej dekoracji? Czy stała belka nie przykrywa elementu, który właśnie otrzymał fokus? Nie naprawiaj chaotycznej kolejności przypadkowymi numerami przypisywanymi kolejnym kontrolkom. Trzeba sprawdzić konstrukcję dokumentu i elementów interaktywnych.

Po zamknięciu dużego menu użytkownik powinien umieć rozpoznać, gdzie się znajduje. W projekcie zapisz zachowanie powrotu do kontrolki otwierającej. Nie przenoś fokusu przy każdej dekoracyjnej zmianie obrazu. Szczegóły stanów i przejść rozwijają mikrointerakcje strony internetowej.

Oceń strukturę poza samym wyglądem

Sprawdź tytuł strony i listę nagłówków. Sekcje powinny tworzyć logiczny porządek, a nie zbiór wyrazów powiększonych dla efektu. W3C WAI opisuje strukturę regionów i treści. Prawidłowe oznaczenie pomaga poruszać się po materiale również osobom korzystającym z technologii asystujących.

Zwróć uwagę na linki czytane bez pełnego akapitu. Pięć identycznych „więcej” w kartach może wymagać lepszego opisu kontekstu. Przycisk powinien mieć nazwę odpowiadającą funkcji, a element prowadzący do nowej strony być linkiem. Sam wygląd nie przekazuje przeglądarce roli elementu.

Porządek całej witryny ułatwia architektura informacji B2B. Dostępność nie zastępuje tej pracy. Strona może mieć poprawne znaczniki, a nadal używać niezrozumiałych nazw usług. W odbiorze potrzebujesz więc zarówno kontroli technicznej, jak i sprawdzenia sensu komunikacji.

Zmierz kontrast w stanach, które naprawdę występują

Kryterium 1.4.3 WCAG określa kontrast tekstu: na poziomie AA zasadniczo co najmniej 4,5:1, a dla dużego tekstu według definicji kryterium 3:1, z opisanymi wyjątkami. Nie oceniaj spełnienia tego warunku wyłącznie wzrokiem lub na podstawie nazw kolorów z księgi marki.

Sprawdź menu, podpisy, etykiety, komunikaty i tekst przycisków. Zbadaj także wersję po wskazaniu, wybraniu oraz pojawieniu się błędu. Jasne złoto może pełnić funkcję ozdobną, ale konkretny odcień nie musi być właściwy dla drobnego tekstu na kremowym tle. Wynik zależy od pary kolorów oraz roli elementu.

Tekst na fotografii wymaga kontroli każdego przyjętego kadru. Duży ciemny obszar po lewej może zniknąć na telefonie, a jasny refleks znaleźć się pod literami. Wspólny odbiór fotografii i typografii strony premium jest bardziej użyteczny niż zatwierdzanie tych dwóch warstw w osobnych prezentacjach.

Powiększ treść i zawęź widok

Sprawdź tekst po powiększeniu do 200%. Kryterium 1.4.4 WCAG opisuje zachowanie treści przy takim skalowaniu. Następnie przeprowadź test wąskiego układu. Kryterium reflow odnosi się między innymi do szerokości odpowiadającej 320 pikselom CSS dla pionowo przewijanej treści, z wyjątkami wymagającymi układu dwuwymiarowego.

Przejdź pełną drogę, nie tylko nagłówek. Szukaj urwanych etykiet, poziomego przewijania zwykłych akapitów i przycisków zasłaniających inne informacje. Sprawdź długi adres e-mail, polski tytuł oraz komunikat błędu. Te elementy często ujawniają ograniczenia sztywnych wysokości i szerokości.

Nie usuwaj informacji, żeby zmieścić ekran. Najpierw zmień układ i pozwól tekstowi zawijać się w odpowiednich miejscach. Tabela wymagająca porównania dwóch wymiarów może potrzebować innej obsługi niż akapit, ale wyjątek nie powinien usprawiedliwiać przepełnienia całej witryny. Zapisz, gdzie problem występuje i jaki materiał znika.

Odbierz obrazy, formularz i komunikaty

Opis alternatywny powinien zależeć od funkcji zdjęcia. Dekoracja może mieć pusty alt, informacyjny obraz potrzebuje odpowiednika istotnego znaczenia, a grafika przycisku opisu działania. Wybór i kontekst rozwija fotografia marki na stronie. Nie dopisuj ukrytych reklamowych fraz zamiast informacji.

Formularz sprawdź od etykiety do potwierdzenia. Czy wiadomo, które pola są obowiązkowe? Czy błąd opisuje sposób poprawy? Czy po nieudanej próbie pozostają wpisane dane? Sam czerwony obrys nie wyjaśnia, co się stało. Potrzebna jest informacja dostępna w miejscu, w którym odbiorca wykonuje działanie.

Szczegółowy proces opisuje formularz kontaktowy strony B2B. Sprawdź go także z czytnikiem ekranu lub z udziałem osoby kompetentnej w takim teście. Jeżeli planujesz sesję z użytkownikami, przygotuj badanie z osobami korzystającymi z technologii asystujących, z uwzględnieniem ich własnego sposobu pracy. Automatyczny skaner nie oceni samodzielnie, czy komunikat jest zrozumiały i czy kolejność działań ma sens.

Jak ustalić kolejność poprawek?

Najpierw zajmij się barierą, która uniemożliwia wykonanie głównego zadania: niedostępnym menu, pułapką klawiatury albo formularzem bez zrozumiałego błędu. Potem napraw przeszkody utrudniające orientację i czytanie. Nie oceniaj priorytetu wyłącznie według liczby wystąpień w raporcie narzędzia. Jeden problem może blokować całą drogę do kontaktu.

Roboczy przykład: przycisk zamknięcia menu jest widoczny, ale nie można do niego dojść klawiaturą. Pierwsza poprawka dotyczy działania i drogi fokusu. Dopiero po jej potwierdzeniu warto dopracować czas zanikania panelu. W protokole zapisz również test powrotu do treści, aby naprawa jednego kroku nie pozostawiła użytkownika w niewidocznej warstwie.

Do podstawowego odbioru dodaj ikony i ich etykiety. Sprawdź, czy działanie ma zrozumiałą nazwę również bez rozpoznania rysunku. Szczególnie łatwo przeoczyć ten problem przy samym symbolu pobrania, zamknięcia lub otwarcia kolejnego panelu.

Zapisz bariery tak, żeby można było odebrać naprawę

Dobra karta błędu zawiera adres, stan, kroki, oczekiwanie i obserwowany wynik. Dodaj powiązane kryterium, jeśli zostało ustalone, oraz dowód w postaci nagrania albo opisu. Nie publikuj przy tym danych wpisanych przez prawdziwego klienta. Do odtworzenia zwykle wystarczy materiał testowy.

Oddziel wynik narzędzia od potwierdzonej bariery. Ostrzeżenie może wymagać oceny człowieka, a brak ostrzeżeń nie oznacza pełnej zgodności. Określ też, które funkcje nie zostały sprawdzone. Uczciwy zakres raportu pomaga zaplanować dalszą ocenę i nie myli podstawowego przeglądu z certyfikacją całej witryny.

• Każde ważne działanie ma drogę klawiaturową.
• Fokus pozostaje widoczny i nie gubi kontekstu.
• Nagłówki oraz etykiety opisują rzeczywistą funkcję.
• Kontrast został zmierzony w istotnych stanach.
• Powiększenie i wąski widok zachowują treść.
• Błędy mają procedurę ponownego sprawdzenia.

Przy ponownym odbiorze wykonaj również krok poprzedzający naprawiony element i krok następujący po nim. Zmiana kolejności fokusu może pomóc w jednym miejscu, a utrudnić powrót do oferty. Poza potwierdzeniem samej poprawki potrzebujesz więc krótkiego testu otaczającej drogi. Do raportu dopisz wersję strony i wynik, aby dawna obserwacja nie uchodziła za ocenę późniejszego wdrożenia.

Włącz te dowody do odbioru gotowej strony. Jeśli chcesz ustalić zakres poprawy dostępności, sprawdź warstwę Design.