Rebelia.it

[xhtml] Migliorare l'accessibilità

Notizia del 16/12/2006

Prima parte: il target blank

Uno dei drammi di chi era abituato a scrivere codice html è stato scoprire che xhtml nella versione strict non prevedeva più l'uso del comando target="_blank" che fa aprire i link in una nuova finestra del browser.

La scelta è stata determinata dalla necessità di rendere quanto più accessibili possibile le pagine web: togliendo quest'opzione, il navigatore può in qualsiasi momento tornare sui suoi passi usando il tasto "back" del browser, pulsante noto anche al più sprovveduto dei navigatori e in quest'ottica la scelta è senz'altro corretta ed è giusto che sia implementata nei siti di servizio come lo sono quelli delle Pubbliche Amministrazioni.

Detto ciò, si devono fare i conti anche con le esigenze dei siti commerciali che hanno bisogno di offrire delle informazioni, ma anche di non perdere il navigatore; a questo proposito, ci sono due correnti di pensiero: la più intransigente sostiene che se non è previsto, non è corretto trovare un escamotage che permetta di farlo, mentre la più morbida ammette in alcuni casi l'uso di alternative non invasive ed io - pur non discutendo su scelte diverse dalla mia - appartengo a quest'ultima.

Sempre per tale necessità di rendere accessibili a quanti più navigatori possibili le pagine web, sono stati banditi i link che usano Javascript soprattutto quando aprono finestre pop-up: un sito dev'essere navigabile e il suo contenuto fruibile anche nel caso si usino browser testuali, che si disabilitino gli script o che non si implementi alcun plug-in (un plug-in è un'estensione che permette di visualizzare elementi particolari; il più diffuso e' il plug-in di Flash).

Fatta questa premessa obbligatoria, vediamo com'è possibile superare il problema senza creare difficoltà a chi ha l'esigenza di mantenere la navigazione in un'unica finestra del browser e lo farò... usando Javascript ;)

In realtà non è l'uso di Javascript in se a essere messo in discussione, ma il fatto che generalmente un link gestito con questo linguaggio non è più apribile nel caso tale linguaggio sia disattivato; i browser offrono infatti tra le opzioni disponibili la possibilità di disattivarlo e molti navigatori lo fanno, perché spesso è usato per far comparire messaggi pubblicitari non sempre graditi.

Javascript però può essere usato in maniera per niente invasiva, agganciando il link prima che sia aperto e forzandone l'apertura in una nuova finestra: in questo modo il link rimane utilizzabile anche in mancanza dell'abilitazione degli script, solo si aprirà nella medesima finestra del browser anziché in una nuova.

Lo script - non mio, ma mutuato da SkidX un utente del forum di Html.it che frequento - è il seguente:

Lo scrivo su un file di testo che salvo con estensione .js (ad esempio come blank.js) e lo aggancio alla pagina inserendo il tag <script> nell'header:

Al link vero e proprio invece aggiungo la classe class="blank" citata nello script; perché funzioni, è importante inserirla prima di href: il browser legge la pagina dall'alto in basso, arrivato all'head carica lo script che vi è linkato e lo tiene in memoria, così quando raggiungerà la classe citata (in questo caso blank) elaborerà lo script PRIMA di procedere con la lettura del resto e cioè del link (spiegazione poco tecnica, ma spero sufficientemente chiara).

Qui sotto un link aperto in questo modo:

Nel caso Javascript sia disabilitato, l'indirizzo è presente e il link perfettamente utilizzabile.

Seconda parte: saltare il menu

Un altro dei sistemi implementabili per rendere più accessibile una pagina è dare la possibilità di saltare da una sezione all'altra; i browser vocali leggono infatti TUTTO il contenuto della pagina ogni volta che si passa dall'una all'altra e soprattutto in caso di menu complessi o sezioni ripetitive, non sempre il navigatore desidera farlo, ma preferisce saltare direttamente al contenuto che gli interessa; per permetterglielo basta inserire all'inizio di una sezione un link che porta direttamente a un'altra, generalmente dal menu al contenuto e poi nasconderlo tramite i CSS.

Questo il codice xhtml:

Non è necessario aggiungere un ancoraggio vero e proprio - il classico <a id="nome"></a> - se l'elemento a cui puntiamo già ha un id utilizzabile, com'è in questo caso.

Nel foglio di stile usato per la formattazione della pagina aggiungo il seguente comando:

Generalmente preferisco usare una classe (quindi .nascondi) anziché un id (#nascondi), perché potrei aver bisogno di usarla più volte e un id non me lo permette.

Oltre agli ancoraggi, i browser vocali per navigare usano anche i tag <hn> dei titoli, altro buon motivo per usarli correttamente.

I campi con * sono obbligatori.