giovedì 24 dicembre 2009

Potenziamento progressivo e scalabilità: come ottenere siti web dinamici, accattivanti ed accessibili

La sfida che ogni giorno Internet lancia ai web designer è quella di realizzare applicazioni per il web sempre più complesse ed interattive, capaci di coinvolgere gli utenti e di mantenere alta la soglia d’attenzione presentando i contenuti mediante effetti dinamici ed accattivanti.

Per ottenere questo, l’uso del semplice linguaggio di marcatura HTML (per i contenuti) e dei fogli di stile CSS (per la presentazione) non basta e gli sviluppatori ricorrono sempre più di frequente all’impiego di linguaggi di script, supportati nativamente dai browser (JavaScript, Jscript, VBScript), e di oggetti incorporati, dotati di interfaccia utente e funzionalità proprie (Java, Flash, SMIL, SVG, ecc.).

Questo, però, fa sorgere un problema troppo spesso ignorato da chi si occupa di realizzazione siti web: come rendere le interfacce utente incorporate (script ed oggetti) accessibili? ovvero, come garantire l’accesso alle funzionalità indipendente dal dispositivo e compatibile con le tecnologie assistive (browser testuali, display Braille, screen reader, ecc.)?

Sottovalutare la questione pone in serio rischio la buona riuscita di un sito internet.
Ad esempio, per molte tecnologie utilizzate per la navigazione il supporto dei linguaggi di script non è presente o è disabilitato, oppure è impedito l’uso di oggetti incorporati come le animazioni Flash. In simili situazioni: nel migliore dei casi, si va incontro all’impossibilità di accedere a determinate funzionalità (come l’apertura di un menu a tendina o l’invio dei dati in un form): nei casi peggiori, il contenuto dell’intero sito è completamente inaccessibile (se per esempio il sito è realizzato interamento in Flash).

Il primo passo da compiere per risolvere queste problematiche consiste nell’abbandonare l’approccio mentale solitamente utilizzato, che prevede prima la realizzazione dell’applicazione web complessa, dinamica, basata su script ed oggetti incorporati, progettata senza l’accessibilità in mente, e poi la creazione di una seconda applicazione in versione ridotta, come alternativa statica alla prima.

Gli esperti in creazione siti internet utilizzano da anni il metodo del potenziamento progressivo (progressive enhancement) che prevede la progettazione di un’unica applicazione di tipo piramidale nella quale è possibile, partendo dalla base, identificare quattro strati principali: contenuti, struttura, presentazione, comportamenti.
In questa struttura è fondamentale la totale separazione tra gli strati ed in particolare deve essere rispettata la regola secondo cui gli elementi superiori non possono esistere senza quelli inferiori, ma quelli inferiori sono invece autosufficienti, cioè possono esistere e funzionare senza il livello o i livelli superiori.
I contenuti rappresentano la base della piramide: testi, immagini, suoni, animazioni, grafici, ecc.
La struttura è il livello successivo, nel quale i contenuti sono rappresentati in maniera semantica mediante un linguaggio di marcatura strutturale (es. HTML).
Segue lo strato di presentazione, interamente affidata ai fogli di stile CSS per la formattazione dei contenuti strutturati.
Infine lo strato dei comportamenti, di pertinenza dei linguaggi di script (es. JavaScript), nel quale si aggiunge dinamicità ed interattività all’applicazione fino a questo punto costruita.
Nel caso di oggetti Flash, si aggiunge un quinto livello, relativo ai contenuti inseriti nell’oggetto incorporato.

Al fine di garantire l’accessibilità dei contenuti, è indispensabile realizzare l’applicazione in modo scalabile, ovvero ottenere che per ogni tipo di contenuto complesso sia direttamente disponibile un’alternativa di livello inferiore senza perdita di informazioni.
In questo contesto è possibile identificare cinque livelli di fruizione dei contenuti web, che rappresentano altrettanti livelli di scalabilità:
1. modalità solo testo: immagini, video e animazioni non sono disponibili; tutti i contenuti grafici sono sostituiti da testi alternativi; collegamenti e moduli funzionano normalmente; i contenuti sono strutturati rispettando il valore semantico degli elementi di HTML e XHTML;
2. modalità grafica: uguale in tutto alla precedente, solo che immagini, video e animazioni sono ora disponibili, in luogo dei rispettivi testi alternativi;
3. modalità grafica con CSS: uguale alla precedente, con l’aggiunta del livello della presentazione, gestito per mezzo dei fogli di stile (l’aspetto grafico del documento può variare profondamente);
4. modalità grafica con CSS e JavaScript: uguale alla precedente, con l’aggiunta di trasformazioni dinamiche e interattive, rese possibili da JavaScript (collegamenti e moduli possono funzionare in modo differente rispetto ai livelli precedenti);
5. modalità Flash: la fruizione delle informazioni e dei servizi si sposta in tutto o in parte all’interno di un’interfaccia Flash (non sono aggiunti nuovi contenuti, ma può cambiare completamente la loro organizzazione e il modo di utilizzarli).

Nessun commento: