Corso di Progettazione di siti web

Titolo

Di seguito è proposta una simulazione euristica guidata da barriere per l'accessibilità del sito del telegiornale TG3, svolta sulla base delle barriere di accessibilità definite all'interno della metodologia di analisi proposta dal professor Brajnik, che verrà illustrata maggiormente nel paragrafo seguente. Il rapporto è stato interamente redatto da:

Passoni Massimo, mat. 66542, e-mail: max.passoni(at)yahoo.it

ed è stato ultimato in data 18/11/2007.

Introduzione

Il metodo definito dal professor Brajnik vuole porsi all'interno dell'ambito dei metodi di valutazione dell'accessibilità, andando a colmare una "nicchia" lasciata vuota da altre metodologie come la valutazione euristica, lo user testing e le valutazioni informali. Esso si basa su una serie di barriere di accessibilità nei confronti dell'utente disabile, che colui che farà la valutazione andrà a ricercare esaminando le singole pagine.
Vale la pena di proporre una definizione di barriera: con questo termine si intende un qualsiasi impedimento che si frappone fra un utilizzatore di un sito web diversamente abile (va detto che anche una differente configurazione Hardware / Software può essere motivo di una diversa abilità) e il raggiungimento di un obiettivo che tale individuosi era preposto. Una descrizione formale di una barriera di accessibilità include:


Gli strumenti utilizzati per le operazioni di controllo sono:
Torna all'inizio

Perimetro dell'indagine

Di seguito sono elencate le categorie di utenti prese in analisi, con un'indicazione sulle pagine analizzate per ciascuna categoria e le barriere di accesibilità che sono state ricercate:


Il metodo applicato ha previsto un'analisi sistematica del sito, seguendo le indicazioni proposte rispetto a ciascun tipo di utente, e verificando quindi la presenza o meno della barriera. In caso di un riscontro positivo si è proceduto assegnando un valore di frequenza e uno d'impatto secondo le tabelle presentate di seguito per avere, ad analisi ultimata, una stima della gravità per ciascuna barriera d'accessibilità analizzata.
Per valutare la gravità di una problematica rilevata sono stati utilizzati due parametri di riferimento, ovvero l'impatto che il problema rilevato può avere sull'efficacia, produttività e sicurezza che un utente può avere mentre sta svolgendo un determinato compito in un dato contesto operativo, e la frequenza con cui tale problematica si presenta mentre l'utente sta svolgendo il dato compito. Nel classificare la gravità di una barriera, a ciascuno di questi due indici è stato assegnato un livello da 1 (meno grave) a 3 (più grave); una volta effettuata l'assegnazione dei livelli di impatto e frequenza, la gravità di un problema si può derivare utilizzando la tabella riportata di seguito; è sufficiente infatti ricercare all'interno di essa la giusta combinazione tra impatto e frequenza per poter automaticamente ottenere il livello di gravità associato al problema in esame.

Tabella per la classificazione della gravità dati impatto e frequenza
impatto frequenza gravità
1 1 minore
1 2 minore
1 3 serio
2 1 serio
2 2 serio
2 3 critico
3 1 critico
3 2 critico
3 3 critico

Infine ciascun livello di gravità (minore, serio o critico) ottenuto mediante questa procedura può essere associato alle seguenti definizioni:
  1. minore: la presenza di questa barriera viene notata dall'utente ma ci sono facili modi per aggirarla od evitarla se la si riconosce o ricorda; essa incide sulla produttività e sulla soddisfazione; non incide sull'efficacia nÚ sulla sicurezza.
  2. serio: la barriera viene notata ed essa ha una grossa influenza nel modo di proseguire il compito da parte dell'utente. Essa incide pesantemente sulla produttività e sulla soddisfazione. Può incidere anche sull'efficacia e sulla sicurezza, rendendo difficile, faticoso e/o rischioso il proseguimento del compito; è facile che l'utente compia degli errori. Spesso non è facile trovare delle vie alternative per ottenere lo scopo.
  3. critico: si tratta di una barriera che porta molti utenti a rinunciare al raggiungimento dello scopo: gli errori possono essere molti e con gravi conseguenze, vie alternative non esistono. L'impatto negativo su efficacia e sicurezza è elevato; è ancora più elevato su produttività e soddisfazione.


Le pagine in questione sono state analizzate nel periodo dal 12/11/2007 al 19/11/2007.
Torna all'inizio

Sommario dei risultati

Dopo una prima analisi una delle barriere che si rileva in numerosi casi (distribuiti su varie pagine) è il fatto di affidarsi al solo colore per la trasmissione di informazioni. Questo non riguarda tanto le zone dedicate ai contenuti (che sono al contrario ben strutturate rispetto a questa barriera, utilizzando strumenti di enfatizzazione come il tag <strong>), quanto alcuni link di navigazione, che indicano solo col colore (e talvolta nemmeno con questo) il fatto di esser stati visitati o meno. Un altro problema, è l'insufficiente livello di contrasto visivo tra i testi in primo piano e i rispettivi colori di sfondo. Infatti analizzando i contrasti di colore si è rilevata la presenza di vari elementi del sito (in modo particolare all'interno della Homepage, mentre visitando le altre pagine il problema è andato attenuandosi fino a quasi scomparire) che non soddisfano i requisiti minimi. Va detto che, come nel caso dell'utilizzo del solo colore per la trasmissione di informazioni, si tratta di un problema che interessa non tanto i contenuti informativi, quanto gli elementi di navigazione, ovvero pulsanti e link per muoversi tra le varie pagine. Una barriera che è stata, sfortunatamente solo in parte, eliminata dai progettisti del sito, è quella riguardante le immagini funzionali prive di testo alternativo. Vi sono esempi (che verranno approfonditi di seguito) di elementi di navigazione (come ad esempio il pulsante cerca per utilizzare il search engine) che sono dotati di testo alternativo; tuttavia altre immagini che fungono da link (e.g. la gif per accedere alla pagina del meteo) non sono trattate alla stessa maniera; quindi in definitiva, la barriera non può dirsi evitata.
Se senz'altro va riconosciuto il merito di aver inserito all'interno della homepage dei link ridondanti per accedere ad alcune sezioni del sito (le homepage delle varie redazioni) senza dover ricorrere necessariamente all'uso dei menu dinamici, purtroppo ad un'analisi approfondita emerge che questa soluzione è addottata solo per alcune sezioni del sito, mentre per altre (tra cui le rubriche agri3, tg3 saluteInForma) l'unica soluzione è accedere utilizzando il menu dinamico in Javascript; questa scelta può rappresentare una barriera nel caso in cui l'utente utilizzi ad esempio un browser che non ha tale tecnologia abilitata.
Concludendo il sommario delle problematiche rilevate con più nelle pagine in analisi, va di sicuro citata l'assenza di link interni, come pure la mancanza di shortcuts da tastiera (accesskeys) e di link per saltare direttamente al contenuto; tali condizioni sono rilevate all'interno di tutto il set di pagine e hanno come conseguenza una riduzione della produttivià e della soddisfazione nell'utente che incontri queste barriere durante la navigazione.
Torna all'inizio

Dettaglio dei risultati

Caso 1


Homepage

Contrasto visivo insufficiente

A causa di una scelta errata nell'abbinamento dei colori, in alcuni elementi interni alla homepage (in particolare si tratta di titoli di sezioni o di link per l'accesso ad altre pagine), si rileva un contrasto visivo insufficiente; tutto ciò, anche se non rende impossibile la navigazione (gli elementi di testo rimangono comunque distinguibili dallo sfondo), può portare, in alcuni contesti, come quello del caso in esame, ad una diminuzione dell'efficacia e della soddisfazione dell'utente. Si riportano di seguito degli esempi in cui è verificata l'assenza di un livello di contrasto sufficiente.

esempio di contrasto visivo insufficiente

In questo caso sia la scritta verde su fondo bianco, sia quella blu su fondo verde non hanno contrasto sufficiente.

esempio di contrasto visivo insufficiente bis

In questo caso è la scritta verde su fondo blu che non ha contrasto sufficiente.



La soluzione consiste nell'utilizzare combinazioni di colori che offrano un contrasto visivo ottimale; tipico esempio sono i colori complementari. Una buona strategia per verificare le scelte fatte è utilizzare uno strumento che misuri il contrasto visivo della combinazione cromatica scelta applicata alla pagina, oppure verificarlo provando a visualizzare la pagina in scala di grigi. Impatto 2 Frequenza 2


Torna ad inizio sezione
Immagini funzionali prive di testo

Relativamente al menu di navigazione e alla form per usare il motore ricerca, i testi alternativi sono presenti in tutte le immagini funzionali. Vi sono invece alcuni casi di immagini funzionali sparse nella pagina, che sono prive di testo alternativo, come anche il banner pubblicitario posizionato nella zona superiore della pagina. Come conseguenza l'utente non avrà la possibilità di ingrandirle, e quindi potrebbe non essere in grado di comprenderne il contenuto. Questa conseguenza è particolarmente pesante se si considera il caso in esame, in cui il protagonista utilizza lo schermo di un palmare per visualizzare il sito. Una situazione del genere porterebbe sicuramente a un forte calo della soddisfazione e della motivazione nell'utente del sito.

immagine funzionale priva di testo 1

codice: <object width="468" height="60" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" classclass="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

soluzione: <object width="468" height="60" alt="banner pubblicitario enel" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" classclass="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">

immagine funzionale priva di testo 2

codice: <img src="http://www.rai.it/SITITG/Static/immagine/46/anoressia.jpg"/>

soluzione: <img src="http://www.rai.it/SITITG/Static/immagine/46/gtbertinotti.jpg" alt="banner tg ragazzi per puntata su anoressia"/>



Questa barriera può essere evitata utilizzando in modo corretto l'attributo alt, ovvero specificando un testo alternativo per ogni immagine funzionale e anche per ogni contenuto di tipo Object (quindi anche il banner flash mostrato in precedenza), facendo attenzione ad evitare di assegnare la stringa "" all'attributo alt di un'immagine "incapsulata" all'interno di un link, dato che comunque tale elemento è raggiungibile da tastiera, e nel caso di un alt uguale a "" il browser non potrebbe dare nessuna informazione aggiuntiva all'utente che ha raggiunto il link senza sapere il motivo per cui il focus si trova in quella posizione. Impatto 2 Frequenza 1


Torna ad inizio sezione
Menu dinamici in Javascript

Se da un lato va riconosciuta la buona iniziativa di utilizzare link ridondanti per accedere alle homepage delle varie redazioni anche senza l'ausilio del menu in Javascript, ci sono comunque vari link interni ad esso che non hanno soluzioni equivalenti da utilizzare qualora non si voglia ricorrere al menu dinamico, qualora si utilizzino dispositivi che offrono un ridotto campo visivo (come nel caso sotto esame), oppure nel caso in cui Javascript sia disabilitato sul particolare dispositivo che si usa per navigare (un sottoinsieme dei link non raggiungibili senza passare per il menu dinamico è evidenziato dal cerchio rosso nella videata sottostante). La scelta di implementare parte del menu unicamente in Javascript si riflette in una diminuzione dell'efficacia e dello stato di soddisfazione dell'utente che accederà alla pagina in questione, dal momento che il menu potrebbe aprirsi in una sezione della pagina fuori dal campo visuale dell'utente, che quindi rischierebbe di non vedere affatto il menu aperto, o di vederne solo parte.

esempio di menu dinamico in Js che copre i contenuti in homepage

In questo caso, come accennato, il menu aperto può non essere visibile all'utente. La soluzione, come si afferma anche in seguito, consiste nel replicare i link presenti nel menu, per renderli accessibili anche senza usare Javascript.



Soluzione ovvia è far si che tutte le opzioni di navigazione siano attivabili anche senza l'ausilio di javascript, magari utilizzando dei link ridondanti che siano utilizzabili anche disabilitando Javascript, come nel caso dell'accesso multiplo alle homepage delle redazioni del Tg3. Impatto 1 Frequenza 1


Torna ad inizio sezione
Mancanza di link interni

La pagina, pur essendo molto ricca di contenuti (si consideri ad esempio la sezione "i titoli del giornale", dove sono elencati di fila una lunga serie di contenuti), è priva di un'adeguata struttura di link interni. La presenza di questa barriera, se ad esempio consideriamo l'utente che è interessato a un quadro conciso di tutti gli avvenimenti delle ultime ore, può causare errori (perchè ad esempio l'utente di un pda potrebbe avere difficoltà a posizionarsi sulla notizia giusta), e di sicuro un calo della produttività, visto che l'utente trascorrerà una sostanziosa parte di tempo a effettuare lo scrolling dell'intero elenco delle notizie alla ricerca di quelle di proprio interesse.

esempio di mancanza di link interni

Si sente la mancanza di una struttura di link interni, che potrebbe essere inserita nelle posizioni evidenziate dai testi in rosso.



Un buon modo per risolvere questo problema è prevedere un'adeguata struttura di link interni per passare da una sezione alla successiva o all'inizio della precedente, oltre a collegamenti per tornare all'inizio della pagina. Sarebbe in particolare opportuno utilizzare questa soluzione all'interno della sezione "i titoli del giornale", per permettere così ai fruitori del sito (e quindi anche a chi risente della presenza di questa barriera, come il nostro protagonista del caso 1) di poter scorrere le notizie in modo più agevole rispetto ad ora.

Impatto 1 Frequenza 3


Torna ad inizio sezione
Finestre sovrapposte

Utilizzando la funzionalità che permette di vedere l'ultima edizione del tg in formato realmedia si causa l'apertura di una finestra che si sovrappone a quella usata sino a quel momento; questa situazione può provocare unsenso di disorientamento nell'utente, che non riconosce più quali elementi presentati fanno parte della finestra originale e quali invece fanno parte della nuova finestra.

esempio di sovrapposizione finestre

Videata che mostra come l'apertura della nuova finestra vada a oscurare parzialmente il contenuto di quella iniziale, producendo disorientamento nell'utente. Il codice che ne comanda l'apertura è il seguente:
<a class="conn" onmouseout="su_pul1()" onmouseover="over_pul1()" onclick="return true" href="javascript:apriVideo('/SITOTG/TG3_video/1,8516,ultimo_tg,00.html')"> <img class="img1" width="74" height="28" name="mod56" src="http://www.tg3.rai.it/SITITG/r2003/56k_no.gif" alt="modem a 56K"/> </a>



Nello specifico contesto sembra opportuno proporre come soluzione che il filmato venga riprodotto in una pagina da aprirsi al posto della home page. In alternativa si può mantenere la soluzione attuale, evitando però di creare una nuova finestra che si sovrappone alla home page e va così a impedire la fruizione delle informazioni. E' opportuno inoltre informare l'utente sul fatto che alla selezione del collegamento verrà aperta una nuova finestra, di modo che esso sia cosciente del comportamento del sito e non rimanga spiazzato da eventi che non aveva previsto.

Impatto 2 Frequenza 2


Torna ad inizio sezione
Mancanza di tasti rapidi

Il menu di navigazione posizionato nella parte superiore della pagina mantiene la stessa struttura in diverse parti del sito (vedi homepages redazionali); la stessa cosa si può dire per la form con la quale si utilizza il motore di ricerca, che mantiene struttura e posizione costante all'interno di diverse pagine del sito. Ciononostante, non è implementata la possibilità di accedere agli elementi del menu, o al pulsante "cerca" della form, utilizzando tasti di scelta rapida. Una scelta di questo tipo ha conseguenze negative per l'utente (si pensi ad esempio all'utente di PDA menzionato nello use case), poichè quest'ultimo si trova costretto a spostare manualmente il focus dell'interazione, quando invece avrebbe potuto farlo molto più agevolmente utilizzando i tasti rapidi.

esempio di mancanza di accesskeys

codice relativo al pulsante "chi siamo": <a onmouseout="su_pul3()" onmouseover="over_pul3()" href="/SITOTG/tg3_sezioni/0,8371,1,00.html"> <img name="chisiamo" alt="Chi siamo" src="http://www.tg3.rai.it/SITITG/r2003/chisiamo.gif"/> </a>

la soluzione è aggiungere l'attributo acceskey nel seguente modo: <a onmouseout="su_pul3()" onmouseover="over_pul3()" href="/SITOTG/tg3_sezioni/0,8371,1,00.html" acceskey="W"> <img name="chisiamo" alt="Chi siamo" src="http://www.tg3.rai.it/SITITG/r2003/chisiamo.gif"/> </a>

secondo esempio di mancanza di accesskeys

codice relativo al pulsante "vai": <a title="Cerca" href="javascript:document.gs.submit();"> <img class="ButtonSearch" width="35" height="20" border="0" valign="bottom" alt="Cerca" src="http://www.banneradmin.rai.it/ads/barramenu/images/btn_vai_out_.gif"/> </a>

la soluzione è aggiungere l'attributo acceskey nel seguente modo: <a title="Cerca" href="javascript:document.gs.submit();" acceskey="C"> <img class="ButtonSearch" width="35" height="20" border="0" valign="bottom" alt="Cerca" src="http://www.banneradmin.rai.it/ads/barramenu/images/btn_vai_out_.gif"/> </a>



La soluzione al problema, nel caso specifico, consiste nell'abbinare delle acceskeys per i vari elementi che si ripetono tra le pagine, ovvero sezioni del menu, e form per utilizzare il search engine; nel far questo bisogna tenere presenti alcune regole, ovvero evitare di utilizzare i caratteri già utilizzati dai menu del browser, ricordarsi di dare riferimenti all'utente su quali siano le acceskeys per attivare le varie sezioni del sito, ed essere coerenti sull'abbinamento tra acceskey e funzione implementata (e.g. evitare di associare in una pagina il pulsante 'invio' alla ricerca sul search engine, e in un secondo momento associarlo al pulsante 'r').

Impatto 1 Frequenza 1


Torna ad inizio sezione
Skip links

All'interno della home page non è stata prevista la possibilità di saltare direttamente al contenuto evitando sezioni preliminari; questa funzionalità è implementabile utilizzando degli skip links e la sua assenza causa la necessità per l'utente di dover transitare attraverso tutto il materiale preliminare prima di poter raggiungere il nocciolo della pagina. Tutto ciò ha conseguenze negative, e in particolare si noterà un calo della produttività nel caso in cui l'utilizzatore del sito (come il protagonista della nostra situazione di esempio), sia particolarmente danneggiato dalla presenza della barriera. Infatti l'utente dovrà passare una buona parte di tempo a visionare materiale preliminare (menu, links, logo), prima di raggiungere l'informazione di effettivo interesse.

esempio di mancanza di skiplinks

Si propone nella videata una possibilità su come risolvere il problema della mancanza di skip links (etichetta "SKIP" posizionata in basso a destra rispetto al logo del tg3). Alternativamente si può comunque inserire un link all'interno della pagina, regolandone però il posizionamento mediante il CSS per far si che sia invisibile all'utente che osserva la pagina. Questo è il codice da inserire all'interno del foglio di stile per raggiungere lo scopo:

#skiplink {position:absolute; left:0px; top:-5000px; width:1px; height:1px; overflow:hidden; }.

Un'ulteriore alternativa è rappresentata dalla possibilità di rendere il link invisibile utilizzando per il testo lo stesso colore dello sfondo, ed eventualmente decidendo di renderlo visibile solo nel caso in cui ci si posizioni sopra con il mouse, o solo se il focus dell'interazione è posizionato su di esso. Per raggiungere questo scopo si può sempre agire sul CSS, seguendo l'esempio proposto:

#skiplink:focus { color:white; /**per gestire un cambiamento di colore in corrispondenza del posizionamento del focus**/}

#skiplink:hover { color:white;/**per gestire un cambiamento di colore in corrispondenza del passaggio del mouse sul link**/}.



Per risolvere il problema si può aggiungere, all'altezza del logo, un collegamento che permetta di bypassare tutte le informazioni che non sono di interesse per portarsi direttamente al punto desiderato; qualora vi fossero necessità di rendere invisibile questo link, si può utilizzare ad esempio la proprietà css "display:none;", per renderlo nascosto.

Impatto 1 Frequenza 1


Torna ad inizio sezione
Tabella riassuntiva caso 1 - Homepage
 ImpattoFrequenzaGravitÓ
Finestre sovrapposte22serio
Contrasto visivo insufficiente22serio
Immagini funzionali prive di testo21serio
Mancanza di link interni13serio
Mancanza di tasti rapidi11minore
Menu dinamici in Javascript11minore
Skip links11minore

Torna all'inizio

Caso 2


Homepage

Colore essenziale

Se da un lato va riconosciuto il buon utilizzo del tag <strong> come enfatizzatore all'interno dei contenuti informativi (e infatti relativamente ad essi si può dire che il colore non abbia un ruolo essenziale), la stessa cosa non si può dire per il menu mostrato nelle videate, in cui viene affidato al solo colore il compito di indicare se un link sia già stato attraversato, e anche se il mouse si trovi attualmente in hover su di esso; ancora più evidente è il caso del pulsante "chi siamo" posto a sinistra all'interno del menu di navigazione superiore, poichè esso non utilizza nemmeno un cambiamento di colore per indicare di essere stato visitato. Queste scelte, non sono ottimali, e rischiano di avere come conseguenza un abbassamento anche pesante dell'efficacia.

esempio di colore non essenziale per trasmettere le informazioni

Si è deciso anche di riportare un buon esempio in cui il colore non viene utilizzato come unico mezzo per la trasmissione delle informazioni, ma abbinato ad enfatizzatori (<h5> e <strong>).

esempio di colore essenziale per trasmettere le informazioni

secondo esempio di colore essenziale per trasmettere le informazioni

Viene proposta un'unica soluzione a entrambi i casi, vista la somiglianza tra di essi. Per consentire la trasmissione delle informazioni senza essere dipendenti dall'utilizzo del colore, si può agire sul CSS apportando modifiche in modo simile a quanto viene illustrato di seguito:
#link:hover{font-size:0.94em;/**per ingrandire il testo quando si passa sopra con il mouse**/
border-bottom:2px red solid;/**per aggiungere una sottolineatura al link durante il passaggio del mouse**/}

#link:visited{border:1px black dotted;/**per aggiungere un bordo tratteggiato ai link visitati**/}



Nel caso specifico la soluzione più ovvia è utilizzare elementi simbolici che rimarchino la condizione attuale del link (e.g.: si può strutturare il css affinchè in corrispondenza dell'evento di hover il pulsante del link dia l'impressione di ingrandirsi).

Impatto 2 Frequenza 2


Torna ad inizio sezione
Contrasto visivo insufficiente (barriera già rilevata durante l'esame del caso 1)

A causa di una scelta errata nell'abbinamento dei colori per i menu di navigazione, si rileva un contrasto visivo insufficiente, che anche se non rende impossibile la navigazione (i titoli sono comunque leggibili) può portare in alcuni contesti a una diminuzione dell'efficacia. Si riportano di seguito degli esempi.

esempio di contrasto visivo insufficiente

Si riporta un caso particolarmente evidente di contrasto insufficiente; si tratta del link "entra", che, una volta visitato, muta il suo colore in un verde che è quasi indistinguibile dallo sfondo. La soluzione sta nell'evitare di usare una combinazione cromatica di questo tipo, e anche nell'utilizzare altri modi per indicare che un link è stato visitato, onde evitare di erigere una barriera dovuta al colore utilizzato come unico mezzo per la presentazione di informazioni.



La soluzione consiste nell'utilizzare combinazioni di colori che offrano un contrasto visivo ottimale; tipico esempio sono i colori complementari. Una strategia ottimale per verificare le scelte fatte è utilizzare un'estensione che misuri il contrasto visivo, oppure verificarla in modo semiautomatico provando a visualizzare la pagina in scala di grigi. Impatto 2 Frequenza 1


Torna ad inizio sezione

Homepage della redazione politica

Colore essenziale

Anche durante l'esame della seconda pagina web prevista in questo caso si è rilevato un utilizzo del solo colore per trasmettere informazioni, e anche in questo caso, si tratta per lo più di informazioni sui link percorsi che vengono mostrate all'utente solo con variazioni di colore. In particolare in un caso, mostrato in dettaglio nella videata sottostante, c'è una scelta di colori piuttosto infelice, che porta dunque al sovrapporsi di due barriere: infatti accanto al fatto che l'informazione viene presentata con il solo colore, si va ad aggiungere un contrasto visivo insufficiente. Non va sottovalutata l'importanza che queste barriere possono avere nell'interazione con l'utente: infatti la presenza simultanea di più condizioni negative può portare a un drastico calo della motivazione nell'utente.

esempio di colore utilizzato in modo unico per trasmettere informazioni

Nell'esempio riportato vi è un lieve miglioramento rispetto ad altre situazioni simili che sono state rilevate. Infatti si può osservare come per indicare che il mouse si trova sul link viene utilizzato non solo il colore, ma anche una sottolineatura. Tale soluzione invece non è stata prevista per indicare i link visitati, che sono riconoscibili solo grazie a una lieve distinzione di colore rispetto ai link non visitati. Come già detto questa scelta porta anche a problematiche di contrasto, poichè tra il colore dello sfondo e il colore del link non vi è sufficiente differenza da permettere una chiara distinzione dei contenuti in tutte le situazioni.



Come soluzione è sufficiente non utilizzare solo il colore per la trasmissione di informazioni, ma abbinarlo anche ad altri elementi che contribuiscano ad enfatizzare i contenuti (sottolineature, peso del carattere, dimensione del carattere) e scegliere combinazioni di colori che performino meglio per quanto riguarda il contrasto.

Impatto 1 Frequenza 2


Torna ad inizio sezione
Contrasto visivo insufficiente

Come nel caso della home page iniziale, anche durante l'esame di questa pagina sono emerse situazioni di contrasto insufficiente. Esempi sono la zona citata anche nel paragrafo precedente come "portatrice" di una doppia barriera, e un frammento della tabella riportata nell'illustrazione, dove oltre a non esserci un livello soddisfacente di contrasto, vi è un uso dei colori che appare quasi casuale, e che quindi può contribuire a creare confusione nell'utente. Anche nel caso delle intestazioni si usa il colore per distinguere il loro contenuto dalle rimanenti celle della tabella, e anche se la loro posizione all'interno della struttura suggerisce la loro funzione, di sicuro si è ben lontani dall'affermare che quella riportata in figura è una tabella ben strutturata.

esempio di colore utilizzato in modo unico per trasmettere informazioni

Nell'esempio riportato si nota una zona di testo di colore diverso rispetto al resto della tabella. A causa dell'impiego di tale tonalità di colore, si verifica una condizione di contrasto visivo insufficiente, unita al fatto che si crea nell'utente confusione visto che non è comprensibile se i testi di colore differente siano utilizzati per dare una diversa enfasi o in modo casuale. Anche ipotizzando che si sia utilizzato tale colore per enfatizzare il contenuto, si crea comunque un'ulteriore barriera dovuta al fatto che è stato utilizzato solo colore per trasmettere contenuti informativi, e non altri mezzi come sottolineature, o spessori di carattere diversi a seconda dell'importanza.



Come indicato in altri casi, anche in questo caso una combinazione migliore di colori (ad esempio colori complementari),può risolvere il problema.

Impatto 1 Frequenza 2


Torna ad inizio sezione
Tabella riassuntiva caso 2 - Homepage
 ImpattoFrequenzaGravità
Colore essenziale22serio
Contrasto visivo insufficiente21serio


Tabella riassuntiva caso 2 - Homepage redazione politica
 ImpattoFrequenzaGravità
Colore essenziale12minore
Contrasto visivo insufficiente12minore

Torna all'inizio

Caso 3


Homepage

Colore essenziale (barriera già rilevata durante l'esame del caso 2)

Se da un lato va riconosciuto il buon utilizzo del tag <strong> come enfatizzatore all'interno dei contenuti informativi (e infatti relativamente ad essi si può dire che il colore non abbia un ruolo essenziale), la stessa cosa non si può dire per il menu mostrato nelle videate, in cui viene affidato al solo colore il compito di indicare se un link sia già stato attraversato, e anche se il mouse si trovi attualmente in hover su di esso; ancora più evidente è il caso del pulsante "chi siamo" posto a sinistra all'interno del menu di navigazione superiore, poichè esso non utilizza nemmeno un cambiamento di colore per indicare di essere stato visitato. Queste scelte, non sono ottimali, e rischiano di avere come conseguenza un abbassamento anche pesante dell'efficacia.

Per le videate di esempio si faccia riferimento a quanto esposto durante l'esame del caso 2, disponibile al seguente link.



Nel caso specifico la soluzione più ovvia è utilizzare elementi simbolici che rimarchino la condizione attuale del link (e.g.: si può strutturare il css affinchè in corrispondenza dell'evento di hover il pulsante del link dia l'impressione di ingrandirsi).

Impatto 1 Frequenza 2


Torna ad inizio sezione
Contrasto visivo insufficiente (barriera già rilevata durante l'esame del caso 1)

A causa di una scelta errata nell'abbinamento dei colori per i menu di navigazione, si rileva un contrasto visivo insufficiente, che anche se non rende impossibile la navigazione (i titoli sono comunque leggibili) può portare in alcuni contesti a una diminuzione dell'efficacia. Si riportano di seguito degli esempi.

Per le videate di esempio si faccia riferimento a quanto esposto durante l'esame del caso 2, disponibile al seguente link.



La soluzione consiste nell'utilizzare combinazioni di colori che offrano un contrasto visivo ottimale; tipico esempio sono i colori complementari. Una strategia ottimale per verificare le scelte fatte è utilizzare un'estensione che misuri il contrasto visivo, oppure verificarla in modo semiautomatico provando a visualizzare la pagina in scala di grigi.

Impatto 2 Frequenza 1


Torna ad inizio sezione

Homepage della redazione esteri

Colore essenziale

Similmente ad altre parti del sito, anche qui il colore viene utilizzato come unico mezzo per dare informazioni sui link attraversati e su quelli non attraversati. D'altro canto va anche sottolineato il buon uso che è stato fatto del tag <strong> come enfatizzatore all'interno dei testi. In definitiva la mancanza di indicazioni sui link già seguiti può causare una diminuzione dell'efficacia, ma il fatto che tale difetto sia limitato a questa parte e non interessi invece il contenuto, che come detto in precedenza è ben strutturato mediante l'utilizzo di enfatizzatori, porta a ipotizzare che le conseguenze negative saranno comunque circoscritte e limitate.

esempio di colore utilizzato in modo unico per trasmettere informazioni

Si presenta un esempio dell'utilizzo del colore in modo esclusivo per trasmettere informazioni, similmente a quanto rilevato all'interno della homepage della redazione politica.


esempio di buon utilizzo di enfatizzatori per la trasmissione di informazioni

Si è deciso di includere un esempio di buon utilizzo di enfatizzatori per trasmettere l'informazione senza appoggiarsi esclusivamente sull'uso del colore. Dall'analisi del codice html è emerso l'utilizzo del tag semantico <strong>, come si può vedere nello spezzone di codice che segue:
<strong>
<font color="#333333">Continueremo a protestare contro </font>
</strong>
L'utilizzo di <strong> come enfatizzatore ha risvolti positivi anche per chi utilizza tecnologie assistive come lettori di schermo, poichè esso viene riconosciuto, e il contenuto letto con un enfasi diversa rispetto al resto del testo.



Per risolvere il problema è sufficiente utilizzare altri mezzi per veicolare le informazioni oltre al colore. Imitando quanto fatto all'interno della sezione di contenuto, si potrebbe ad esempio utilizzare un diverso carattere (o un diverso stile: italic, bold, etc...), per distinguere i link visitati da quelli non visitati.

Impatto 2 Frequenza 1


Torna ad inizio sezione
Contrasto visivo insufficiente

Analizzando il contrasto visivo della pagina si rilevano due situazioni in cui è stato scelto un background bianco e un testo dello stesso colore. Questo testo viene mostrato utilizzando un'immagine definita nel css che va a inserirsi tra testo e sfondo. Disabilitando il css non si hanno problemi, poichè il testo rimane visibile, mentre disabilitando le immagini il testo in questione non è più visibile all'utente. Come conseguenza si può avere un calo di livello di soddisfazione dell'utente, considerando che i testi in esame sono le intestazioni delle sottosezioni della pagina, e quindi sono funzionali a rendere più semplice l'orientamento dell'utente all'interno del sito.

esempio di contrasto insufficiente nella home della redazione esteri

Si riporta l'esempio analizzato in precedenza. Si può vedere come il testo, qualora le immagini vengano disabilitate, rimane invisibile a meno di non evidenziarlo con il mouse. Il codice css che regola la presentazione di questo elemento è il seguente:

.titolartic {
/**...**/
background-image:url(/SITITG/r2003/sf_titolarti.gif);
color:#FFFFFF;
/**...**/
}

Esistono varie possibilità per risolvere questa problematica, tra cui utilizzare un diverso colore per mostrare il testo di modo che esso sia visibile anche rimuovendo le immagini, oppure inserire il testo all'interno dell'immagine stessa, prestando attenzione a far si che sia chiaramente visibile anche il contenuto alternativo nel caso in cui l'immagine non sia visualizzabile.



Una possibile soluzione consiste nel rivedere alcune scelte fatte per i colori dei titoli, e scegliere dei colori che offrano un miglior livello di contrasto anche nel caso in cui si disabilitino le immagini.

Impatto 3 Frequenza 1


Torna ad inizio sezione
Tabella riassuntiva caso 3 - Homepage
 ImpattoFrequenzaGravità
Colore essenziale12minore
Contrasto visivo insufficiente21serio


Tabella riassuntiva caso 3 - Homepage redazione esteri
 ImpattoFrequenzaGravità
Contrasto visivo insufficiente31critico
Colore essenziale21serio

Torna all'inizio

Caso 4


Homepage

Menu dinamici in javascript

Se da un lato va riconosciuta la buona iniziativa di utilizzare link ridondanti per accedere alle homepage delle varie redazioni anche senza l'ausilio del menu in javascript, ci sono comunque vari link interni ad esso che non hanno soluzioni equivalenti da utilizzare qualora non si voglia ricorrere al menu dinamico oppure nel caso in cui javascript sia disabilitato sul particolare dispositivo che si usa per navigare. Va sottolineato comunque, che in un caso d'uso come quello ipotizzato la mancanza di tali link può comportare un calo di soddisfazione, ma non è tale da incidere su produttività al punto da impedire la navigazione, visto che l'homepage della redazione economica è comunque accessibile utilizzando i link ridondanti presenti. Si riporta una schermata che mostra parte del menu dinamico in javascript:

esempio di colore utilizzato in modo unico per trasmettere informazioni

Si fornisce un esempio di parte del menu Javascript presente all'interno della homepage. I link presenti, contrariamente a quanto accade per i link che portano alle pagine delle singole relazioni, non prevedono altri metodi d'accesso se non utilizzando il menu dinamico. Come si può vedere dal codice riportato, il menu risulta invisibile all'utente che utilizza un browser senza Javascript.

<a onmouseout="su_pul5();hide('menurubriche')" onmouseover="over_pul5();show('menurubriche')" href="#"> <img name="rubriche" alt="Rubriche" src="http://www.tg3.rai.it/SITITG/r2003/rubriche_no.gif"/> </a>

La soluzione consiste nell'evitare di progettare gli elementi di navigazione utilizzando tecnologie che potenzialmente possono portare alla creazione di barriere verso alcune classi di utenti; se invece si è decisi ad operare con tali mezzi, è necessario fornire percorsi alternativi per permettere anche agli utenti portatori di "disabilità tecnologiche" di accedere ai contenuti.



La soluzione consiste nello svincolare l'utente dalla dipendenza da Javascript. Questo è possibile imitando quanto fatto per i link alle varie redazioni, ovvero offrire dei link ridondanti che siano utilizzabili anche senza javascript.

Impatto 2 Frequenza 1


Torna ad inizio sezione
Menu a cascata

All'interno della homepage sono presenti più casi di menu implementati come menu a cascata, riportati anche nelle videate sottostanti. Se, come nel caso d'uso in esame, l'utente accede alla pagina con un browser Javascript disabled, esso non riuscirà proprio ad utilizzare i menu; tutto ciò porta ad una forte riduzione dell'efficacia.

esempio di colore utilizzato in modo unico per trasmettere informazioni

Si è deciso di presentare un buon esempio di come si sia cercato di evitare, in parte, l'erigersi di barriere verso gli utenti che navigano con Javascript disabilitato. Si può vedere come venga data una duplice possibilità agli utenti di accedere ai contenuti, sia mediante il menu a cascata, sia tramite link standard. se fosse stata utilizzata la stessa tecnica per tutti i gruppi di link presenti all'interno del menu dinamico, sarebbe stato possibile evitare la comparsa di alcune delle barriere legate alla navigazione senza Javascript.



Un'alternativa è evitare i menu a cascata, eventualmente realizzando menu separati o appiattiti. Altrimenti è possibile, qualora si desideri mantenere la soluzione Javascript, fornire dei link di accesso equivalenti che siano però accessibili, affinchè l'utente non sia legato al fatto di avere Javascript abilitato o meno sul browser.

Impatto 2 Frequenza 1


Torna ad inizio sezione
Eventi mouse

Esaminando il sorgente della homepage si nota un uso ripetuto dei gestori di eventi legati al mouse per far compiere principalmente azioni quali l'apertura (con onmouseover) e la chiusura (con onmouseout), sia degli elementi del menu di navigazione, sia di quelli del menu posizionato nella zona superiore della pagina; anche la possibilità di visualizzare l'ultima edizione del tg è legata all'uso di un gestore di eventi dipendente dal dispositivo, che nel caso specifico, come si riporta di seguito, risulta essere "onclick". Una scelta di questo tipo porta a una riduzione pesante dell'efficacia, dal momento che l'utente non può utilizzare gli elementi attivati dai gestori di eventi sopra menzionati, a meno di non utilizzare come periferica di puntamento un mouse; ovviamente l'altro prerequisito che bisogna soddisfare per poter utilizzare i menu è avere un browser Javascript-enabled. Sono di seguito mostrate alcune situazioni in cui sono stati usati gestori di eventi legati al mouse.


La gestione di eventi legata al mouse, viene impiegata all'interno della homepage per comandare, tra le altre cose, l'apertura e la chiusura del menu dinamico in Javascript, come si può osservare dal codice di esempio:

<a onmouseout="su_pul4();hide('menuredazioni')" onmouseover="over_pul4();show('menuredazioni')" href="#"> <img name="redazioni" alt="Redazioni" src="http://www.tg3.rai.it/SITITG/r2003/redazioni_no.gif"/> </a> L'esempio proposto comanda la visualizzazione o meno dell'elenco redazioni all'interno del menu dinamico.

<a class="conn" onmouseout="su_pul1()" onmouseover="over_pul1()" onclick="return true" href="javascript:apriVideo('/SITOTG/TG3_video/1,8516,ultimo_tg,00.html')"> <img class="img1" width="74" height="28" name="mod56" src="/SITITG/r2003/56k_no.gif" alt="modem a 56K"/> </a> Questo secondo esempio comanda invece la visualizzazione su una nuova finestra dell'ultima edizione del tg disponibile per modem a 56K.



Una soluzione sta nell'usare anche gestori di eventi come onfocus e onkeypress; la cosa migliore comunque sarebbe rendere le funzionalità in esame (apertura/chiusura del menu, attivazione di un link) disponibili anche senza Javascript. Impatto 3 Frequenza 1


Torna ad inizio sezione
Validazione dei campi

Effettuando un'esame del codice sorgente, è emerso che alla selezione del pulsante "vai", all'interno della form per utilizzare il motore di ricerca del sito, è associata una funzione Javascript che, qualora il browser non lo supporti, si comporta in modo bloccante impedendo il totale utilizzo della funzionalità. Questo porta ad un azzeramento totale dell'efficacia, e a un drastico crollo del livello di soddisfazione nell'utente, vista l'importanza della funzione di ricerca.

esempio di colore utilizzato in modo unico per trasmettere informazioni

Il codice associato alla form che attiva il motore di ricerca è il seguente:

<a title="Cerca" href="javascript:document.gs.submit();"> <img class="ButtonSearch" width="35" height="20" border="0" valign="bottom" alt="Cerca" src="http://www.banneradmin.rai.it/ads/barramenu/images/btn_vai_out.gif"/> </a>

Pe risolvere la problematica associata all'utilizzo di tale form con Javascript disabilitato è consigliabile evitare di effettuare valutazioni lato client, e operarle invece lato server, cosicchè Javascript non sia più necessario per utilizzare il search engine.



La soluzione è spostare il processo di validazione al lato server, per essere sicuri della bontà dei dati,e rendere l'uso di questa funzione Javascript non necessario per lo svolgimento delle proprie attività. Impatto 3 Frequenza 1


Torna ad inizio sezione
Nuove finestre

Sono presenti all'interno della homepage dei casi di apertura di nuove finestre mediante Javascript. In particolare si tratta di link che se attivati consentono la visualizzazione di nuovi filmati all'interno di nuove finestre. Se si utilizza un browser con Javascript disabilitato, come si ipotizza nel caso d'uso considerato, non sarà possibile utilizzare i link e quindi accedere ai contenuti. Una tale situazione non può che causare una diminuzione dell'efficacia, e un aumento di insoddisfazione nell'utente che desidera fruire di tali contenuti.


esempio di sovrapposizione di finestre

La videata mostra un esempio delle problematiche appena descritte. Il codice che comanda l'apertura della nuova finestra è il seguente:
<a class="conn" onmouseout="su_pul1()" onmouseover="over_pul1()" onclick="return true" href="javascript:apriVideo('/SITOTG/TG3_video/1,8516,ultimo_tg,00.html')"> <img class="img1" width="74" height="28" name="mod56" src="http://www.tg3.rai.it/SITITG/r2003/56k_no.gif" alt="modem a 56K"/> </a>

Esistono diverse alternative per risolvere tale problematica, ad esempio evitando di utilizzare Javascript per comandare l'apertura di nuove finestre e usando al suo posto l'attributo (deprecato) "target" all'interno del tag <a>. Si propone anche una proposta di codice per mettere in pratica quanto affermato:

<a href="/SITOTG/TG3_video/1,8516,ultimo_tg,00.html" target="_blank"><img...></a>.

Un'altra soluzione di facile implementazione sarebbe permettere di visualizzare il video sulla finestra originale del browser, senza dover ricorrere a finestre popup in Javascript.



Il rimedio sta nell'evitare l'apertura di nuove finestre, men che meno utilizzando Javascript; se proprio ènecessario, è opportuno notificare all'utente che l'attivazione del link causerà l'apertura di una nuova finestra, e comunque bisogna sempre dare all'utente la possibilità di chiudere la finestra così aperta. Impatto 3 Frequenza 1


Torna ad inizio sezione

Homepage della redazione economica

Menu dinamici in Javascript

Anche all'interno della homepage della redazione economica, come nel caso di altre pagine del sito di rai3 vi è l'uso di menu dinamici in Javascript, che in riposta al posizionamento del mouse sopra ad un elemento del menu, fanno comparire in modo dinamico il sottomenu corrispondente con tutte le scelte disponibili. Una scelta del genere se applicata al contesto d'uso non priva l'utente della possibilità di utilizzare il sito, dal momento che l'utente non ha bisogno di utilizzare il menu dinamico per la fruizione dei contenuti. Tuttavia se ipotizziamo che vi sia la necessità di utilizzare un link disponibile solamente attraverso il menu dinamico abbiamo un'azzeramento delle possibilià di portare a termine il compito, dal momento che il menu, con Javascript disabilitato, non è proprio visibile.

esempio di menu dinamico in Javascript

Dal momento che l'esempio di menu dinamico riportato in homepage è valido anche per questa pagina, si è deciso di includere un'ulteriore esempio, anche esso valido tanto in una quanto nell'altra pagina. Questo menu dinamico, realizzato in Javascript, consente all'utente del sito di disporre di una serie di collegamenti a siti di altri telegiornali, o di emittenti televisive. Tuttavia non è stata prevista, nè nella pagina in esame, nè nella homepage, nessuna modalità per accedere ai link se non attraverso il menu stesso.



La soluzione è rendere i link inclusi nel menu dinamico disponibili anche senza la necessità di avere Javascript abilitato sul proprio browser. Una possibilità, che viene anche addottata in parte all'interno della home page è utilizzare link ridondanti che siano accessibili senza che sia necessario avere un browser che supporti la tecnologia Javascript.

Impatto 1 Frequenza 1


Torna ad inizio sezione
Menu a cascata

Similmente a quanto rilevato per la pagina principale del sito, anche alcuni menu presenti all'interno della pagina in esame sono stati implementati come menu a cascata. Questa scelta, limitatamente al caso d'uso considerato, non genera inconvenienti gravi visto che i contenuti sono comunque fruibili. Se però si allarga la prospettiva e si considera l'eventualità di una necessità improvvisa di visitare, partendo dalla pagina in esame, una qualsiasi pagina che sia accessibile solo tramite i menu a cascata (rubriche del tg3 ad esempio), allora ci si imbatte in una barriera che causa una riduzione totale dell'efficacia e l'impossibilità da parte dell'utente, di portare a termine il task.

esempio di menu dinamico in Javascript

Per un approfondimento riguardo l'esempio proposto si rimanda all'analisi della Homepage svolta per questo caso d'uso, dove durante l'analisi della stessa barriera considerata qui, è stato approfondito lo stesso esempio. Per leggere l'approfondimento utilizzare il seguente link



E' necessario, per non incorrere in questo tipo di barriera, evitare di utilizzare menu a cascata, e scegliere invece soluzioni che prevedano menu separati, o eventualmente basati su radiobutton. In alternativa si può aggirare la barriera fornendo modalità d'accesso alternative alle pagine linkate dai menu a cascata, cosicchè l'utente non sia costretto a utilizzare la soluzione che fa uso di Javascript per raggiungere il proprio scopo.

Impatto 2 Frequenza 1


Torna ad inizio sezione
Eventi mouse

Anche durante l'esame della homepage della redazione economica è emerso l'utilizzo di gestori di eventi legati al mouse per coordinare l'esecuzione di azioni come la visualizzazione o l'occultamento dei menu dinamici (similmente a quanto avviene all'interno della pagina iniziale). Vale la pena evidenziare il fatto che per accedere all'archivio della redazione e al suo organigramma è stato utilizzato un gestore di eventi indipendente dal dispositivo, e ciò rappresenta una buona scelta visto che l'attivazione di tale elemento sarà indipendente dallo specifico dispositivo. Tuttavia permane il fatto che non è possibile accedere ai contenuti resi disponibili nelle modalità sopra elencate, e ciò causerà una riduzione totale dell'efficacia, se ad esempio l'utente del nostro use-case fosse interessata ad accedere all'archivio delle news della sezione economica.



Considerato che è già stato trattato l'esempio negativo dei menu dinamici resi visualizzabili mediante gestori di eventi dipendenti dal dispositivo, si è deciso di portare ad esempio la struttura di accesso all'archivio della redazione, che come detto in precedenza è indipendente dal dispositivo. La videata è la seguente:

buon esempio di gestori indipendenti dal dispositivo

mentre il codice che implementa la funzionalità è riportato di seguito:

<a href="javascript:apri('/SITOTG/TG3_popup_archivio/0,9481,29-id_rubrica,00.html')"> <img class="imago" width="41" height="16" src="/SITITG/r2003/vai_archi.gif" alt="Vai all'archivio dei titoli"/> </a> se invece di essere indipendente dal dispositivo, fosse stato associato all'evento "onclick", com'è stato fatto nel caso dell'apertura video in Homepage, il link non sarebbe stato utilizzabile a meno di non avere un mouse come periferica di puntamento.



La soluzione migliore consiste nel rendere i contenuti disponibili senza dover ricorrere a Javascript. Eventualmente, se ciò non fosse possibile, si può ricorrere a gestori di eventi indipendenti dal dispositivo.

Impatto 3 Frequenza 1


Torna ad inizio sezione
Validazione dei campi

Come rilevato in altri punti del sito, anche in questo caso, all'utilizzo della form di ricerca è associata una funzione Javascript che effettua una validazione lato client prima di inviare i dati al server. L'aspetto negativo di una scelta di questo tipo è che l'utente non potrà utilizzare la form qualora si trovi a navigare con un browser che non sopporti Javascript. Tutto ciò comporterà l'impossibilità da parte dell'utente di svolgere l'attività che si era preposto di fare, con conseguente crollo del livello di soddisfazione rispetto all'utilizzo del sito.



Non essendo presenti form con validazioni dei campi al di fuori di quella per usare il motore di ricerca, ed essendo già stata analizzata tale form durante l'analisi della Homepage, per ulteriori approfondimenti si invita a utilizzare il seguente link per visualizzare l'esempio riportato durante l'analisi di tale form.



Come soluzione si consiglia di evitare di utilizzare funzioni lato client per la validazione dei dati. E'preferibile spostare questo processo sul lato server, non rendendo quindi necessario Javascript per svolgere le proprie attività.

Impatto 3 Frequenza 1


Torna ad inizio sezione
Nuove finestre

All'interno della home page della redazione economica, se si esamina il link che permette di accedere all'archivio completo della redazione (si vedano le immagini per dettagli), si noterà che esso causa l'apertura di una nuova finestra con l'ausilio di Javascript. Se va riconosciuto il merito di aver utilizzato gestori di eventi indipendenti dal dispositivo (non è infatti necessario utilizzare il mouse per aprire la finestra), un utente che utilizzi il sito in un contesto disabilitante, come nel nostro caso di esempio, non potrà comunque accedere ai contenuti dal momento che l'apertura, anche se indipendente del dispositivo, utilizza in ogni caso una tecnologia non supportata dal browser dell'utente. Tutto ciò si riflette in modo negativo sulle possibilità di interazione che l'utente ha, pregiudicando, in questo caso specifico, l'accesso all'archivio delle notizie economiche.

esempio di apertura di nuove finestre

Per accedere all'archivio, causando l'apertura di una nuova finestra, è sufficiente utilizzare il pulsante "vai" visibile nella videata. Il codice html per realizzare tale funzionalità è il seguente:

<a href="javascript:apri('/SITOTG/TG3_popup_archivio/0,9481,29-id_rubrica,00.html')"> <img class="imago" width="41" height="16" src="/SITITG/r2003/vai_archi.gif" alt="Vai all'archivio dei titoli"/> </a>
Le soluzioni per affrontare questa problematica sono fondamentalmente due: una è progettare una nuova pagina, che venga visualizzata senza aprire nuove finestre, dove si rendono disponibili tutte le notizie presenti in archivio. Un'altra è modificare il codice riportato sopra, evitando di utilizzare Javascript e usando al suo posto, per l'apertura delle finestre, l'attributo "target", secondo le modalità che verranno descritte nel paragrafo seguente.



Il rimedio, in questo come in altri casi rilevati durante l'esame del sito, consiste nell'evitare di aprire nuove finestre, in modo particolare con Javascript. Si può ad esempio permettere all'utente di visualizzare il contenuto su un'altra pagina, che però viene aperta sempre all'interno della finestra di navigazione principale. Se proprio si sceglie come soluzione l'apertura di nuove finestre, si utilizzi l'attributo (deprecato) target (cui si possono assegnare i valori: _blank, _self, _parent, _top), se non si vogliono avere casi in cui il contenuto della nuova finestra non può essere visualizzato da chi utilizza browser Javascript-disabled.

Impatto 3 Frequenza 1


Torna ad inizio sezione
Tabella riassuntiva caso 4 - Homepage
 ImpattoFrequenzaGravità
Menu dinamici in Javascript11minore
Menu a cascata21serio
Eventi mouse31critico
Validazione dei campi31critico
Nuove finestre31critico


Tabella riassuntiva caso 4 - Homepage redazione economica
 ImpattoFrequenzaGravità
Menu dinamici in Javascript11minore
Menu a cascata21serio
Eventi mouse31critico
Validazione dei campi31critico
Nuove finestre31critico

Torna all'inizio