Innehåll vid hovring eller fokus

Vad kriteriet kräver

När extra innehåll — ett verktygstips, en popover, en undermeny — visas för att användaren hovrade eller fokuserade något, måste det uppfylla tre regler. Stängbart: användaren kan stänga det utan att flytta pekare eller fokus (vanligtvis via Escape-tangenten). Hovert: om användaren flyttar pekaren från utlösaren in i det visade innehållet förblir det öppet. Beständigt: det försvinner inte av tidsgräns medan användaren fortfarande hovrar eller har fokus på utlösaren.

Hur du uppfyller det

• Koppla Escape till att stänga varje verktygstips eller popover som öppnas vid hovring eller fokus.
• Se till att verktygstipselementet i sig är nåbart med mus — placera det inte så att en förflyttning mot det utlöser mouseout på utlösaren.
• Stäng inte automatiskt verktygstips efter en tidsgräns medan användaren fortfarande hovrar eller har fokus på utlösaren.
• Använd aria-describedby för att koppla utlösaren till popup-fönstret så att skärmläsare meddelar innehållet.
• Bygg popovers med HTML-attributet popover eller ett testat bibliotek (Popper.js, Floating UI, Radix UI) — båda hanterar dessa regler.
• För dropdown-undermenyer, ge ett litet gnagsområde mellan det överordnade menyalternativet och undermenyn så att pekaren kan passera utan att menyn stängs.

Vanliga fel

• Enbart CSS-baserade :hover-verktygstips med ett glapp mellan utlösare och verktygstips — pekaren rör sig in i glappet, mouseout utlöses, verktygstipset försvinner.
• Verktygstips som stängs automatiskt efter 2 sekunder även medan användaren fortfarande hovrar.
• Ingen Escape-tangenthanterare — tangentbordsanvändare kan inte stänga ett fokusutlöst verktygstips utan att lämna fältet.
• Dropdown-menyer som stängs i det ögonblick pekaren glider av det överordnade alternativet, innan den når underalternativen.
• Popovers utlösta vid fokus som tar över det synliga området och inte kan döljas med Escape — de stannar kvar för alltid.

Varför det spelar roll

Det här kriteriet överträds oftast av handskrivna verktygstips och enbart CSS-baserade dropdown-menyer. Byt till ett bibliotek som redan hanterar stängbarhet och hoverbarhet, eller granska din egna kod mot de tre reglerna. Det är en lönsam åtgärd: hover-innehåll tenderar att finnas överallt i ett komplext gränssnitt, så att få det rätt en gång i en delad komponent rensar en stor mängd granskningsskuld.