Web Design  »  Articoli  »  Accessibilità 

Pop-up o non pop-up, questo è il problema. Intorno alle famigerate finestrelle, spesso usate come strumento di advertising, il dibattito è più che mai aperto e l'ultimo articolo di Martina Zavagno è un ottima sintesi sullo stato attuale della discussione sul versante del web marketing.

Non è questo l'unico ambito di utilizzo dei pop-up. Qui, infatti, parleremo essenzialmente di quelli usati come strumento di ausilio alla navigazione o alla consultazione di un sito, quelli, insomma, attivati direttamente dall'utente. Le tecniche adottate per la loro realizzazione sono da anni patrimonio scontato di qualunque web designer e tutti i principali editor HTML sono dotati di wizard per produrli con pochi click del mouse. Tutto bene, dunque? Tutto facile? Posto che in molti casi i pop-up si rivelano una soluzione di indubbia efficacia, possiamo dire che la loro adozione sia esente da problemi e controindicazioni?
La risposta è no.

Il problema numero uno si chiama accessibilità. Il punto di partenza è che i pop-up realizzati con i metodi tradizionali non sono accessibili, siano essi prodotti scrivendosi a mano tutto il codice o col migliore dei wizard. La cosa fondamentale, qui, è che non impareremo tecniche complesse o rivoluzionarie. Un modo per evidenziare ancora una volta come l'accessibilità sia innanzitutto una questione di buone norme di scrittura del codice, di rispetto degli standard e attenzione alle esigenze di tutti.

Da dove nascono i pop-up?

Rispondendo a questa domanda, riusciremo forse a capire da dove vengono i difetti di accessibilità. Sin dalle primissime specifiche, HTML ha fornito agli sviluppatori un sistema per caricare un link in una finestra diversa da quella di navigazione. Lo strumento è l'attributo target. Consente di specificare in quale finestra si aprirà il documento collegato attraverso un link.

L'uso di target ha però una limitazione. La nuova finestra generata eredita tutti gli attributi di quella originaria, dalle dimensioni agli elementi del menu (esempio 1). Che di una limitazione si tratti è evidente se pensiamo ai possibili utilizzi di un pop-up. Immaginiamo di doverlo adottare per mostrare la definizione di un termine linkandola dalla finestra principale e che questa sia massimizzata. Non ha senso sprecare 1024 pixel. Basta una finestra piccola, magari senza barre della URL o menu orizzontali.

È con Javascript che questa limitazione può essere superata. Il metodo open() dell'oggetto window consente l'apertura di una nuova finestra con pochissime righe di codice. La finestra, poi, può assumere l'aspetto e le funzionalità che desideriamo: è possibile gestire le dimensioni, la presenza di elementi di navigazione o di barre di scorrimento, così come il target per l'apertura del link. Questo lo schema del metodo:

window.open(url, name, features, replace)

E questa la forma tipica che assume il codice di un link:

<a href="#" onclick="window.open('popup_esempio.html', 'nuovaFinestra','width=200,height=200')">Apri pop-up</a>.

Come si vede, l'attributo href, che di norma contiene la URL del documento da caricare, presenta solo il simbolo del cancelletto, in genere usato per produrre un link 'vuoto'. L'apertura del pop-up è attivata tramite l'evento onclick. Segue la tripletta di dati sulla finestra. Una cosa interessante da osservare è la gestione delle caratteristiche del pop-up. Se non ne viene specificata nessuna, il comportamento dello script sarà identico a quello visto per il target di HTML (esempio 2). Se però ne definiamo anche una soltanto, allora gli elementi con cui impostiamo le caratteristiche della finestra assumono come valore predefinito 'no'. Nell'esempio, il popup avrà una dimensione di 400x400 pixel e sarà privo di tutti gli elementi principali dell'interfaccia. Volendo aggiungere, diciamo, una scrollbar, dovremo esplicitamente impostare il valore su 'yes', così (esempio 3):

<a href="#" onclick="window.open('popup_esempio.html','nuovaFinestra', 'width=200,height=200,scrollbars=yes')">Apri pop-up</a>.

Nell'implementazione dello script è opportuno, poi, definire una funzione globale nell'intestazione della pagina o in uno script esterno. È quello che fa Dreamweaver quando si usa il behavior 'Open browser window'. All'interno della sezione head troveremo la funzione:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>

Mentre il link è così impostato:

<a href="#" onclick="MM_openBrWindow('popup_esempio.html', 'nuovaFinestra','width=400,height=400')">Apri
il pop-up</a>.

Altri articoli

Altre guide

Altre newsletter