Indhold ved hover eller fokus

Hvad kriteriet kræver

Når ekstra indhold — en tooltip, en popover, en undermenu — vises, fordi brugeren har holdt markøren over noget eller sat fokus på det, skal tre regler overholdes. Kan lukkes: brugeren kan lukke det uden at flytte markøren eller fokus (typisk via Escape-tasten). Markørtilgængeligt: hvis brugeren bevæger markøren fra udløseren ind i det viste indhold, forbliver det åbent. Vedvarende: det udløber ikke og forsvinder ikke, før brugeren lukker det eller udløseren mister fokus.

Sådan opfyldes det

• Sørg for, at Escape lukker alle tooltips og popovers, der åbnes ved hover eller fokus.
• Kontrollér, at tooltip-elementet selv er tilgængeligt med musen — placer det ikke, så bevægelse mod det udløser et mouseout på udløseren.
• Lad ikke tooltips lukke automatisk efter en timeout, mens brugeren stadig hover over eller er fokuseret på udløseren.
• Brug aria-describedby til at forbinde udløseren med popup’en, så skærmlæsere annoncerer indholdet.
• Byg popovers med HTML’s popover-attribut eller et afprøvet bibliotek (Popper.js, Floating UI, Radix UI) — begge håndterer disse regler.
• For dropdown-undermenuer: giv et lille graceområde mellem det overordnede menupunkt og undermenuen, så markøren kan krydse over uden at lukke menuen.

Hyppige fejl

• CSS-only :hover-tooltips med et mellemrum mellem udløser og tooltip — markøren bevæger sig ind i mellemrummet, mouseout udløses, og tooltip’en forsvinder.
• Tooltips, der lukker automatisk efter 2 sekunder, selv mens brugeren stadig hover.
• Ingen Escape-tastehandler — tastaturbrugere kan ikke lukke en fokusudløst tooltip uden at forlade feltet.
• Dropdownmenuer, der lukker, så snart markøren bevæger sig væk fra det overordnede punkt, inden den når de underordnede punkter.
• Popovers udløst ved fokus, der ikke kan skjules med Escape — de forbliver åbne.

Hvorfor det er vigtigt

Dette succeskriterium overtrædes oftest af hjemmelavede tooltips og CSS-only dropdownmenuer. Skift til et bibliotek, der allerede håndterer lukningsmuligheder og markørtilgængelighed, eller gennemgå din tilpassede kode over for de tre regler. Det er en effektiv rettelse: hover-indhold optræder typisk mange steder i et komplekst UI, så en korrekt implementering i en delt komponent betaler sig i hele auditskovlden.