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
Optando per 'Console
Selezionando 'Full-screen mode
Il campo di testo 'Link Text
Nel campo di testo 'URL
Dal menu 'Width Height
Un click sul pulsante 'Generate the code
La prima contiene il codice Javascript da piazzare all'interno della sezione <head></<head>
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>.
