Inhoud bij aanwijzen of focus

Wat het vereist

Wanneer extra inhoud — een tooltip, een popover, een submenu — verschijnt doordat de gebruiker iets aanwijst of focust, moet deze aan drie regels voldoen. Wegsluitbaar: de gebruiker kan de inhoud sluiten zonder de aanwijzer of focus te verplaatsen (doorgaans via de Escape-toets). Bereikbaar met de aanwijzer: als de gebruiker de aanwijzer van de trigger naar de zichtbare inhoud beweegt, blijft die open. Persistent: de inhoud verdwijnt niet door een time-out terwijl de gebruiker de trigger nog aanwijst of focust.

Hoe er aan te voldoen

• Koppel Escape aan het sluiten van elke tooltip of popover die opent bij aanwijzen of focus.
• Zorg dat het tooltip-element zelf bereikbaar is met de muis — positioneer het niet zodanig dat bewegen ernaar toe een mouseout op de trigger veroorzaakt.
• Verberg tooltips niet automatisch na een time-out terwijl de gebruiker de trigger nog aanwijst of focust.
• Gebruik aria-describedby om de trigger te koppelen aan de popup zodat schermlezers de inhoud aankondigen.
• Bouw popovers met het HTML popover-attribuut of een getest bibliotheek (Popper.js, Floating UI, Radix UI) — beide behandelen deze regels.
• Geef voor dropdown-submenu’s een kleine tolerantiezone tussen het bovenliggende menu-item en het submenu zodat de aanwijzer kan oversteken zonder dat de inhoud sluit.

Veelvoorkomende fouten

• Alleen-CSS :hover-tooltips met een ruimte tussen trigger en tooltip — de aanwijzer beweegt in de ruimte, mouseout wordt geactiveerd, de tooltip verdwijnt.
• Tooltips die na 2 seconden automatisch sluiten terwijl de gebruiker de trigger nog aanwijst.
• Geen Escape-afhandelaar — toetsenbordgebruikers kunnen een door focus geactiveerde tooltip niet sluiten zonder het veld te verlaten.
• Dropdownmenu’s die sluiten zodra de aanwijzer het bovenliggende item verlaat, voordat de onderliggende items worden bereikt.
• Popovers die bij focus worden geactiveerd, het zichtbare gebied overnemen en niet met Escape kunnen worden gesloten — ze blijven permanent zichtbaar.

Waarom het ertoe doet

Dit succescriterium wordt het vaakst geschonden door zelfgemaakte tooltips en alleen-CSS-dropdownmenu’s. Stap over op een bibliotheek die wegsluitbaarheid en aanwijzerbereikbaarheid al afhandelt, of controleer de maatwerkkode aan de hand van de drie regels. Het is een renderende verbetering: zweefinhoud komt overal in een complexe gebruikersinterface voor, zodat het één keer goed doen in een gedeeld component een grote vermindering van auditschuld oplevert.