Un menu espandibile con CSS e Javascript
Venerdì 1 Giugno 2007 - 09:14
di Alessandro Fulciniti
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.
- I link di primo livello, come commenta lo stesso Johansson, vengono disabilitati da Javascript e non sono più fruibili
- 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…
Categoria: Web Standards | Permalink
Commenti
1
Molto (troppo?) artigianalmente, credo che con PHP sia possibile ottenere un effetto simile e sicuramente accessibile.
Conoscendo quale macroarea (menu di livello 1) sia attiva in quel momento, basta istruire PHP ad aprire il relativo menu.Più o meno una roba di questo genere, prendendo come spunto l’esempio del tuo articolo (parentesi quadre al posto dei TAG e “a capo” per facilità di lettura):
IF ($area == "Linguaggi") { echo ("[UL] [LI][A HREF=""]Php[/A][/LI] [LI][A HREF=""]Asp[/A][/LI] [LI][A HREF=""]Java[/A][/LI] [/UL]"); }In tal modo, i singoli menù si aprirebbero quando si entra in qualla particolare area e si richiuderebbero passando ad una differente, salvaguardando accessibilità e usabilità.
# - postato da Pierluigi - 01 Giugno 2007 - 11:58
2
infatti, è il classico caso della botte piena e la moglie ubriaca… bisogna scegliere: o menu espandibile e non del tutto accessibile, o accessibilità totale con altri tipi di menu.
3
Condivido in pieno le riserve (a dir poco) su tutto ciò che presenta limiti di accessibilità.
Per questo mi piacerebbe capire meglio la proposta di Pierluigi. Come si dovrebbe procedere in php?
# - postato da Giovanni - 06 Luglio 2007 - 17:16