Budowanie działającego odnośnika pomijającego

Działający link pomijania składa się z dwóch części: elementu anchor, który gdzieś prowadzi, oraz elementu target, na którym może się zatrzymać. Obie części są niezbędne.

Element anchor to zwykły link, którego href jest fragmentem, na przykład hashem, po którym następuje id. Kliknięcie informuje przeglądarkę, dokąd przejść.

Element target to element, do którego chcą Państwo przejść. Należy nadać mu pasujące id, aby fragment w href miał miejsce docelowe.

Link pomijania należy skierować do punktu orientacyjnego main. Jest to pojedynczy region zawierający unikatową treść strony — dokładnie miejsce, do którego użytkownicy chcą przejść.

Stara pułapka polega na tym, że link przewija stronę, ale fokus pozostaje na linku. Następne naciśnięcie klawisza Tab odsyła użytkownika z powrotem do nawigacji.

Rozwiązaniem jest umożliwienie rzeczywistego przeniesienia fokusu w to miejsce. Należy dodać tabindex równy minus jeden, aby cel mógł otrzymać fokus z linku pomijania.

Minus jeden oznacza, że element jest dostępny dla skryptów i może być celem linku, ale nie należy do kolejności Tab. Dzięki temu nie stanie się przypadkowym punktem zatrzymania fokusu dla pozostałych użytkowników.

Obecnie większość przeglądarek automatycznie przenosi fokus do celu fragmentu. Dodanie tabindex równego minus jeden gwarantuje jednak działanie we wszystkich przeglądarkach, dlatego należy je pozostawić.

Odśwież stronę, naciśnij raz klawisz Tab, a następnie Enter. Wskaźnik fokusu powinien przenieść się do treści, a kolejne naciśnięcie Tab powinno kontynuować nawigację w jej obrębie. ✅

Należy użyć jasnej etykiety. Przejdź do głównej treści dokładnie informuje użytkownika, co się wydarzy — znacznie lepiej niż niejasne „Pomiń” lub sama ikona.

Element anchor należy umieścić jako pierwsze dziecko body, przed nagłówkiem, aby klawisz Tab docierał do niego przed wszystkimi innymi elementami strony.

Należy połączyć element anchor z pasującym id na elemencie main, dodać tabindex równy minus jeden i przetestować rozwiązanie za pomocą klawisza Tab. Tak działa prawdziwie skuteczny link pomijania. 🎯