Come simulare l’evento Hover su dispositivi touchscreen

Fino a qualche anno fa, la maggioranza dei siti Web proponeva un sistema di navigazione a più livelli organizzati ad albero, accessibili tramite un complesso sistema di menu a scomparsa.

Fig. 1 Esempio di menu multilivello, fonte: www.bluxis.it

La comparsa e scomparsa dei vari livelli viene regolata dall’evento Hover generato dal browser quando il puntatore del mouse si trova sopra un blocco HTML. In caso di evento Hover vengono eseguite le regole CSS impostate come :hover e viene lanciata l’eventuale funzione JavaScript registrata sull’evento onMouseOver.

Con la progressiva diffusione di smartphone e altri device dotati di touchscreen, gli sviluppatori Web hanno via via abbandonato questo modello di navigazione, poichè in presenza di touchscreen scompare l’evento Hover e ciascun tocco viene interpretato direttamente come click.

Adeguare un sito ai nuovi modelli di navigazione spesso non è un lavoro banale, ma richiede un ripensamento generale dell’organizzazione dei contenuti del sito Web. Per questo motivo, in una iniziale fase di transizione, è possibile inserire una piccola modifica che consente di “simulare” l’evento hover sui dispositivi touch, lasciando inalterato il comportamento su quelli dotati di mouse.

La proprietà DOM chiamata aria-haspopup viene riconosciuta da Internet Explorer 10 e usata per attivare il meccanismo di simulazione dell’hover in questo modo:

Quando tale codice viene eseguito su un dispositivo touch, il primo tocco viene interpretato come Hover, eseguendo quindi la regola CSS li:hover, mentre il secondo tocco (sullo stesso blocco) viene interpretato come click. Un tocco fuori dall’area provvede a disattivare l’hover.

Questa escamotage può essere usata per “mettere una pezza” in quei siti che attendono una fase di ristrutturazione, per garantire la corretta navigazione dei contenuti anche sui moderni PC e Tablet dotati di Windows 8 e Internet Explorer 10. La prossima versione di IE, invece, avrà il supporto integrato per la simulazione dell’evento hover.

Per ulteriori approfondimenti, si consiglia la lettura di questo documento contente le specifiche, le definizioni ARIA e ovviamente le raccomandazioni W3C riguardo l’accessibilità dei siti Web.