Un menu espandibile con CSS e Javascript

Roger Johansson ha da poco pubblicato Accessible expanding and collapsing menu, un tutorial che realizza con HTML semantico, CSS e Javascript non intrusivo un menu espandibile a sottolivelli (qui la demo).

Realizzare un menu simile di modo che sia il più accessibile possibile è un compito non semplice, e non sono sicuro che Johansson sia riuscito del tutto nell'impresa. Ho trovato infatti un paio di cose che si possono migliorare e vorrei condividere con voi.

1. I link di primo livello, come commenta lo stesso Johansson, vengono disabilitati da Javascript e non sono più fruibili
2. Il menu non è totalmente accessibile con molti screen reader se Javascript è abilitato

Per quano riguarda il primo punto, la questione è se le voci di primo livello debbano essere titoli o link: nel primo caso si tratta di un approccio forse più semantico, trasparente e meno problematico; nel secondo caso c'è il
vantaggio che i link di primo livello, anche se disabilitati da Javascript, consentono il "toggle" delle sottovoci del menu anche con la tastiera. Una terza soluzione, forse da preferire, potrebbe essere quella di usare i titoli in cui iniettare attraverso il DOM dei link vuoti (tipo href="#") o verso ancore/id, sulla falsariga di Javascript Keyboard Accessibility.

In quanto al secondo punto, il fatto è che display:none è nemico dell'accessibilità , anche se viene attribuito da Javascript sulle voci di secondo livello. Per ovviare, basterebbe usare ad esempio la tecnica off-left.

Ora, è tempo di un po' di autocritica: circa due anni e mezzo fa mi sono cimentato anch'io in un articolo simile, Un menu espandibile
con Javascript e CSS (ecco i link al primo e al secondo esempio).

Anche in questo caso si tratta di un menu con markup semantico, CSS e Javascript non intrusivo, fruibile sia con i CSS e/o Javascript disabilitati. Ma dal punto di vista dell'accessibilità  verso screen reader e
utenti che navigano da tastiera è un vero disastro! Morale della favola: siamo ancora piuttosto lontani da soluzioni che siano totalmente accessibili, e usare CSS, Javascript non intrusivo e progressive enhancement non garantisce comunque l'accessibilità . Mi sa che è tempo di un remake...