Vai ai contenuti

LAU



Home > realizzare > accessibilità: linguaggi di programmazione > Script in missione di pace


Script in missione di pace

Un esempio per mostrare i vantaggi del javascript "non invasivo".

a cura di Mario Picarelli | 20 gennaio 2006


La cosiddetta "non invasività" è la via attraverso cui JavaScript può aspirare all'accessibilità.

I principi dell'accessibilità hanno condotto ad una rigorosa e restrittiva separazione tra contenuto e forma, ovvero tra livello descrittivo logico-funzionale (XHTML) e livello presentazionale (CSS): questa separazione dovrebbe coinvolgere anche il livello interattivo lato-client (JavaScript).
In concreto, così come i CSS non vanno "mischiati" al codice XHTML, allo stesso modo JavaScript non deve "invadere" gli altri livelli, ma optare preferibilmente per una strategia più pacifica.

Con il seguente esempio cercherò di chiarire come i benefici di questa impostazione presentino (non a caso) profonde analogie con i benefici connessi alla separazione tra contenuto e forma.
Si prenda in considerazione il codice XHTML di un ipotetico pulsante con rollover gestito con JavaScript interno (per una trattazione tecnica di questa soluzione si rimanda al link a fondo pagina):

<input type="submit" id="pulsante" 
name="pulsante" value="pulsante" 
onmouseover="funzione1();" 
onmouseout="funzione2();" />

Questo codice, tuttavia, può risultare assai ingombrante se si deve applicare l'effetto a molti elementi di una pagina: un'alternativa "non invasiva", in una simile circostanza, offre un considerevole vantaggio in termini di peso e di pulizia del codice, eliminando dai tag XHTML la moltitudine di attributi onmouseover e onmouseout e sostituendoli con un breve script esterno (rollover.html).

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if(inputs[i].className == "inputPulsante")
inputs[i].onmouseover = function() {
this.className = this.className.replace('inputPulsante', 'inputPulsanteHover');
}
inputs[i].onmouseout = function() {
this.className = this.className.replace('inputPulsanteHover', 'inputPulsante');
}
}

Il metodo getElementsByTagName rintraccia nel documento i tag input e li restituisce in forma di array. La condizione di ripetizione del ciclo passa in rassegna gli elementi dell'array e, per ciascun elemento contenente un riferimento alla classe "inputPulsante", vengono eseguite le funzioni per l'aggiunta e la rimozione, in risposta agli eventi onmouseover e onmouseout, delle classi.

In questo modo l'"invasione" dei tag XHTML da parte dei gestori d'evento è scongiurata.

<input type="submit" id="pulsante"
name="pulsante" value="pulsante" />

A ben vedere, si tratta dello stesso tipo di vantaggio offerto dalla sostituzione dei CSS interni ai tag (abusati nell'HTML vecchia maniera) con i CSS esterni.

Inoltre, l'uso di className garantisce anche la separazione del livello interattivo (lo script in questione) dall'aspetto presentazionale (il CSS nel quale è definito lo stile dei due stati del pulsante): lo stile non viene applicato direttamente da JavaScript, ma viene ricavato dal CSS.

.inputPulsante {background:#bbb;}
.inputPulsante:hover, .inputPulsanteHover 
{background:#999797;}

È da notare che per i browser Gecko, il cambiamento di stato può essere gestito con :hover, ma per i browser che non supportano questa funzionalità è indispensabile il ricorso allo script.

torna su

Webografia

Un effetto mouse sopra un pulsante [link esterno]
Pagina da cui è tratta la soluzione del primo esempio, con gestori d'evento interni al tag input.

Per quanto riguarda invece la soluzione del secondo esempio, con js esterno, si tratta dell'adattamento del codice utilizzato e illustrato in:
Trucchi senza inganno per emulare alcune proprietà di Mozilla

Il nuovo Javascript: separare l'azione dalla struttura [link esterno]
Traduzione in italiano di un articolo che tratta della separazione del livello di azione dal livello strutturale.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]

[ Torna all’inizio della pagina ]