Popup accessibili? Facile a farsi con WindowedLinks

Soluzioni a confronto

Ecco le due soluzioni a confronto:

  • Invasività
    La soluzione proposta su html.it lo è in quanto richiede che per ciascun link esterno deve essere specificata una classe ‘ext’. Invece la nostra non lo è. Richiede solo che ci sia solamente un tag vuoto sulla pagina e l’inclusione dello script.
  • Usabilità
    In caso di assenza degli script il nostro non mostra elementi che potrebbero indurre l’utente a pensare che il sito non funzioni a dovere. In caso di assenza degli script quello proposto da html.it presenterà una check box che segnala la possibilità di aprire i link in una nuova finestra mentre non risulterà possibile.
  • Configurabilità
    L’esempio proposto consente di essere completamente configurato nell’uso così da garantire che non solo i link esterni possono essere aperti in nuove finestre, ma è possibile escludere alcuni link esterni così da risultare valido anche in situazioni di network di siti. L’esempio proposto da html.it per il punto 1 richiederebbe la verifica di tutti i links presenti su tutte le pagine di un sito e apportare per ciascun link la modifica manuale.

Senza togliere nulla alla validità dello script presentato da HTML.it, vi poniamo una domanda: avete dubbi su quale scegliere?

Funzionava perfettamente, ma …

Rieccomi… Diego aveva scritto un JS perfetto. L’avevo provato ed era strabiliante vedere il passaggio di funzionalità senza neppur dover ricaricare la pagina o … Io lo stavo considerando come “utilizzatoe” senza particolari conoscenze tecniche.

Talune volte proprio la “deficienza tecnica” porta ad auspici di semplicità. Stavo pensando anche che ai testi avrei potuto sostituire un’immagine e che l’etichetta determinata dal title=”” o alt=”” poteva non coincidere con il testo del link.Cosa peraltro ovvia se in gioco c’era l’uso di un’immagine.

Confrontatomi con Diego venne fuori la sua genialità e mi sentii dire: “Risolvo in 30 secondi!”.

La soluzione prevedeva anche di facilitare la personalizzazione dello script raggruppando a monte i valori modificabili.

Diego integrò il codice riorganizzando alcune righe, questo è il risultato:

wiLi.id = 'nwlm';
wiLi.accessKey = 'w';
// Defines the access key value required for accessibility validation

wiLi.newWindowHTMLDescription = 'Fuori';
// Text/Image/HTML shown inside the action link when the status of the
// script is to open links in a new window.

wiLi.sameWindowHTMLDescription = 'Dentro';
// Text/Image/HTML shown inside the action link when the status of the
// script is to open links in the same window.

wiLi.newWindowTitleDescription = 'Apre tutti i link definiti come esterni in una nuova finestra';
// As for newWindowHTMLDescription property, but for the title attribute of the link.
// If this value is empty (but always must be defined) the title attribute will not be generated

wiLi.sameWindowTitleDescription = 'Apre indiscriminatamente tutti i link nella stessa finestra';
// The same than newWindowTitleDescription but related to property sameWindowHTMLDescription

wiLi.className = 'wl-ext';
// If defined each link identified as external will be marked with this class too.
// It is usefull both for presentation purpose and debugging

wiLi.noNewWindowsURL = new Array();
// Network sites array that must be open in the same window always.

Come avete potuto vedere i valori permettono una completa personalizzazione. Da notare la possibilità di definire il nome dell’ID in cui verrà collocata la sezione di interazione tra l’utente e lo script. Di default è wiLi.id = ‘nwlm’; ma lo lo potreste ridefinire come wiLi.id = ‘windowedLinks-actions’; ad esempio; così si evitano anche spiacevoli conflitti di ID sulla pagina nel caso già fosse specificato su un altro elemento l’ID proposto di default causando una conseguente invalidazione del codice della pagina.

L’esempio mostra due testi associati a rispettive immagini, è possibile usare comunque o solo i testi o solo le immagini. Potreste addirittura utilizzare dell’HTML per definire due valori più complessi. L’etichetta viene definita da due valori che agiranno sulla span di richiamo garantendo l’usabilità.

Come anche definire un Access Key diverso da “w”


Pubblicato

in

,

da

%d blogger hanno fatto clic su Mi Piace per questo: