Costruire pop-up accessibili

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 400×400 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.