Treść przy najechaniu lub fokusie

Czego wymaga kryterium

Gdy dodatkowa treść — dymek, popover, podmenu — pojawia się po najechaniu kursorem lub ustawieniu fokusa na elemencie, musi spełniać trzy reguły. Możliwość odrzucenia: użytkownik może ją zamknąć bez przesuwania wskaźnika ani fokusa (zazwyczaj klawiszem Escape). Dostępność pod kursorem: jeśli użytkownik przesunie wskaźnik z wyzwalacza do ujawnionej treści, pozostaje ona otwarta. Trwałość: treść nie wygasa i nie znika, dopóki użytkownik jej nie odrzuci lub fokus nie opuści wyzwalacza.

Jak spełnić kryterium

• Należy podpiąć klawisz Escape do zamykania każdego dymka lub popovera otwieranego po najechaniu lub ustawieniu fokusa.
• Należy upewnić się, że element dymka jest osiągalny myszą — nie należy go pozycjonować w miejscu, gdzie przesunięcie kursora w jego kierunku wyzwala mouseout na wyzwalaczu.
• Nie należy automatycznie ukrywać dymków po upływie czasu, gdy użytkownik nadal najeżdża kursorem lub ma fokus na wyzwalaczu.
• Należy stosować aria-describedby, aby powiązać wyzwalacz z podręcznym elementem, dzięki czemu czytniki ekranu ogłoszą treść.
• Popovery warto budować z atrybutem HTML popover lub sprawdzoną biblioteką (Popper.js, Floating UI, Radix UI) — obie obsługują te reguły.
• Dla rozwijanych podmenu należy zapewnić niewielki bufor między elementem menu nadrzędnego a podmenu, by wskaźnik mógł go przekroczyć bez zamknięcia.

Częste błędy

• Dymki oparte wyłącznie na CSS :hover z przerwą między wyzwalaczem a dymkiem — wskaźnik wpada w przerwę, odpala mouseout, dymek znika.
• Dymki automatycznie ukrywające się po 2 sekundach, nawet gdy użytkownik nadal najeżdża.
• Brak obsługi klawisza Escape — użytkownicy klawiatury nie mogą zamknąć dymka wywołanego fokusem bez opuszczenia pola.
• Menu rozwijane zamykające się, gdy wskaźnik ześlizguje się z elementu nadrzędnego, zanim dotrze do elementów podrzędnych.
• Popovery otwierane przez fokus, których nie da się ukryć klawiszem Escape — pozostają widoczne bez możliwości odrzucenia.

Dlaczego to jest ważne

Kryterium jest najczęściej naruszane przez ręcznie napisane dymki i rozwijane menu oparte wyłącznie na CSS. Zaleca się przejście na bibliotekę obsługującą już możliwość odrzucenia i dostępność pod kursorem albo przeprowadzenie audytu własnego kodu pod kątem trzech reguł. To naprawa o wysokiej dźwigni: treść przy najechaniu zazwyczaj pojawia się w całym złożonym interfejsie, więc poprawne zaimplementowanie jej raz w współdzielonym komponencie znacząco redukuje dług audytowy.