Burger menu con tecnica aria-expanded

Mostrare/Nascondere il mobile menu premendo il burger button.
Semplice vero? Potremmo usare un comune script JS per modificare la proprietà display del menu quando clicchiamo il burger button.
In questo post però vediamo come usare l’attributo aria-expanded, molto più adatto per l’accessibilità.

Consideriamo il burger button e il menù mobile come 2 blocchi.
Il menù deve essere posizionato subito dopo il burger button (nel DOM).

Ad esempio:

• Altro contenuto
• Burger button
• Mobile menu
• Altro contenuto

Ha a che fare con una tecnica interessante che coinvolge:

• ARIA
• JavaScript
• CSS

Usiamo “aria-expanded” con proprietà “false”. Cioè?

“aria-expanded”
È usato dagli Screen Reader per annunciare che un determinato elemento è stato espanso (false/chiuso e true/aperto). A differenza di come si potrebbe pensare, ho capito che “aria-expanded” va applicato al bottone e non al menu, cioè l’elemento che si espande.

“aria-controls”
Si consiglia di usare “aria-controls” insieme a “aria-expanded”. Alcuni Screen Reader usano questo attributo per collegare l’elemento che aziona l’evento (il burger button) con l’aria espansa (il menu che mostriamo e nascondiamo).

In HTML basta aggiungere questi attributi ARIA al burger button.

Intercettiamo l’evento click. Quindi usiamo JavaScript per cambiare “aria-expanded” da “false” a “true” quando il burger button è cliccato.

Possiamo quindi azionare il menu usando il selettore di prossimità “+” in combinazione con il selettore dell’attributo “aria-expanded” quando ha proprietà “true”, cioè quando il burger button è cliccato. Più complicato da dire che da fare.

Si può usare questo stesso selettore per modificare lo stile del bottone quando è cliccato, ad esempio per ruotare una freccia o cambiare un’etichetta.

Mi sono sforzato tantissimo per capire come semplificare il menù e alla fine ho risolto con questa tecnica. Ma più importante, per usarla ho dovuto ripensare il funzionamento del menu anche dal punto di vista del design e del DOM.
Direi allora che questo può essere un buon esempio di Good design e Good coding che vanno a braccetto per raggiungere una Good accessibility.

C’è una frase di Kevin Bonett che vorrei ripetere: “Sono un developer noioso! Mi piace iniziare con HTML semantico. Poi inserisco CSS/JS… e forse un po’ di ARIA.”