Valutazione Accessibilità del sito www.friulcassa.it secondo le linee guida WCAG 1.0

2. Analisi dell'Accessibilità con TORQUEMADA

2.1 LINEE GUIDA

Le pagine esaminate - una trentina - rappresentano un campione sufficiente per analizzare le diverse tipologie di layout e contenuti presentati nel sito. Qui sotto descriviamo per alcune delle pagine prese in esame le problematiche riscontrate, sottolineando i problemi per i quali si distinguono.

Torna Su

2.2 HOME PAGE

La pagina della home raccoglie tutti gli elementi fondamentali del sito.
Costruita su di uno schema lineare, la struttura della pagina si suddivide in fasce orizzontali.
A partire dalla parte superiore si trovano il logo della banca, il menu di navigazione principale, una fascia di immagine e il corpo del testo dove compaiono le informazioni, suddiviso anch'esso a sua volta in colonne per organizzare i contenuti. Infine compaiono una sottile fascia contenente un ulteriore menu di navigazione e una form per i contatti.

Torna Su

2.3 PROFILO

2.3.1 Il Bilancio

[Priority 1]
Elemento TABLE

no ] In questa pagina compare una tabella di esposizione di dati per la quale sono totalmente assenti informazioni sui tipi di dati riportati, sulla corrispondenza tra colonne e righe e i loro contenuti. Browser vocali non possono in questo modo consentire la fruizione ottimale dei dati della tabella (Linea: 250).

SUGGERIMENTO ] ES: <TH id="data termine">al 31/12/02</TH> <TH id="data termine">al 31/12/01</TH>

[priority 2]
Elemento P

Il sistema ritiene necessario che ogni paragrafo sia accompagnato da header, cioè rientri nella gerarchia della pagina.
In questo caso il paragrafo viene usato erroneamente all'interno di una cella della tabella, come elemento aggiuntivo per scopi di layout e non di organizzazione del testo. La base di dati dalla quale viene costituita la tabella genera automaticamente le celle in questa forma (< td >< p></p></td>), l'errore quindi si ripete per ogni cella creata.

2.3.2 LeNostreFiliali

[Priority 1]
Elemento AREA IMAGE MAP

La pagina presenta le filiali del gruppo attraverso l'immagine della cartina geografica della regione. Quest'immagine rappresenta una mappa contenente per ogni provincia dei links grafici. Come per le immagini le linee guida suggeriscono di aggiungere link testuali. Un'eventuale errore nel caricamento dell'immagine impedirebbe l'accesso alle informazioni fornite attraverso i link della mappa.

[priority 1]: Text equivalents for client-side image maps. Il link dovrebbe mantenere il suo senso anche fuori dal contesto grafico della lettura - ALT per i tag area che definiscono le aree sensibili delle immagini

Elemento: AREA
Attributo: Alt

no ] Attributo ALT dell'elemento AREA non valido (devono essere sempre fornite equivalenti informazioni in modalita' testuale) Linee: (88, 90, 92, 94, 96, 98)

SUGGERIMENTO ]

Es: linea 90
< area coords="18, 293, 77, 311" shape="rect" alt="Provincia di Treviso" href="http://www.friulcassa.it/go.urd/portal.show?c=88/portal.show?c=179"> </area>

Elemento: IMG, INPUT

no ] Dovrebbero essere forniti links testuali equivalenti a quelli presenti nella mappa di immagini lato client (Linea: 101)

[Priority 3]

La mappa, rappresentata dall'immagine, contiene link interni che non possono essere individuati senza script. La loro disabilitazione o non implementazione quindi impedisce l'accesso all'informazione fornita tramite quei links.

Elemento TABLE

Anche questa pagina presenta le stesse problematiche di gestione e implementazione della tabella riassuntiva dei links ai dati delle filiali della provincia selezionata. (cfr. Sezione accessibilita 2.3.1).

Pagina interna collegata

Elemento TABLE

Compare una tabella di dati (dati delle filiali scelte) Linea: 130

(cfr. Sezione accessibilita 2.3.1).

Elemento P

La generazioni dinamica dei dati della tabella mantiene i problemi trattati in precedenza per l'uso dei paragrafi.

(cfr. Sezione accessibilita 2.3.1).

Torna Su

2.4 PRODOTTI

[Priority 2]
Elemento A
Attributo TITLE

Molti links interni alla pagina dovrebbero contenere informazione testuale aggiuntiva che specifichi la loro funzione. Essi producono l'aggiornamento del contenuto informativo nella parte centrale del corpo del testo. A causa dell'assenza di elementi di riferimento della posizione dell'utente all'interno della sezione, può capitare di pensare che il link non sia attivo se essi indirizzano la stessa pagina in cui ci si trova.

SUGGERIMENTO ] Aggiungere un TITLE significativo e che richiami anche effettivamente il titolo della sezione cui collega potrebbe aiutare l'utente a chiarire lo scopo di ogni link, anche relativamente al contesto della pagina caricata.

2.4.1 BancaFacile24

[Priority 1]
Elementi A,IMG

Il menu laterale nel corpo della pagina offre cinque link grafici con corrispondenti link testuali. Oltre a questi, il link della pagina radice viene fornito solo attraverso un link grafico. Avendo una dimensione differente rispetto agli altri e non avendo un link testuale corrispondente potrebbe non venir percepito come collegamento.
Nel sito non viene implementato in alcun modo un servizio per fornire all'utente la sua locazione durante la navigazione. Dovrebbero essere disattivati i links che ridirigono alla pagina in cui l'utente si trova.

SUGGERIMENTO ] A fianco ad ogni link espresso tramite un'immagine inserire un link testuale corrispondente e specificare l'attributo alt dell'immagine. I links dovrebbero seguire le specifiche di usabilità per essere individuati con facilità.

2.4.2 Trading24

Elemento A

La maggior parte dei problemi che presenta questa pagina si concentrano sull'implementazione dei link.
Nel menu laterale compaiono (inutilmente) due immagini che, senza l'aggiunta di link testuali, rischiano di non essere percepiti come link.
Allo stesso modo l'immagine centrale nella pagina rappresenta un collegamento alla versione demo (non attivo) del servizio esposto nella pagina, ma senza prima passarci sopra con il mouse non viene percepita come link.
Compaiono all'interno del paragrafo ulteriori link testuali che rischiano anch'essi di essere ignorati perchè non considerati testo attivo, seppur un effetto grafico è stato ricercato. Potrebbe essere quindi impossibile accedere ad alcune delle aree interne. (LINK al Manuale Utente e al plug-in per Acrobat Reader)

[priority 2]
P usato come organizzatore del layout e non per strutturare testo

SUGGERIMENTO ] Descrivere per ogni immagine un attributo ALT, fornire al link grafico alla demo almeno un commento testuale che oltre a farlo sembrare attivo ne fornisca anche la direzione e mantenere le specifiche di Usabilità per garantire che i link testuali all'interno di un testo possano essere chiaramente percepiti come tali.

2.4.3 TornaConto

Coerenza: qui come in molte altre pagine si delinea uno dei differenti e molto variabili layout scelti in questo sito.

[Priority 1]
Elemento IMG Attributo ALT

Anche in questa sezione rimane il problema delle descrizioni delle immagini; in questo caso particolare queste vengono utilizzate come illustrazioni e cornice, invece che, come nelle altre pagine, soprattutto per i link. Per questo la presenza di una descrizione dell'immagine aiuta a specificarne la funzione e a garantire che anche persone impossibilitate a fruire delle informazioni portate da quelle immagini, possano riceverle con un commento testuale. Problemi potrebbero riscontrarli allo stesso modo persone non abituate allo specifico codice di simboli con cui le izmmagini ricercano il loro scopo. Anche una descrizione attraverso l'attributo longdesc sarebbe stata opportuna.

2.4.4 Bankpass

Coerenza: Il layout presentato è poco efficace, pur mantenendo la simmetria con alcune delle altre pagine del sito. Viene introdotto, oltre al menu laterale, un menu sopra il contenuto testuale. Sotto a questo menu di navigazione, visivamente poco efficace, compaiono le immagini dei loghi delle carte di credito gestite che in un primo momento potrebbero sembrare link attivi e che invece rappresentano un semplice elenco. Le descrizioni non compaiono.

PROBLEMI CON LINK:
riga 345 e-Committee un link è poco appariscente e apre una finestra di pop up di cui l'utente non è a conoscenza e che collega ad un sito esterno.

Diversamente sono gestiti altri due link all'interno della pagina (in fondo al testo): poco visibili in quanto il contrasto rispetto al resto del testo non è sufficiente (nero su blu) passandoci sopra però si colorano di verde (verde crup) acquisendo maggiore visibilità per l'effetto di mouseover.
Il suggerimento rimane quello di adottare la grafica standard per i link testuali.

[Priority 2]

Non provocare l'apertura di finestre di pop up senza che l'utente ne sia informato
Viene aperta una finestra di pop up per accedere a quasi tutte le pagine a cui indirizzano i collegamenti.

2.4.5 Conto Tondo

Elemento AREA. (cfr. Sezione accessibilita 2.3.2).

Esempio di possibile attributo ALT:
95<area href="http://www.friulcassa.it/go.urd/portal.show?c=35/javascript:pagina(58)" coords="470,140,605,170" shape="RECT" alt="Benefit parabancari e assicurativi" >
96</area>

[Priority 3]

LINEA 102
fornire link testuali equivalenti a quelli presenti sulla mappa di immagine lato client
Esempio: aggiungere un menu testuale a lato o in basso
linea 102
... alt="immagine del pacchetto Conto Tondo con collegamenti"...>

2.4.6 AgriCrup

Cambia un'altra volta il layout generico per uno con immagini e scritte (rosso nero e grassetto) per evidenziare i concetti. Non ci sono link nascosti all'interno del testo, tutti i cambiamenti di colore del testo hanno puro scopo informativo.

Commenti sulla scelta dei colori: introdotto l'arancione come sfondo per aree di testo per evidenziare i titoli dei paragrafi.

[Priority 1]

ok ] DON'T RELY ON COLOR ALONE

Viene richiesto che le informazioni fornite attraverso scelte diverse di colori possano essere distinte anche senza supporto del colore e quindi in bianco e nero. In effetti l'uso di parole e frasi in grassetto oltre che in colore riesce a mantenere la loro efficacia espressiva anche in questi casi.

Torna Su

2.5 SERVIZI

2.5.1 Mutuo Casa

[Priority 1] Oltre ai problemi generali fino a qui riscontrati, i links interni del testo compaiono solo sul fondo della pagina, quindi per individuarli è necessario usare molto lo scroll. Sarebbe opportuno spostarlo nella parte superiore della pagina, sia per renderlo più visibile, che per facilitare l'accesso a chi conosce già il sito.

2.5.2 Carte di credito

Il layout è simile ad altre pagine, ma ancora non c'è uno standard. Il testo quasi manca di impaginazione.

[Priority 2]

Use header elements to convey document structure and use them according to specification

Per quanto riguarda l'organizzazione a livello di codice html tutto il testo viene organizzato in paragrafi senza identificare una gerarchia dei contenuti. La struttura del testo emerge solo visualmente con sezioni e sottosezioni. L'uso di elementi quali titoli h1,h2... offrirebbero lo stesso effetto grafico e sarebbero meglio gestibili anche da browser non grafici.
Dovrebbero infatti essere i css ad occuparsi degli effetti grafici, non l'uso di attributi font nel testo dei paragrafi.

Torna Su


Nazzi Elena - Francesco Zanitti ( maggio 2004 )