Quando si parla di oggetti particolarmente ostici per l’accessibilità di sicuro si può far riferimento a quelli che designer e sviluppatori definiscono “mega menu”, ossia dei menu di primo livello al cui interno si sviluppano aree a comparsa in dropdown che contengono altre informazioni, non necessariamente sotto forma di menu secondari.
Sono presenti in numerosissimi progetti web ed è molto difficile trovarne ottimizzati per l’accessibilità, anzi, sono spesso un concentrato di inaccessibilità che mettono in difficoltà tutti gli utenti, soprattutto quelli che utilizzano tecnologie assistive.
Per fortuna il 2022 si chiude con un’anteprima del progetto di Designers Italia, il sito di riferimento per il design della Pubblica Amministrazione italiana che contiene una versione di mega menu in cui è stata molto curata la parte di accessibilità.
Prima di elencare le peculiarità è bene precisare che non esiste in accessibilità un pattern ottimale che può essere valido per sempre e buono in tutte le occasioni. L’accessibilità è soprattutto valore semantico degli oggetti e in ogni uso pratico è necessario individuare rigorosamente quali siano i significati che si devono dare agli elementi. Anche questo esempio di mega menu deve essere inteso in questo modo, così come tutti i pattern disponibili in rete: una solida base di partenza per i ragionamenti e una valida dimostrazione di come possono essere interpretate le necessità di accessibilità.
Vediamo quindi cosa c’è di nuovo e importante lato accessibilità in questo tipo di mega menu.
Libreria
Il progetto implementa la libreria di Bootstrap Italia, che a sua volta è una emanazione del ben più noto Bootstrap. Rimando quindi a questi due progetti per l’approfondimento generale sui componenti utilizzati.
Valore semantico generale
È importante definire bene che un menu di navigazione deve essere descritto esclusivamente con l’elemento <nav> di HTML, oppure con il ruolo di WAI-ARIA role=”navigation”. È sempre un errore utilizzare il ruolo di menu (role=”menu”) ed i conseguenti ruoli di menuitem ecc. Non mi dilungo su questo tema, ne ha scritto esaustivamente Adrian Roselli, per disambiguare il concetto tra “role navigation” e “role menu”. Chiaramente il mega menu di cui stiamo parlando è istanziato da un elemento <nav> e al suo interno non ha altri ruoli, perché semplicemente non ce n’è bisogno.
Interazione con il menu non espanso
Se c’è un oggetto che si può espandere è sempre sbagliato forzarne l’espansione, ad esempio quando gli utenti interagiscono con il lettore di schermo o la navigazione da tastiera.
Ho analizzato decine di mega menu e questa condizione è ricorrente: il menu resta chiuso fino a quando non ci si interagisce con la tastiera o con il focus del lettore di schermo, poi si espande automaticamente e gli utenti sono costretti a ispezionarlo tutto, in sequenza. Ecco, questo comportamento è sbagliato. Non è soltanto una questione di accessibilità, è una questione logica: se un oggetto si può espandere, ma allo stato iniziale è chiuso, deve essere nella facoltà dell’utente poterlo espandere, altrimenti deve rimanere chiuso.
Anche l’apertura con la funzionalità al solo on-mouse-over è sbagliata. Le interazioni all’over sono spesso disorientanti, non è detto che gli utenti muovendo il mouse intendano interagire. Nel caso dei mega menu però soprattutto quando aprono porzioni a comparsa molto estese, la sola azione over del mouse può modificare completamente l’intera schermata della pagina e gli utenti possono anche non comprendere più se gli oggetti presenti siano contenuti all’interno del mega menu espanso oppure no.
Il mega menu di Designer Italia si apre, correttamente, soltanto con l’evento di selezione della voce primaria.
C’è un’altra cosa importante, l’elemento che espande il mega menu, è stato definito come <button> e non come ancora <a>. Infatti l’elemento non collega ad alcuna pagina ma ha solo il compito di espandere e contrarre la rispettiva zona.
Espandere una regione ben definita
Se c’è una cosa che non è mai chiara in un mega menu è la definizione di cosa sia espanso e cosa non lo sia, ed anche dove finisca l’espansione. I dropdown generici per evitare questo prevedono un blocco dell’utente nel dropdown stesso, i modo che sia sempre chiaro quando si sta per uscire dalla sezione espansa.
In un mega menu è diverso, perché la regione espansa può contenere, come detto all’inizio di questo articolo, molti elementi, non solo link ma anche testi e immagini. La regione espansa di un mega menu è molto più simile ad una finestra modale che non a un elemento dropdown.
Per questo è stata introdotta una region contenitore, per ogni blocco espanso, e tale region è descritta con nome accessibile dal bottone stesso che ne ha permesso l’espansione attraverso aria-labelledby.
Questo rende inequivocabile quale sia il perimetro preciso della regione espansa alle persone che utilizzano l’interfaccia con una tecnologia assistiva.
La regione espansa e la semplificazione
Proprio perché stiamo parlando di oggetti complessi, la semplificazione è fondamentale. Così in questo pattern di mega menu nella regione espansa sono stati eliminati tutti gli oggetti con ruoli non essenziali a vantaggio di sole cose significative. Niente intestazioni e region supplementari, perché semplicemente non ce n’è bisogno.
Conclusione
La conclusione non può che essere una considerazione sul risultato finale: siamo in presenza di un mega menu ben organizzato, essenziale, comprensibile. Niente fronzoli e niente cose inutilmente complesse.
Chiaramente stiamo parlando di una istanza creata appositamente per questo progetto web, ma un progetto di primaria importanza visto che sarà la casa del Design System del paese.
Allo stato attuale è aperto ai contributi degli utenti e all’analisi di colleghi esperti che potranno testare e portare il loro contributo.
Ancora una esortazione: quando si decide di implementare un oggetto di questo tipo non è sufficiente copiare il pattern di un oggetto simile esistente (anche se si tratta di questo di Designers Italia). Per ogni istanza è necessario individuare in modo inequivocabile quali siano le funzionalità che si vogliono implementare e quali i ruoli e i valori degli elementi. Ma ancora prima è necessario porsi una domanda preliminare: è veramente necessario implementare un mega menu?
Sarà mia cura aggiornare questo articolo in base a modifiche future per tenere aggiornato questo pattern.