Contenuto al passaggio del puntatore o al focus

Cosa richiede

Quando un contenuto aggiuntivo — un tooltip, un popover, un sottomenu — compare perché l’utente ha passato il puntatore o spostato il focus su un elemento, deve soddisfare tre regole. Congedabile: l’utente può chiuderlo senza spostare il puntatore o il focus (in genere tramite il tasto Escape). Raggiungibile con il puntatore: se l’utente sposta il puntatore dal trigger al contenuto rivelato, quest’ultimo rimane aperto. Persistente: non scade e non scompare da solo finché l’utente non lo congeda o il trigger non perde il focus.

Come soddisfarlo

• Associare il tasto Escape alla chiusura di qualsiasi tooltip o popover che si apre al passaggio del puntatore o al focus.
• Assicurarsi che l’elemento tooltip sia raggiungibile con il mouse — non posizionarlo in modo tale che lo spostamento del puntatore verso di esso attivi un evento mouseout sul trigger.
• Non chiudere automaticamente i tooltip dopo un timeout mentre l’utente si trova ancora sopra il trigger o lo ha in focus.
• Usare aria-describedby per associare il trigger al popup, in modo che i lettori di schermo annuncino il contenuto.
• Costruire i popover con l’attributo HTML popover oppure con una libreria collaudata (Popper.js, Floating UI, Radix UI) — entrambe gestiscono queste regole.
• Per i sottomenu a discesa, prevedere una piccola area di tolleranza tra la voce del menu padre e il sottomenu, in modo che il puntatore possa attraversarla senza che il menu venga chiuso.

Errori comuni

• Tooltip :hover solo CSS con uno spazio tra trigger e tooltip — il puntatore entra nello spazio, si attiva mouseout, il tooltip scompare.
• Tooltip che si chiudono automaticamente dopo 2 secondi anche mentre l’utente si trova ancora sopra di essi.
• Nessun gestore del tasto Escape — gli utenti da tastiera non possono congedare un tooltip attivato al focus senza abbandonare il campo.
• Menu a discesa che si chiudono non appena il puntatore esce dalla voce padre, prima di raggiungere le voci figlie.
• Popover attivati al focus che occupano l’area visibile e non possono essere nascosti tramite Escape — rimangono lì indefinitamente.

Perché è importante

Questo criterio di successo viene violato più spesso da tooltip costruiti artigianalmente e menu a discesa realizzati solo in CSS. Conviene passare a una libreria che gestisca già la possibilità di congedare il contenuto e di raggiungerlo con il puntatore, oppure verificare il codice personalizzato rispetto alle tre regole. È una correzione ad alto rendimento: il contenuto al passaggio del puntatore tende a essere presente ovunque in un’interfaccia complessa, per cui sistemarlo una volta sola in un componente condiviso azzera un’ampia quota del debito di accessibilità.