Pop-Up... validi con windowedLinks

di Carlo Filippo Follis - L'HTML passa il testimone all'(X)HTML e ai CSS, un grosso vantaggio per i Disabili. E un nuovo scriptino risolve i problemi dei pop-up
di Carlo Filippo Follis - L'HTML passa il testimone all'(X)HTML e ai CSS, un grosso vantaggio per i Disabili. E un nuovo scriptino risolve i problemi dei pop-up

Si è parlato ultimamente molto di Accessibilità Web e PI lo ha fatto con una serie di articoli specifici aggiunti a quelli di cronaca quotidiana. L’Usabilità e l’Accessibilità del Web sono, oltre che risorse informatiche, strumenti culturali su cui si fondano le basi per una condivisione dell’informazione, per condivisione intendo un pari livello di fruibilità.

Io Disabile per Tetra Paresi Spastica ho differenti necessità rispetto ad un collega Cieco che avrà bisogno di un Codice in grado di essere letto in sua vece da un apposito software. I Disabili motori hanno invece maggiore difficoltà nel “percorrere” l’area video; c’è chi lo fa normalmente ma con fatica e chi usa di più il sistema a tabulazione o comunque una gestione “da tastiera”.

Certamente stiamo vivendo un momento di transizione. L’HTML sta sempre più passando il testimone all'(X)HTML che con i CSS sta definendo un nuovo modo di fare pagine Web. Questa evoluzione è fisiologica e non è stata voluta ed inventata per fare una cortesia ai Disabili che però ne traggono forse i maggiori benefici. Questa transizione ha scritto però nuove regole a cui si deve riferire il Codice delle pagine Web. Era molto semplice con l’HTML generare un link che aprisse la pagina in una nuova finestra era sufficiente scrivere nel Tag “A” TARGET=”_BLANK” per ottenere il risulto voluto. Questo è ancora possibile, ma se lo fate all’interno di un (X)HTML non sarà riconosciuto come “valido”. Non ha quindi molto senso utilizzare soluzioni nuove ed evolute se poi non si rispettano le nuove regole fondamenta di un nuovo linguaggio.

<a href="http://www.norisberghen.it/it/?page_id=438" title="Progetto
D-code”> <img src="http://www.norisberghen.it/ext-img/pi/logo-d-code-
pi.jpg” align=”left” alt=”Logo D-code” height=”44″ width=”232″ border=”0″> Nell’ottica di essere sempre più ” validi ” nasce il Progetto ” D-code ” che cercherà di consigliare soluzioni che amo definire FAP – For All People – e che potranno essere realizzate da tutti coloro che creano Codice per il Web. Il progetto nasce sulla base di un esigenza personale di Disabile e di WebMaster dei miei Portali Norisberghen.it e DisabileDoc.it .

La necessità
Dovevo trovare il modo di far aprire a piacere dell’Utente un link in modalità “new window” rispettando le regole dell'(X)HTML ed ovviando all’uso di combinazioni di tasti che permettono di ottenere lo stesso risultato, ma con molta più fatica per chi ha problemi di motorietà.

Il sistema doveva poi memorizzare la preferenza sino a scelta contraria. Non poteva essere una soluzione che mi obbligasse ad inserire una qualche classe CSS nel Tag “A” perché sarebbe stata una follia scrivere un dato in più, correggere i Tag già nel DB o pretendere che gli utenti completassero i loro links con un’istruzione in più quando molti non scrivono neppure il title=”” per ottenere l’etichetta. Il sistema, che sarebbe stato rilasciato sotto licenza Creative Commons doveva essere di facile installazione: non doveva richiedere più di 5 minuti.

E fu windowedLinks
Parlai della cosa a Diego La Monica , Guru delle nuove tecnologie e linguaggi Web, ed ottenni il suo impegno per la realizzazione di un JavaScript Usabile ed Accessibile quanto personalizzabile. Diego ha avuto la professionale capacità di interpretare le necessità esposte e di completarle con un sapere tecnico che ci ha resi complementari nella stesura della prima release seguita a 10 giorni dalla successiva 1.1 che fa oggi di windowedLinks un sistema per tutti i Siti e Portali.

Le primarie funzionalità di windowedLinks
Guardate queste due immagini:

Links in - I links a Siti esterni si apriranno nella medesima finestra.
Links in – I links a Siti esterni si apriranno nella medesima finestra.

Links in - I links a Siti esterni si apriranno in una nuova finestra.
Links out – I links a Siti esterni si apriranno in una nuova finestra.

  1. Tramite un link si può scegliere la modalità operativa per i links non appartenenti al Dominio del sito. Si potrà quindi scegliere che dei links esterni aprano comunque, come da direttive W3C nella medesima finestra oppure in una nuova perché magari ci è comodo tenerla da parte per consultarla più tardi.
  2. È possibile giungere alle funzionalità del punto 1 mediante un Access Key personalizzabile.
  3. Il JS si colloca all’interno del Codice semplicemente inserendo una Span vuota con un ID dal valore personalizzabile per non rischiare situazioni di ID omonimi che invaliderebbero la pagina Web.
  4. La “materia clickabile” da parte dell’Utente può essere solo testo, solo immagine, testo più immagine od un composto di HTML. Tutte le combinazioni avranno una duplice etichetta per definire chiaramente lo stato del settaggio.
  5. Per i più esperti ha funzionalità programmabili che per brevità non descrivo.
  6. Dalla versione 1.1 è possibile definire un numero a piacere di Dir i cui file, se richiamati, apriranno in modalità “new window” a prescindere dalla scelta dell’Utente o dall’appartenenza allo stesso Dominio.
  7. Sempre dalla versione 1.1 e possibile inserire una classe CSS nel Tag “A” che di default è “wili-forced” per ottenere l’apertura forzata in modalità “new window”.

In conclusione
windowedLinks è una grossa comodità per chi deve gestire il sito e l’opportunità di porre attenzione a costo e fatica zero per chi naviga meno agevolmente il Web: alcuni Disabili.
Essendo un JavaScript può essere utilizzato da tutti i linguaggi per il Web, non verrà persa nemmeno una peculiarità.
Se adottate il JS consiglio di collocarlo in maniera molto visibile ed accessibile, un esempio è dato da questo Blog . Uno strumento di Accessibilità ed Usabilità posto in una zona secondaria perde di valore ed efficienza.

Se inserirete il JS nei vostri siti o portali comunicatelo , verrete inseriti nell’apposita lista presente su Norisberghen.it e Diegolamonica.info.

Links utili

  1. Tutorial Wi.Li v. 1.0
  2. Tutorial integrativo a Wi.Li v. 1.1
  3. Download ultima versione

Carlo Filippo Follis
Norisberghen.it
Progetto ” D-code

Link copiato negli appunti

Ti potrebbe interessare

19 04 2007
Link copiato negli appunti