Ecologia dei siti web.it

9 dicembre 05

Apertura di nuove finestre, XHTML, onclick e onkeypress

di Gianluca Troiani

Il regolamento attuativo della L. 4/20041 richiede che si utilizzi una DTD di tipo Strict, per cui un sito che dovesse adeguarsi alla legge non potrebbe aprire nuove finestre utilizzando l’attributo target, essendo questo non previsto nelle DTD Strict.

Per aprire nuove finestre (quando necessario) è dunque necessario ricorrere a Javascript, sfruttando comandi come window.open() da associare all’attivazione del link. Nasce dunque il problema dell’intercettazione dell’attivazione del link.

La soluzione più semplice è ricorrere all’evento onclick, ma la legge L. 4/2004 (come pure le WCAG2) indicano giustamente di non vincolare l’utente all’uso di uno specifico dispositivo di input, motivo per cui le WCAG consigliano3 di usare l’evento onclick sempre assieme all’evento onkeypress.

Il problema è che l’evento onkeypress è troppo generico ed è scatenato dalla pressione di quasi tutti i tasti a disposizione (dipendendo dal tipo di browser), il che spesso entra in conflitto con quelle che possono essere le funzionalità dei vari browser, come ad esempio la navigazione tramite il tasto TAB oppure la ricerca automatica del testo che si avvia tramite la digitazione della stringa cercata.

La soluzione al problema consiste semplicemente nell’intercettare l’evento della pressione del tasto e controllare che il tasto premuto corrisponda al tasto ENTER; la verifica può avvenire controllando il codice associato al tasto premuto.

Di seguito riporto quella che potrebbe essere una possibile soluzione.

function inizializza() {
a = document.getElementsByTagName('A');
for(i=0;a[i];i++) if(a[i].className.indexOf('blank') != -1) {
a[i].title += " [il collegamento apre una nuova finestra]";
a[i].onclick = function () {window.open(this.href, '_blank');return false;};
a[i].onkeypress = function (e) {
k = (e) ? e.keyCode : window.event.keyCode;
if(k==13) {
window.open(this.href, '_blank');
return false;
}
}
}
}
window.onload = function() {inizializza();}

I collegamenti da aprire in una nuova finestra sono identificati semplicemente tramite l’associazione alla classe blank:

<a href="http://www.google.it/" class="blank">Google</a>

Lo script compie i seguenti passi:

  1. identifica tutti gli elementi A presenti nella pagina;
  2. verifica che il link sia associato alla classe blank;
  3. aggiunge la stringa “ [il collegamento apre una nuova finestra]” all’attributo title dei link da aprire in una nuova finestra, così da segnalare automaticamente che il link apre una nuova finestra (come richiesto dai requisiti della L. 4/2004 e come suggerito dalle WCAG);
  4. aggiunge l’evento onclick per l’apertura della nuova finestra;
  5. aggiunge l’evento onkeypress per l’apertura della nuova finestra, se e solo se il tasto premuto ha un key code pari a 13, ovverosia se il tasto premuto è ENTER.

L’istruzione k = (e) ? e.keyCode : window.event.keyCode; serve a memorizzare nella variabile k il codice associato al tasto premuto; è necessario usare due oggetti diversi e.keyCode e window.event.keyCode poiché ci sono delle differenze nel modo in cui i diversi browser memorizzano il codice del tasto premuto.

È bene notare che la soluzione proposta è solo una delle possibili alternative e non ha la pretesa di essere definitiva, il lettore è invitato a proporre modifiche attraverso i commenti. È altresì evidente che la soluzione proposta non è in nessun modo garantita essere conforme ai requisiti di legge.

1 “Decreto Ministeriale 8 luglio 2005—Requisiti tecnici e i diversi livelli per l’accessibilità agli strumenti informatici. Allegato A”: http://www.pubbliaccesso.it/normative/DM080705-A.htm

2 Punto di controllo 6.4: http://www.w3.org/TR/WCAG10-TECHS/#tech-keyboard-operable-scripts

3 Tecniche HTML per il punto di controllo 6.4: http://www.w3.org/TR/WCAG10-HTML-TECHS/#directly-accessible-scripts

Sezione: blog - Argomenti: accessibilità, javascript |

Commenti:

  1. — Andrea Paiola    2 01 2006 - 11:01    # Voglio usare questo metodo ma ho già una classe assegnata ai links in questione (per i CSS).
    Suggerimenti?
  2. — Gianluca    2 01 2006 - 17:55    # Ciao, Andrea.

    Ad uno stesso elemento puoi assegnare più classi, e ciò è supportato dallo script.

    Puoi ad esempio usare:

    class="miaClasse blank"

    come attributo dell’elemento A.

    Ciao
  3. — Andrea Paiola    3 01 2006 - 10:12    # Grazie Gianluca.
  4. — Andrea Paiola    3 01 2006 - 10:16    # Ho provato ma non funziona a dovere…bò
  5. — Gianluca    3 01 2006 - 10:48    # «Ho provato ma non funziona a dovere…bò»

    Ho provato anch’io, funziona.

    L’errore deve essere altrove. Prova a pubblicare la pagina con cui hai eseguito il test e vediamo cos’ha che non va.

    Ciao
  6. — Andrea Paiola    3 01 2006 - 13:14    # Non posso pubblicare la pagina e credo che l’errore sia dovuto ad un altro script js (che gestisce l’effetto hover sul menù a tab in questione) che non penso supporti classi diverse… fa niente mi arrangerò in altri modi.

    ciao e grazie
  7. — Luigi Panarace    5 01 2006 - 13:21    # Ciao GianLuca,

    In funzione della normativa, mi chiedo se sia più importante (e quindi vincolante) realizzare interfacce navigabili indipendentemente dal dispositivo di input o dover considerare le WCAG e quindi dover accoppiare obbligatoriamente onclick con onkeypress. Nel primo caso, volendo attenersi alla normativa facendo si che il sito sia navigabile indipendentemente dal dispositivo di input, allora forse basterebbe utilizzare il solo onclick; cosicchè la pressione del tasto invio (anche in firefox) confermerebbe comunque lo scatenarsi dell’azione. Nel secondo caso bisogna ovviamente ricorrere a “possibili” soluzioni alternative come quella da te proposta.
    Cosa ne pensi? La soluzione potrebbe essere così semplice come dovere mettere solo l’onclick?
    Grazie!
    Ciao!
  8. — Gianluca    5 01 2006 - 16:13    # Ciao Luigi,
    sono completamente in accordo: onclick sarebbe più che sufficiente; ma il requisito fa esplicitamente riferimento alle WCAG, per cui (temo) tocca complicarsi inutilmente la vita ;-)

    Saluti
  9. — Paolo Menis    9 01 2006 - 11:18    # Ho provato lo script ma ci sono alcuni problemi quando, con Mozilla, si cerca di navigare con il tasto tab. Non so se è una controindicazione importante, in ogni caso ve la segnalo.

    Se volete verificare il link alla pagina di prova è il seguente: http://www.esempiosito.com/sandro/index.htm
  10. — Gianluca    9 01 2006 - 11:57    # Paolo, l’indicazione è importante, tuttavia in quella pagina il mio script non l’ho trovato (ce ne sono diversi, ma il mio non lo vedo).

    Il problema c’è, ma non è causato dal mio script (dato che nelle pagine non l’ho trovato), forse la causa è il gestore di eventi che hai negli altri script.

    Comunque lo script è stato testato con Firefox e non dovrebbe creare problemi alla navigazione via tastiera.

    Saluti
  11. — antonio s.    12 02 2006 - 11:48    # Scusatemi ma non sono riusciuto ad utilizzare i suggerimenti, vi riepilogo i passaggi che ho fatto:

    1. ho creato lo script new_windows.js

    2. l’ho richiamato nella pagina prima della chiusura dell’head:

    3. nella stassa pagina ho creato il link:
    HREF=”http://www.corriere.it” class=”blank”...

    ma quando premo invio non mi apre una nuova finestra!
    Avete qualche suggerimento da darmi?
  12. — Gianluca    12 02 2006 - 12:24    # Antonio: “Avete qualche suggerimento da darmi?”

    Gianluca: “Puoi indicare l’indirizzo della pagina che presenta il problema, così che si possa dargli un’occhiata?”
  13. — Sergio    18 06 2006 - 11:45    #

    Salve Gianluca,
    innanzittutto complimenti per la tua opera sui CSS, la trovo la migliore di quelle consultate finora. Non sono un professionista, ma mi sto interessando alla materia. E’ chiarissima, ben strutturata, oltre che utilissima.

    Ho provato lo script che hai progettato e presente in questa pagina, lo ripropongo al seguente indirizzo: http://www.sergiosardone.com/troiani/troiani.htm

    Ho verificato però alcuni aspetti che volevo segnalarti:

    1) la funzione “onkeypress” si attiva solo dopo aver clickato sul “link”;

    2) ho provato a sostituire il codice di riferimento del tasto “INVIO”, 13, con quello del tasto “CONTROL”, 17, ma sembra non sortisca effetti differenti, quasi il browser li riconosca come uguali;

    Dipende questo dal tipo o versione di browser utilizzata? L’ho provato sia con firefox / mozilla che con IE 6.

    Altri 2 quesiti:
    1) se si volesse integrare la funzionalità del window.open, in maniera da renderla una pop up (inserendo ad esempio i paramentri menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=no,left=0,top=0,screenx=0,screeny=0’) – al di là dell’applicazione del dispositivo legislativo, che lo trovo abbastanza inutile, le tue indicazioni credo siano utili a livello didattico – come si trasformerebbe lo script?

    2) si potrebbe inserire un alert nell’eventualità non si premesse il tasto giusto (INVIO oppure un qualsiasi altro tasto)??’

    Grazie
    Sergio

  14. — marco    22 10 2006 - 01:46    #

    Secondo me usare onclick è molto piu accessibile, come soluzione, rispetto ad usare onkeypress… D’altronde il tasto invio imita ormai ovunque, tranquillamente, il click del mouse… Quindi siccome l’unico problema a questo punto è passare i test automatici di accessibilità, ho messo onclick=”funzioneJS” ma ho messo anche onkeypress=”” cioè onkeypress vuoto! Mi fate un esempio dove onclick è meno accessibile di onkeypress?

I commenti sono chiusi per questo articolo.