Levysoft
  • Home
  • Portfolio
  • WordPress Plugin
  • Contattami

Dal 2004 il blog di Antonio Troise

RSS FeedTwitterFacebook
Gen 29 2008

Perché spesso le guide html non dicono che l’attributo TARGET per aprire nuove finestre non è HTML Strict? Tre soluzioni per avere lo stesso effetto senza invalidare il codice e avere un sito accessibile

Posted by Antonio Troise
Tweet

Quando ho iniziato a programmare, il tag A (per la definizione di link ipertestuali) supportava pienamente l’attributo TARGET per aprire in una nuova finestra un sito web magari esterno al proprio, con lo scopo (illusorio) di non perdere visitatori. Ricordo ancora, quando farcivo le mie pagine html con formule tipo:


Link esterno

e magicamente, a mo’ di popup, si apriva un’altra finestra del browser (all’epoca ancora non esisteva il concetto navigazione a schede o tab).

Da qualche anno, però, l’attributo TARGET del tag A è stato completamente abolito dalle specifiche Strict dell’HTML per la realizzazione di un sito accessibile. Il motivo è ben chiaro a tutti: solo l’utente dovrebbe decidere se aprire o no un link in una nuova finestra (ad esempio tenendo premuto Shift) e non dovrebbe essere obbligato a subire le scelte del webmaster di turno: il rischio, infatti, è quello di trovarsi lo schermo invaso da finestre flottanti o, se usate Firefox ben configurato, decine di tab aperte! Inoltre aprendo una nuova finestra si pregiudica l’utilizzo del tasto “Indietro” che è il tasto di navigazione più utilizzato.

Una informazione spesso omessa nelle guide html

Purtroppo non tutti lo sanno e in molti corsi html sparsi per la rete, questo fatto viene ancora ignorato o comunque non messo bene in evidenza (provate a cercare su google ‘corso html‘ e vedrete che i primi risultati portano a dei corsi che non accennano a questa nuova regola).

Addirittura, ho trovato un riferimento spensierato all’attributo TARGET sulla pagine delle FAQ del Centro assistenza clienti AdSense, quando spiega come creare un link ipertestuale:

Utilizza target=”_top”: questo codice dice al browser quale finestra utilizzare per il caricamento della pagina di destinazione dell’immagine cliccabile. Se non includi nel codice questo tag (il punto in cui inserirlo è descritto più avanti), il browser tenterà il caricamento della pagina di destinazione all’interno del formato degli annunci.

Non che il concetto di TARGET sia errato ma essendo oramai obsoleto e deprecato, questa omissione può portare molta gente, che decidendo oggi di imparare il linguaggio html, apprende un concetto errato e quando si dovrà a dover validare il codice, si troverà dinanzi ad un attributo target che inspiegabilmente non passa il check. Sarebbe stato auspicabile almeno un cenno a questo fatto, per evitare di commettere errori all’inizio della propria carriera di programmatori web.

Dove trovare informazioni sulle specifiche HTML Strict

Basterà, però andare, per esempio, su w3schools e notare che, nella tabella riepilogativa, l’attributo TARGET (il cui valore può essere _blank, _parent, _self, _top) non è non previsto nelle DTD Strict, ma è previsto solo nella DTD Transitional.

Una ulteriore conferma, basta andare a leggere il regolamento attuativo della L. 4/20041 (“Decreto Ministeriale 8 luglio 2005—Requisiti tecnici e i diversi livelli per l’accessibilità agli strumenti informatici. Allegato A”) e si noterà che nell’elenco dei requisiti di accessibilità per i siti Internet, al primo punto, compare la voce:

  • per tutti i siti di nuova realizzazione utilizzare almeno la versione 4.01 dell’HTML o preferibilmente la versione 1.0 dell’XHTML, in ogni caso con DTD (Document Type Definition – Definizione del Tipo di Documento) di tipo Strict;
  • per i siti esistenti, in sede di prima applicazione, nel caso in cui non sia possibile ottemperare al punto a) è consentito utilizzare la versione dei linguaggi sopra indicati con DTD Transitional, ma con le seguenti avvertenze:
    1. evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;
    2. evitare la generazione di nuove finestre; ove ciò non fosse possibile, avvisare esplicitamente l’utente del cambiamento del focus;
    3. pianificare la transizione dell’intero sito alla versione con DTD Strict del linguaggio utilizzato […]

Come si vede, quindi, in ogni caso, sia che il sito è esistente da anni o di nuova realizzazione, la generazione di nuove finestre andrebbe evitata, a meno che non si avvisi esplicitamente l’utente del cambiamento del focus!
Tra le altre cose da evitare per avere un sito accessibile vi sono: i frame e le scritte lampeggianti. Tutte cose che spopolavano anni fa nei primi siti web che comparivano su internet e che, tutt’oggi, le guide html ancora raccontano omettendo che sono deprecate per avere un sito accessibile.

Prima soluzione

Quindi, se l’apertura incondizionata di nuove finestre o di “popup” è deprecata e da evitare, se proprio non se ne vuole fare a meno, allora è necessario avvisare l’utente che si aprirà una nuova finestra.
Per adottare questa tecnica, bisogna, però, è necessario ricorrere a Javascript, sfruttando comandi come window.open() e all’evento onclick, da associare all’attivazione del link, evitando, comunque, di generare elementi o attributi non consentiti.

Qui ho trovato un semplice esempio di come utilizzare un accorgimento particolare che sfrutta javascript senza però andare ad invalidare il codice e soprattutto avvisando l’utente del cambiamento di focus:

E’ ovvio che, questo genere di soluzioni, andrebbero usate solo laddove non se ne può fare a meno, come, per esempio, la generazione di una pagina stampabile.

Seconda soluzione

Un’altra alternativa, la propone Ecologia dei siti web, che, nel tentativo di rispettare la legge L. 4/2004 (come pure le WCAG) che, indica, giustamente, di non vincolare l’utente all’uso di uno specifico dispositivo di input, consiglia di usare l’evento onclick sempre assieme all’evento onkeypress controllando che il tasto premuto corrisponda al tasto ENTER.

Ecco la sua soluzione:

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

Terza soluzione

Per finire non mi resta che citare un’ultima interessante alternativa tutta italiana: si chiama Wi.Li. (Windowed Links) ed è opera di Diego La Monica che l’ha realizzata partendo da un’idea di Carlo Filippo Follis.

Wi.Li. è uno script che ha il compito di eseguire una scansione di tutti i link sulla pagina in cui è inserito verificandone la destinazione. Nel momento in cui un utente effettua un click su un collegamento, Wi.Li. adotta un comportamento differente in base alla decisione dell’utente che può essere: aprire la pagina in una nuova finestra oppure rimanere nella stessa finestra di navigazione.

Il vantaggio di Wi.Li., quindi, è quello di poter integrare nel proprio sito “finestre popup discrezionali” accessibili, senza dover intervenire manualmente sul codice HTML che rimane validato.

Dagli esempi, si evince il suo funzionamento che, per quanto intuitivo, non rispetta comunque una delle direttive del regolamento attuativo della L. 4/20041, ovvero quella relativa all’avviso esplicito all’utente del cambiamento del focus.

Tag:Css, html, html_validators, Javascript
CONTINUE READING >
4 comments
Giu 26 2007

Test Everything: una ricca collezione di oltre 128 tool per fare test sul proprio sito

Posted by Antonio Troise
Tweet

Test Everything Test Everything è un’interessante servizio online che permette di avere a disposizione una collezione davvero ricca di oltre 128 tool per monitorare ed effettuare test sul proprio sito web.
Tra questi abbiamo i seguenti gruppi:

– CSS and HTML validators
– SEO tools
– Social services
– Web proxies
– Network tools
– Text tools
– Image tools
– Miscellaneous tools

Per ognuno di questi gruppi, è possibile selezionare, anche contemporaneamente, molti servizi online in grado di effettuare decine di test diversi. Sarà sufficiente, inserire l’indirizzo del proprio sito, selezionare uno o più servizi di cui si è interessati e quindi premere il tasto “Test website!”
Dopodiché verrà visualizzata una maschera che mostra 3 diverse alternative: un elenco di tutti i link selezionati da caricare ad uno ad uno (oppure tutti insieme attraverso l’uso del plugin per Firefox, Linky), oppure è possibile aprire tutti i link in un frameset, dedicando un frame a servizio. Infine, Test Everything, mette a disposizione per ogni sito selezionato, un comodo Bookmarklet da copiare nella propria toolbar per avere un accesso diretto al tool preso in considerazione.

Insomma una risorsa davvero inestimabile per qualsiasi webmaster!

Tag:bookmarklet, firefox, html_validators, seo, web-proxy
CONTINUE READING >
0 comments
SeguiPrezzi - Risparmia con Amazon.it

Categorie

Commenti Recenti

  • Antonio Troise on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Fioredicollina on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Antonio Troise on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Emanuele on UltraEdit: per i programmatori esigenti il miglior editor di testo per Windows, Mac OS e Linux
  • Luca on iDatabase: la valida alternativa di Bento per macOS e iOS per i database personali

Meta

  • Accedi
  • Entries RSS
  • Comments RSS
  • WordPress.org

Friends Link

  • GamerTagMatch
  • SeguiPrezzi.it – Risparmia con Amazon.it
  • Trendy Nail

Seguimi su:

  • facebook
  • twitter
  • rss
Creative Commons License
Levysoft by Antonio Troise is licensed under a Creative Commons Attribuzione-Non commerciale 2.5 Italia License.
© Copyright 2004 - 2014 - Levysoft by Antonio Troise