Analisi dei contenuti di un sito
riferimento: http://www.ancitel.it
data: 04.02.2004

Tipo di analisi:

Analisi della conformità WCAG AA di un sito. Scegliere un sito qualsiasi (meglio se di un'amministrazione pubblica italiana). Selezionare un insieme di pagine (non meno di 30 pagine, possibilmente tra quelle più importanti/visitate del sito). Analizzare tutte le pagine selezionate rispetto alle linee guida WCAG 1.0 livello AA, svolgendo un'analisi sistematica. Produrre un rapporto di conformità. NOTA: si può usare qualsiasi strumento si desideri. E' importante però che i risultati prodotti dallo strumento vengano interpretati ed arricchiti con considerazioni legate all'interpretazione del contenuto delle pagine.

Linea guida 1. Si deve fornire una descrizione (equivalente) testuale per ogni elemento diverso dal testo, per esempio usando "alt".

Home page:
www.ancitel.it

partendo dalla Home Page come intestazione della pagina principale viene usata un'immagine

screenshot della pagina screenshot del codice

non e’ presente una descrizione alternativa rispetto alle informazioni testuali/grafiche che si trovano sull’immagine;
in più la barra di navigazione generale è costruita su quell’immagine usando usando il MAP;

subito sotto l’intestazione si può notare che per la progettazione del layout vengono usate sempre delle tabelle

problema: un Vocal Browser legge tutti i table tag, cosa che dà molto fastidio alla percezione auditiva;
meglio usare div;

per l’organizzazione delle informazioni riguardanti le novità, viene usato un raggruppamento con un'etichetta per ogni novità, realizzate sempre tramite immagini
mancanza di descrizione alternativa (testuale);

screenshot della paginascreenshot del codice

un utente con browser testuale o vocale non capirà nulla sull’organizzazione delle informazioni che stanno in questa sezione;

per il Banner pubblicitario (che fa parte della organizzazione stessa che lo rappresenta) non c’e’ descrizione testuale

screenshot della pagina

qua sarebbe sufficiente riportare “testualmente” il titolo della campagna, evitando di descrivere lo scenario disegnato che non porta informazioni necessarie per comprendere il messaggio;

Flash: si nota che per “fruire” altri messaggi (non presenti in altre forme) è usata la tecnologia flash, senza descrizione testuale dell’animazione costruita

anche qua sarebbe sufficiente riportare solo l’informazione testuale che per se stessa descrive la destinazione del link;

Questo è un link di uno dei due oggetti Flash presenti sulla Home page:
http://www.ancitel.it/profiloanciteleng.cfm

il titolo della sezione è di solo testo, ma viene messo come una immagine senza riportare una descrizione alternativa

screenshot della pagina

soluzione: e’ sufficiente mettere nell' “alt” lo stesso testo;

sotto ognuna delle due immagini (foto) è riportato il nome della persona che è nella foto; questo va bene, ma non ci dice niente della presenza stessa della foto in un browser solo testuale o vocale
soluzione: deve esserci un “alt” per ognuna delle immagini;

http://www.ancitel.it/profilo_missionenew (/la proprietà)

bisogna sempre fornire un equivalente testuale per rappresentazioni grafiche di informazioni numeriche,
invece non è presente nessuna descrizione testuale;


screenshot della pagina

come soluzione si propone di elencare tutti gli elementi che si trovano nella lista a destra, in parallelo con il corrispondente numero, che si trova a sinistra;
questo renderà molto più efficaci i vocal/text browser;

http://www.ancitel.it/profilo_missionenew (/dove siamo)

fornire sempre descrizione molto accurata per le mappe, orientando/guidando l’utente tra oggetti già conosciuti da lui/lei;
esempio: nel caso peggiore dare una lista delle strade da prendere per arrivare alla destinazione partendo da un posto già ben noto per molti;

screenshot della pagina

http://netweb.ancitel.it/gdc/

l’errore con le rappresentazioni grafiche di testo continua;
manca una descrizione alternativa (il testo stesso);


screenshot della pagina

così è stato anche costruito un sottomenu, usando un’immagine e usando la tecnica del MAP, ma senza aggiungere il testo alternativo con l’ “alt” ad ogni zona definita della map;

screenshot della pagina

soluzioni:
riportare il testo del link sull’alt della zona della map;
eliminare altrimenti le immagini e mettere direttamente il testo che rappresentano;


Sulla stessa pagina vediamo:

screenshot della pagina

seguito da due link:
In Gazzetta Ufficiale (sintesi)
Sui Quotidiani Economici


ma senza “alt” di nuovo;

il caso peggiore di questo errore si trova forse sulla pagina
http://www.ancitel.it/miscom/misure.cfm


dove si trovano tabelle, riportate come immagini, (che sono quasi non percepibili anche da un browser grafico)

screenshot della pagina

le tabelle rappresentano informazioni che fanno parte degli scopi del sito;
si parla di informazioni tabellari e devono essere rappresentati in più modi possibili;
qua “normalmente” manca anche il testo descrittivo;
vanno usati th e thead con attributi scope per colonne e righe;
si immagina la situazione con Lynx o con uno Screen reader;


Chiudendo l’analisi per la Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo, possiamo dire che l’errore si ripete sulla maggior parte delle pagine facenti parte di questo sito.

Linea guida 2. Non fare affidamento sul solo colore.

sulla Home page abbiamo detto che l’informazione è organizzata in varie sezioni che sono delineate in vari modi costruendo il layout;
i progettisti hanno deciso che uno dei sottocontenuti del sito deve differenziarsi da tutti gli altri, cioè deve essere più visibile, deve catturare l’attenzione;
usando lo stesso font, la stessa grandezza e stile (cambiando solo il colore) hanno pensato di aver raggiunto l’obiettivo;

screenshot della pagina

problemi: sarà visualizzato su periferiche diverse (monitor in bianco e nero), sarà stampato in bianco e nero ;
problemi da parte dell’utente che non percepisce il colore in modo da differenziarlo abbastanza dagli altri (daltonismo);


Soluzione: mettere, al posto del solo il colore, il testo in grassetto, e usare font/grandezza/stile diverso (se si decide di usare del testo al posto di immagini si possono usare i tag EN o STRONG). Per risolvere il problema anche con il browser vocale/testuale si deve enfatizzare il testo descrittivo che si trova nell’ “alt”.

Sempre sulla Home Page si trova anche questo elenco di link:

screenshot della pagina

mettendo tutto in bianco e nero diventa indistinguibile la differenza riportata dal colore
Qua per esempio aiuta la posizione spaziale a comprendere meglio il messaggio, che la “MAP” e una sigla di “Mobile…” (si poteva però usare acronym), anche la barra “-“ fa il suo lavoro (delinea).


Comunque se lo scopo del colore era di portare l’attenzione dell’utente proprio a quel punto della pagina, quello scopo non viene raggiunto in un buon numero dei casi.

Ecco qua adesso un caso particolare:

screenshot della pagina

questo è il risultato di un monitor o stampa in bianco e nero.

Soluzione Possibile:
riportare le sigle/nomi nelle sezioni del cerchio;
riportare le informazioni numeriche anche a destra;
usare codici (numeri) per ogni sezione/entità


su http://netweb.ancitel.it/GDC/gdcancitel.cfm
si fa sempre affidamento solo sul colore

screenshot della pagina

nota: sempre su questa pagina si nota a destra una voce che lampeggia all’infinito; le animazioni in loop non si mettono perché distraggono l’attenzione, l’utente non può concentrarsi sul compito che sta svolgendo in qualche area di questa pagina (possono inoltre causare danni fisici come crisi epilettiche a chi ne soffre).

Un errore con solo l’uso del colore si ripete sulla pagina:
http://www.ancitel.it/miscom/misure.cfm

Il sistema di interrogazione consente di conoscere:
tutti gli indicatori, selezionando tutte le classi ;
gli indicatori di tutte le famiglie appartenenti ad una classe ;
solo determinati indicatori di una famiglia ;
gli insiemi di indicatori risultanti da tutte le possibili combinazioni fra classi e famiglie ;

Per accedere a quest'area bisogna avere installato il Java Plug-In. L'installazione è necessaria solo per il primo accesso. Per ulteriori informazioni sull'installazione del Java Plug-In clicca qui.

l’effetto non viene raggiunto ovunque;
nota: con un vocal browser non si "clicca". Non bisogna inlotre costringere un utente a scaricare del software per proseguire nelle sue operazioni, si perde tempo ed è poco sicuro (ricordarsi che la concorrenza sta ad un click);

Errori dello stesso tipo si trovano anche sulle pagine:
http://www.ancitel.it/profilo_proprieta
http://www.ancitel.it/registrazione/chiediinfo/
http://www.privacy.ancitel.it/testogarantenew
http://www.ancitel.it/ingleseincomune/index
http://netweb.ancitel.it/documentazione/index
http://netweb.ancitel.it/interpm/acipra/


Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato.

Creare documenti che facciano riferimento a grammatiche formali pubblicate. [Priorità 2]
Per esempio, includere all'inizio di un documento una dichiarazione sul tipo di documento che rimandi ad una DTD pubblicata (ad es. il DTD rigoroso di HTML 4.0).

Usare fogli di stile per controllare l'impaginazione e la presentazione. [Priorità 2]
Per esempio, usare la proprietà dei caratteri CSS invece che l'elemento HTML FONT per controllare gli stili dei caratteri.

es. sulla pagina http://www.ancitel.it/per_abbonarsi/per_abbonarsi.cfm
come su tutte le altre si trova:

screenshot del codice

La violazione più nota di questa linea guida in questo esempio (sito) è la tabella come strumento per l’organizzazione spaziale dell’informazione.
Le tabelle, usate in questo modo, presentano problemi per gli utenti con lettori di schermo (che leggono infatti in maniera lineare).

screenshot

Linea guida 5. Creare tabelle che si trasformino in maniera elegante.

Vediamo la tabella sulla pagina:
http://www.ancitel.it/s.base/bilancicomuni

screenshot della pagina

Non è fatta appropriatamente, ma è una delle poche che contengono dati che si possono considerare come tabulari.

La dimensione della tabella è fissa, allora la tabella non è flessibile rispetto al display.

Linea guida 6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante.

Una pagina del sito accessibile subito dalla home page è:
http://www.ancitel.it/sindaci/

screenshot della pagina

è un form da compilare che usa generalmente SCRIPT, e non esiste un’alternativa permessa;

questo è il codice della pagina:

screenshot del codice

lo script si trova anche su http://www.privacy.ancitel.it

dal WCAG "Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa".

Linea guida 7. Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo.

http://www.privacy.ancitel.it

dati scorrevoli, costruiti usando script:

screenshot del codice

Le informazioni scorrevoli sono cliccabili ma sul MouseOver non si fermano, allora l’interfaccia non permette all’utente di focalizzarsi, dedicare tempo o ispezionare/esplorare l’informazione meglio. Si deve specificare un evento MouseOver che li ferma.

Linea guida 10. Usare soluzioni provvisorie.

Sulla HomePage c’è un link come riferimento a eventi collegati con l’organizzazione.

screenshot della pagina

Si deve evitare l’uso di link che aprono una nuova finestra, la perdita temporanea di controllo dell’utente lo infastidisce.

Sempre sulla stessa pagina si trova un altro link: Tutela della Privacy che apre in una nuova finestra la pagina collegata.

Tutti i link della lista seguente hanno lo stesso difetto:

screenshot della pagina

Linea guida 11. Usare le tecnologie e le raccomandazioni del W3C.

Si devono usare sempre tecnologie del W3C (per es. HTML, CSS ecc.) perché il W3C è un consorzio che promuove tecnologie che se ben utilizzate migliorano la qualità, l’usabilità, l’accessibilità, … del sito.
Non usare le caratteristiche di tali tecnologie che sono deprecate. (es. quello di FONT).

http://netweb.ancitel.it/documentazione/index

screenshot del codice

Fornire sempre pagine alternative che tengano conto delle raccomandazioni del W3C.

Linea guida 12. Fornire informazioni per la contestualizzazione e l'orientamento.

Manca qualsiasi tipo di documentazione (ad esempio una F.A.Q.) che spieghi come risolvere certi problemi ai quali può arrivare un utente.

Linea guida 13. Fornire chiari meccanismi di navigazione.

screenshot della pagina

Si deve usare sempre sottolineato e colore blu per indicare un link, qui non si può capire che c’è un link a meno di passare sopra col mouse. Dopo una prova non-intuitiva, c’e un feedback su MouseOver.

screenshot della pagina

In generale su tutto il sito non è chiaro quali sono i link attivi e quali no.

La barra di navigazione principale, presente in ogni pagina del sito,

screenshot della pagina

è poco visibile, manca feedback di qualsiasi tipo (è presente solo quello che il browser utilizzato implementa per i link attivi).

Linea guida 14. Assicurarsi che i documenti siano chiari e semplici.

Ci sono troppe cose segnalate, con colore, font diverso, stile, ecc. come se fosse tutto importante da vedere subito all’entrata nel sito, tutte cose che concorrono fra loro per conquistare l’attenzione dell’utente ma che creano solo un senso di confusione causato da sovraccarico cognitivo.
In più, lo spazio non è usato correttamente, il sito non si adatta alle dimensioni dello schermo, e c’è troppo bianco ai lati, mentre le informazioni sono troppo vicine l’una con l’altra.

screenshot della pagina