Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Javascript Pop-up accessibili
Postato da webmaster il Monday, 03 November @ 07:00:00 CET
Contributo di webmaster

Come tutti i webmasters sanno, i pop-up realizzati con i metodi tradizionali non sono accessibili, siano essi prodotti scrivendo a mano tutto il codice o con la migliore delle wizard. In questo articolo vedremo come l'accessibilità sia innanzitutto una questione di buone norme di scrittura del codice, di rispetto degli standard e attenzione alle esigenze di tutti.

Sin dalle primissime specifiche, l'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. È 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 l'attributo target di html. Se però ne definiamo anche una soltanto, allora gli elementi con cui impostiamo le caratteristiche della finestra assumono come valore predefinito 'no'.

<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. All'interno della sezione head inseriamo la funzione:

<!-- INIZIO CODICE -->


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


<!-- FINE CODICE -->


impostando il seguente link:

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


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. È evidentemente una forma di discriminazione intollerabile. La soluzione è banalissima.

È sufficiente aggiungere la stessa URL definita per il pop-up anche ad href, in questo modo:

<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'ultimo esempio, 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>
 

Per migliorare ulteriormente il livello di accessibilità, dobbiamo valutare ancora un caso. Quello in cui gli eventi che attivano uno script siano indipendenti dal dispositivo di input (mouse e tastiera).
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>
 
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.



 
Links Correlati
· Indice Javascript
· Inoltre Javascript
· News by webmaster


Articolo più letto relativo a Javascript:
Reload automatico della pagina

Valutazione Articolo
Average Score: 4.8
Voti: 5


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Javascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.05 Secondi

Theme by

© Oceanoweb