JavaScript  »  Articoli  »  Mondo Javascript 

Stili per la 'vista globale'

Rimane un problema a livello di accessibilità: l'uso degli stili riservati alla 'vista globale' (XHTML + CSS + Javascript).

Supponiamo che il nostro menu di navigazione divenga sempre più grande. Decidiamo allora di creare uno script per renederlo più usabile. Inizialmente il menu mostrerà solo le categorie principali. Cliccando o passando con il mouse sopra una categoria saranno mostrati i link che essa contiene. In pratica, dobbiamo nascondere questi blocchi di link con display:none. Lo script si occupa di effettuare il passaggio tra display:none e display:block.

Questo script funziona bene nella 'vista globale'. Non funziona invece in quella 'semplice' (solo XHTML) o in quella 'semplice con azione' (XHTML + Javascript), dal momento che in queste viste gli stili CSS non sono supportati. Non è un problema se abbiamo strutturato correttamente il nostro XHTML. L'utente che non può contare sui CSS vedrà una lunga lista di link con le categorie come intestazione. Il sistema di navigazione è meno usabile, ma è ancora accessibile.

Il problema è nella 'vista semplice con presentazione' (XHTML + CSS). Se inseriamo la regola con display:none nel foglio di stile, il browser nasconderà ovviamente i blocchi con i link. Se Javascript non funziona o non è supportato, insomma, l'utente non avrà la possibilità di vedere e usare quei link. La navigazione non funziona, e il sito non è dunque accessibile.

Per fortuna la soluzione è semplice: se vogliamo usare regole di stile che nascondono il contenuto e che poi saranno modificate da uno script, impostiamo queste regole in Javascript. Invece di aggiungere display:none al foglio di stile, dovremmo aggiungere allo script una routine con l'evento onload che imposterà la proprietà display dei blocchi di link sul valore none. In questo modo, se lo script non funziona, i blocchi non vengono nascosti e la navigazione rimane accessibile.

Usare Javascript responsabilmente

Rivediamo cio che abbbiamo imparato. Primo il punto su Javascript:

Ogni Javascript dovrebbe migliorare l'usabilità del sito. Credo che su questo punto si dovrebbe insistere e molto nel corso dell'anno. C'è molta gente che usa gli script solo per impressionare e/o per provare la propria abilità con questo linguaggio. Se non si sa bene a cosa possa servire uno script, non usiamolo. Questo dovrebbe essere valido soprattutto per quelle complicate interfacce in DHTML.

Ci sono 3 regole generali per l'uso di Javascript in un sito accessibile:

1. Il sito dovrebbe funzionare anche quando il browser non supporta Javascript, ovviamente.
2. Uno script dovrebbe funzionare anche quando il browser non supporta i CSS. Uno script non può basarsi solo su cambiamenti di stile per conseguire l'obiettivo per cui è stato creato. Creare un livello di azione senza presupporre l'esistenza di un livello di presentazione a cui quello si appoggia può portare ad esiti imprevisti. Credo che dovremo prestare più attenzione a questo aspetto nel corso del prossimo anno.
3. Gli stili che nascondono contenuto e che saranno poi manipolati con uno script dovrebbero essere impostati con Javascript. Se si aggiunge un display:none al CSS e ci serviamo di Javascript per modificarlo, il sito avrà problemi se viene visualizzato con Javascript disabilitato e CSS abilitati.

Quando si crea un livello di azione con Javascript, dovremmo prestare attenzione a queste 3 regole. Combinandole con un po' di ragionamento logico, ci assicureranno un solido livello di accessibilità del sito anche quando si usano Javascript molto avanzati.

Si noti, però, che 'solido livello di accessibilità' non significa 'perfetta usabilità'. Il sito sarà sempre più usabile nella 'vista globale' con CSS e Javascript che in quella semplice. A questo non c'è rimedio, e tuttavia non dovrebbe impedirci di creare interfacce in Javascript usabili.

In un prossimo articolo parlerò in dettaglio del falso e potenzialmente pericoloso dibattito su "accessibilità vs. usabilità".

Altri articoli

Altre guide

Altre newsletter