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>.
Migliorare l'accessibilità
Quali sono, dunque, i problemi di accessibilità che ci tocca affrontare?
Il principale deriva da quel simbolo di cancelletto all'interno di href.
Chi utilizza un browser alternativo, uno screen reader o semplicemente naviga
con i Javascript disabilitati, non potrà fruire del contenuto del documento
collegato. Provate voi stessi ad aprire il pop-up del file di esempio disabilitando
gli script. È evidentemente una forma di discriminazione intollerabile. La
soluzione è banalissima. È sufficiente 'ricordarsi' di aggiungere la
stessa URL definita per il pop-up anche ad href,
così (esempio 4a):
<a href="popup_esempio.html" onclick="MM_openBrWindow('popup_esempio.html', 'nuovaFinestra','width=400,height=400')">Apri
il pop-up</a>.
Così facendo consentiamo a chi non può sfruttare Javascript di
poter consultare il contenuto. Volendo usare ugualmente l'apertura in una nuova
finestra, basterà aggiungere al codice un tradizonale target="_blank".
Ora, però, se avete provato ad aprire il pop-up dell'esempio 4a con
il vostro browser preferito, avrete notato una piccola incongruenza. Il documento
viene caricato sia nella nuova finestra, sia in quella principale, perché
il browser esegue entrambe le direttive che trova nel codice. La soluzione è
ancora una volta semplicissima. Basta aggiungere alla fine dell'istruzione return
false; (attenzione a parentesi e apici!):
<a href="popup_esempio.html" onclick="MM_openBrWindow('popup_esempio.html', 'nuovaFinestra','width=400,height=400');
return false;">Apri
il pop-up</a>.
L'esempio 4b mostra come ora tutto sia perfettamente a posto.
Per migliorare ulteriormente il livello di accessibilità, dobbiamo valutare
ancora un caso. Anch'esso è esplicitamente previsto nelle Linee Guida
sull'Accessibilità (WCAG
1.0) del W3C. Nel caso del link si rispetta il caveat del punto
6.3: assicurare l'accessibilità del contenuto quando gli script sono
non supportati o disabilitati. Il checkpoint 6.4, invece, indica espressamente
che gli eventi che attivano uno script siano indipendenti dal dispositivo di
input. Significa, nel nostro caso, che si deve essere in grado di aprire un
pop-up sia con il mouse che con la tastiera. Non sono casi rari quelli di persone
non in grado, anche temporaneamente, di sfruttare un mouse per navigare, per
cui il punto è della massima importanza. Il risultato è ancora
una volta raggiungibile in maniera semplice. Tra i gestori di eventi previsti
nelle specifiche, troviamo anche onkeypress,
evento che viene attivato con la pressione di un tasto nel momento in cui un
determinato elemento riceve il focus. Nel caso dello script del pop-up basterà
aggiungere al codice una nuova istruzione:
<a href="popup_esempio.html" onclick="MM_openBrWindow('popup_esempio.html', 'nuovaFinestra','width=400,height=400');
return false;" onkeypress="MM_openBrWindow('popup_esempio.html', 'nuovaFinestra','width=400,height=400');
return false;" title="Esempio di pop-up accessibile - Link interno
- Nuova finestra">Apri
il pop-up</a>.
Provate a spostarvi tra i link del documento di esempio con il tasto tab fino
a raggiungere l'esempio 5 e poi cliccate un tasto qualunque. Il pop-up è
ora accessibile.
Rimangono, ovviamente, i problemi di usabilità generale di questo strumento.
L'apertura di una nuova finestra, seppure non invasiva, è sempre qualcosa
che può generare confusione, specie nei non esperti. Il limite si raggiunge
con i cosiddetti pop-up di navigazione, quelli che consentono l'interazione
o il passaggio di dati con la finestra principale del browser. In quel caso
la perdita di controllo è in agguato per chiunque. Il W3C tende anzi
a sconsigliare
l'uso dei pop-up. Ma se proprio si deve, è importante 'avvisarÈ
l'utente che il collegamento si aprirà in una nuova finestra. Almeno
due i mezzi a nostra disposizione. Usare l'attributo title nel link e/o fornire
direttamente l'indicazione nel testo.
