Nel settembre del 2003 abbiamo pubblicato su HTML.it l'articolo Costruire popup accessibili. Si tratta di una raccolta di consigli e tips per rendere meno problematico ai fini dell'accessibilità l'uso di questo tipo di finestre. La premessa teorica di questo tutorial è proprio quell'articolo, la cui lettura è pertanto caldamente consigliata.
L'ispirazione era venuta da un ottimo e celebre intervento di Ian Lloyd: The Perfect Pop-up. Non limitandosi a fornire utilissimi consigli, ma passando all'azione, Lloyd aveva accompagnato l'articolo con la realizzazione di un wizard per la generazione di codice accessibile per le finestre popup. Qui di seguito, un tutorial sull'uso di questo utile strumento, a beneficio, soprattutto, di chi non parla inglese.
Il wizard si chiama Accessible Pop-up Window Generator. Apriamo la pagina e diamo uno sguardo all'interfaccia.
Si tratta di un semplice form con cinque campi, tre menu a tendina e due campi di testo. Iniziamo con il primo elemento, la tendina 'Type of Pop-up'. Serve a impostare le caratteristiche della finestra popup.
Offre tre opzioni:
- Standard
- Console
- Full-screen mode
Scegliendo 'Standard' si otterrà una finestra popup dotata di tutti gli ausilii tradizionali di navigazione: barre di scorrimento, barra dell'indirizzo, barra degli strumenti, ma senza barra di stato in basso. La finestra sarà inoltre ridimensionabile.
Optando per 'Console', invece, si otterrà una finestra molto scarna, senza barre di alcun tipo ma ridimensionabile.
Selezionando 'Full-screen mode' si forzerà la nuova finestra in modalità tutto schermo.
Il campo di testo 'Link Text' serve a definire il testo del link ch attiverà la finestra popup.
Nel campo di testo 'URL' inseriremo invece l'indirizzo della pagina da aprire nella popup.
Dal menu 'Width' impostiamo la larghezza. Dal menu 'Height' definiamo invece l'altezza.
Un click sul pulsante 'Generate the code', e sotto al form comparirà un'anteprima del link, più due aree di testo.
La prima contiene il codice Javascript da piazzare all'interno della sezione <head></<head> della pagina. Ecco un esempio:
var newWindow = null;
function closeWin(){
if (newWindow != null){
if(!newWindow.closed)
newWindow.close();
}
}
function popUpWin(url, type, strWidth, strHeight){
closeWin();
if (type == "fullScreen"){
strWidth = screen.availWidth - 10;
strHeight = screen.availHeight - 160;
}
var tools="";
if (type == "standard" || type == "fullScreen") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
if (type == "console") tools = "resizable,toolbar=no,location=no,scrollbars=no,width="+strWidth+",height="+strHeight+",left=0,top=0";
newWindow = window.open(url, 'newWin', tools);
newWindow.focus();
}
Ricordo che il codice va racchiuso tra <script> e </script>.
La seconda area di testo presenta invece il codice per il link, che va invece copiato e incollato nella sezione <body></body>.
