Wyobraź sobie odwiedzającego, który otwiera witrynę studia i przechodzi ze strony głównej do usług, a potem do danych kontaktowych, nie dotykając myszy. Czy wie, gdzie się znajduje? Czy potrafi otworzyć potrzebną sekcję? Ta krótka droga pokazuje, czy nawigacja działa jako użyteczne narzędzie, a nie tylko dobrze wygląda na makiecie. Główna zasada wytycznych W3C WAI dotyczących klawiatury jest prosta: funkcjonalność interfejsu powinna być dostępna za pomocą klawiatury.
Zacznij od czytelnej struktury
Do zwykłej nawigacji używaj linków pogrupowanych w listy wewnątrz elementu nav, zgodnie z samouczkiem WAI dotyczącym struktury menu. Link prowadzi do strony; przycisk otwiera lub zamyka podmenu. Jeśli „Usługi” obejmują zarówno stronę przeglądową, jak i zagnieżdżone sekcje, rozdziel te działania. Dzięki temu komponent łatwo wyjaśnić jeszcze przed programowaniem: etykieta otwiera przegląd, a sąsiedni przycisk pokazuje kolejne opcje.
Zaplanuj kolejność nawigacji
Tab powinien prowadzić zrozumiałą drogą, a Shift + Tab cofać. Wytyczne WAI dotyczące kolejności fokusu podkreślają zachowanie znaczenia i możliwości obsługi. Zaznacz tę drogę w projekcie: logo, główne linki, przycisk zapytania, a potem następny element sterujący strony. Jeśli fokus niespodziewanie skacze między odległymi obszarami, sprawdź kolejność elementów w kodzie, nie tylko układ wizualny. Uzgodnij zamierzoną kolejność przed dodaniem animacji.
Spraw, by fokus był łatwy do zauważenia
Fokus wskazuje element, który otrzyma następne działanie z klawiatury. Wytyczne dotyczące widocznego fokusu wyjaśniają, że jego wskaźnik musi pozostawać widoczny podczas wyświetlania fokusu. Nie usuwaj domyślnego obrysu bez wyraźnego zamiennika. Samouczek WAI dotyczący stylizacji menu traktuje fokus i bieżącą stronę jako różne stany. Projektuj je razem: podkreślenie może oznaczać aktualną sekcję, a odrębny obrys pozycję klawiatury.
Otwieraj podmenu świadomie
Najechanie kursorem nie może być jedynym sposobem ujawniania zagnieżdżonych linków. Wytyczne WAI dotyczące rozwijanych menu obejmują obsługę klawiaturą i komunikowanie rozwinięcia przez aria-expanded. Zwykła nawigacja nie potrzebuje automatycznie roli menu. W przykładzie WAI nawigacji z rozwijaniem Enter i Space aktywują przyciski; Escape zamyka listę rozwijaną i przywraca fokus jej przyciskowi. Przetestuj ten wzorzec interakcji we własnej implementacji zamiast traktować przykład jako kod gotowy do produkcji.
Przejdź rzeczywistą drogę
- Otwórz stronę główną i odłóż mysz. Użyj Tab, aby znaleźć pierwszy element nawigacji.
- Dotrzyj do „Usług”, otwórz podmenu i wybierz stronę. Powtórz drogę wstecz.
- Zamknij i ponownie otwórz podmenu. Sprawdź położenie fokusu po każdym działaniu.
- Powtórz w wąskim oknie i przy powiększeniu strony. Pozostaw widoczne istniejące komunikaty i przyklejone panele.
Osobno sprawdź nakładające się treści: WAI ostrzega przed całkowitym zasłanianiem komponentu z fokusem zawartością strony. Użytkownicy muszą też móc opuścić komponent za pomocą klawiatury. Zwykłe menu nie powinno zamykać ich w zapętlonej nawigacji wewnątrz siebie.
Zapisuj zachowanie, nie wrażenia
Przydatne zgłoszenie problemu zawiera URL strony, przeglądarkę, szerokość okna, naciśnięte klawisze i oczekiwany wynik. Zamiast „menu jest niewygodne” napisz: „Po zamknięciu podmenu znika widoczny fokus; kolejne Tab rozpoczyna drogę od nowa.” Ten szczegół ułatwia ponowne testowanie. Krótkie ćwiczenie może ujawnić problemy nawigacji, ale nie zastępuje pełnej oceny dostępności ani nie potwierdza zgodności z WCAG.