Widoczny dopiero po uzyskaniu fokusu

Linki pomijania są niezbędne, ale wiele zespołów obawia się, że zaśmiecą układ. Klasyczne rozwiązanie polega na ukryciu ich wizualnie, przy jednoczesnym zachowaniu dostępności dla użytkowników klawiatury.

Nie należy używać display none ani visibility hidden. Usuwają one link z drzewa dostępności, więc nikt nie może ustawić na nim fokusu.

Celem jest stan ukrycia wizualnego: element jest niewidoczny na ekranie, ale w pełni dostępny dla klawiatur i czytników ekranu.

Często stosowany trik polega na zmniejszeniu linku do jednego piksela i przycięciu go. Pozostaje on w DOM-ie i kolejności fokusu, tylko znika z widoku.

Kluczowy jest stan focus. Gdy klawisz Tab ustawi fokus na linku, CSS przywraca mu rozmiar i przenosi go z powrotem do widoku.

Należy używać focus, nigdy hover. Użytkownik klawiatury nie może ustawić stanu hover, więc ujawnianie linku wyłącznie po najechaniu pozostawi go dla niego niewidocznym.

Po ujawnieniu należy nadać mu jednolite tło i padding. Powinien wyglądać jak oczywisty przycisk, a nie jak blady tekst, który można przeoczyć.

Nie należy usuwać obrysu fokusu z ujawnionego linku. Użytkownicy muszą widzieć dokładnie, gdzie znalazł się ich fokus.

Często ukryty link znajduje się poza ekranem dzięki ujemnej wartości top, a po uzyskaniu fokusu przesuwa się do wartości zero. To przesunięcie sprawia, że ujawnienie wygląda na zamierzone.

Ten wzorzec ukrywania wizualnego jest tak użyteczny, że większość zespołów przechowuje go jako wspólną klasę narzędziową dla dowolnej treści sr-only.

Po świeżym załadowaniu strony naciśnij klawisz Tab. Link pomijania powinien natychmiast pojawić się w widoku. Po przejściu dalej klawiszem Tab powinien ponownie zniknąć. ✅

Które rozwiązanie prawidłowo ukrywa link pomijania do czasu, gdy będzie potrzebny?

Link pomijania należy ukryć przez przycinanie, nigdy za pomocą display none, a następnie ujawniać go po uzyskaniu fokusu, z wyraźnym obrysem. Niewidoczny, dopóki nie jest potrzebny. 🎯