Relazioni per il corso di Laboratorio Progettazione Siti Web
Autori: Luca de Ruvo, Henry Bonamigo

TG1 - Simulazione Euristica

Sommario

Metodologia

Per la simulazione sulle pagine abbiamo preso in esame la prospettiva di utilizzo del sito web della regione Puglia da parte di soggetti non vedenti utilizzatori di browser vocali (nella fattispecie Home Page Reader), ipovedenti che si appoggiano ad ingranditori di schermo e ad utilizzatori di browser testuali. Abbiamo deciso di classificare le barriere incontrate in livelli di gravità, che sono derivati dall'impatto e dalla frequenza della barriere stesse.
L'impatto varia tra i valori numerici 1 e 3, secondo i seguenti criteri:

  1. il problema può essere notato dall'utent, per lui è facile aggirarlo e non influisce sul raggiungimento degli obiettivi
  2. il problema è complicato da risolvere per l'utente, può richiedere molto tempo per essere aggirato e può impedire il raggiungimento dell'obiettivo
  3. il problema è impossibile da aggirare, l'impatto negativo comporta il mancato raggiungmento dello scopo

Anche la frequenza varia tra i valori 1 e 3, in questo modo:

  1. il problema non si manifesta sempre e può non incidere sullo svolgimento del compito
  2. il problema si presenta ogni volta durante lo svolgimento del compito incidendo sulla soddisfazione dell'utente
  3. il problema si verifica più di una volta mentre si svolge un compito facendo calare la produttività

Per calcolare i livelli di gravità siamo ricorsi a questa tabella:

impatto frequenza gravità
1,2,3 0 nessuna
1 1 bassa
1 2 bassa
1 3 media
2 1 media
2 2 media
2 3 alta
3 1 alta
3 2 alta
3 3 alta

E per finire abbiamo riassunto la gravità della barriere nei seguenti livelli:

  1. gravità bassa: l'utente può accorgersi della barriera nello svolgimento del suo compito e in questo caso è in grado di aggirarla e raggiungere completamente i suoi obiettivi
  2. gravità media: la barriera impedisce all'utente di raggiungere l'obiettivo con facilità; egli è costretto a spendere tempo per capire come aggirarla
  3. gravità alta: la barriera porta l'utente a compiere molti errori, che è frustrato perchè non riesce a portare a perseguire i suoi obiettivi

Pagine analizzate

Tabella riassuntiva delle barriere e dei problemi incontrati

Barriere alla Pecerzione

impatto frequenza gravità

Immagini ricche senza alt

Un utente non vedente di un lettore di schermo che non percepisce le informazioni presenti in un diagramma, istogramma, foto, organigramma. La causa è la mancanza di un'appropriato testo collegato all'immagine (alt, longdesc, D-link, testo adiacente all'immagine).

Nessuna immagine del sito è provvista di attributo alt!
3 3 alta

Immagini ricche mal posizionate

Utente ipovedente di un ingranditore di schermo che non vede l'immagine (diagramma, istogramma, foto, organigramma) perchè plausibilmente posizionata al di fuori del campo visivo. La causa è il cattivo posizionamento dell'immagine, senza nessun indizio che faccia capire la sua presenza.

Generalmente le immagini ricche di significato sono ben posizionate e visibili: tuttavia fa eccezione la pagina "organigramma", che crea problemi di consultazione a tutti i tipi di utenti in quanto non rende visibile l'intero schema e constringe l'utente a spostare continuamente la lente di ingrandimento negandogli una visione globale.
2 1 media

Immagini ricche incluse nello sfondo

Talvolta immagini vengono incluse nello sfondo della pagina mediante proprietà CSS. In tali casi non è possibile specificare testo alternativo, e lettori di schermo o browser vocali non permettono all'utente nemmeno di percepire la presenza di tale immagine.

3 0 nessuna

No didascalie

Utente sordo che non percepisce la narrazione a voce in un file multimediale. La causa è l'assenza di sottotitoli, didascalie o di una trascrizione completa.

Il sito offre diversi contenuti multimediali, come servizi, approfondimenti ed edizioni del telegiornale; tuttavia la corretta fruizione di questi è negata agli utenti non vedenti perchè non sono accompagnati da sottotitoli o didascalie.
2 3 alta

No sincronizzazione

Utente sordo che non percepisce la narrazione a voce in un file multimediale mentre il video scorre. La causa in questo caso può essere anche data dalla mancanza di appropriata sincronizzazione tra audio-video e trascrizioni testuali (sottotitoli, didascalie).

2 3 alta

Colore

Utente daltonico che è incapace di capire la differenza tra due elementi informativi che si differenziano solo dal colore (e.g. due righe di una tabella che riporta le quotazioni di azioni di borsa).

Fortunatamente i realizzatori del sito non hanno fatto affidamento solo sul colore per differenziare il tipo di informazioni.
2 0 nessuna

Contrasto

Utente ipovedente che non riesce a distinguere chiaramente le informazioni in primo piano dallo sfondo (perchè quest'ultimo è un'immagine o perchè il contrasto cromatico o luminoso tra i due componenti non è sufficiente).

3 0 nessuna

Frame

L'utente non vedente che utilizza una vecchia versione del lettore di schermo (es. Jaws 3.5) non riesce ad accedere al contenuto dei frame (se presenti nella pagina).

La pagina fa uso di un frame che racchiude le notizie posizionato al centro della pagina.
3 3 alta

Movimento

Titoli lampeggianti o oggetti in movimento possono non essere percepiti da utenti con problemi visivi (diversi da ipovedenti).

2 0 nessuna

Ascii art

Un utente cieco di un lettore di schermo che non capisce cosa significa la frase "uguale uguale parentesi angolare destra" pronunciata da un lettore di schermo a fronte del testo ==> trovato sulla pagina.

Diverse volte nel sito viene fatto uso del carattere ">", come per esempio: ">>> guarda la puntata" oppure "Istantanee di Mollica >>".
2 2 media

Titoli spaziati

Un utente cieco di un lettore di schermo che non comprende cosa significa la frase "bi e enne vi e enne u ti i" pronunciata dal lettore di schermo a fronte di un titolo nella pagina "B E N V E N U T I" formattato con spazi artificiali tra le lettere.

3 0 nessuna

Barriere all'Utilizzazione

impatto frequenza gravità

Immagini funzionali senza alt

Immagini funzionali (e.g. pulsanti) prive di ALT che non permettono ad un utente cieco di un lettore di schermo di sapere che link attivare. Analogamente per pulsanti Flash.

Le voci del menu' di sinistra e alcuni collegamenti che si trovano nella parte inferiore della pagina sono delle immagini senza attributo alt.

menusx

Come si può vedere dall'immagine, l'utente di lynx può capire - o meglio intuire - a cosa si riferisca il collegamento solo dal nome della relativa immagine; lo stesso problema si presenta agli utenti che usano un lettore di schermo rendendogli quasi impossibile una corretta navigazione.

3 3 alta

Link generici

Link con etichette non informative (e.g. "clicca qui") che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

3 0 nessuna

Link ambigui

Link con diversa destinazione che hanno la stessa etichetta (e.g. ripetizioni di link "Buy" per vari prodotti) che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

Nella home page è presente un link ad un video intitolato "guarda la puntata": un utente che utilizza la funzione link list non può capire a che cosa questo si riferisca. Anche l'utente di un lettore di schermo farebbe fatica a questo punto:

puntata
3 2 alta

Rollover in JavaScript

Rollover che aggiungono menù alla pagina. Essi non permettono ad un utente di un browser privo di interprete JavaScript (e.g. perchè JavaScript è stato disabilitato per motivi di sicurezza, o perchè si tratta di un micro-browser di palmare) di vedere il menù e quindi di attivarne i comandi.

3 0 nessuna

Modifiche dinamiche

Rollover che aggiungono menù alla pagina. Essi non permettono ad un utente ipovedente di un ingranditore di schermo di percepire la modifica al documento (perchè presumibilmente fuori dal suo campo visivo) e quindi di utilizzare i comandi del menù.

3 0 nessuna

Eventi mouse

Eventi JavaScript che si attivano solo tramite gestori di eventi dipendenti esclusivamente dal mouse. Un utente ipovedente di un ingranditore di schermo non potrà attivare dei menù a cascata: non appena scorre sul menù del primo livello e sceglie una voce che apre un menù di scondo livello, e deve scorrere verso destra lo schermo, il secondo menù scompare.

3 0 nessuna

Form popolata automaticamente

Form in cui alcuni dei campi/controlli sono automaticamente modificati da programma (via JavaScript). Ciò non permette ad un utente di un browser privo di interprete JavaScript di usare la form.

3 0 nessuna

Validazione controlli

Form in cui i valori immessi vengono validati esclusivamente dal browser (via JavaScript). Ciò può causare molto più facilmente delle immissioni di dati errati da parte dell'utente di un browser privo di interprete JavaScript.

2 0 nessuna

Form ampie

Form strutturate su una vasta area dello schermo possono creare problemi a utenti ipovedenti che non riescono a comprendere la struttura nella sua interezza.

2 0 nessuna

Campi nascosti in JavaScript

Similmente per form che usano JavaScript per calcolare dei valori di campi nascosti (ad es. per comunicare determinate informazioni di servizio al server, o per pseudo-sicurezza).

1 0 nessuna

Aggiornamenti e focus

Contenuti che vengono aggiornati automaticamente e modificano ogni volta il focus del lettore di schermo; questo rende difficile la navigazione di un utente non vedente che non riesce a raggiungere il contenuto che gli interessa (in quanto è obbligato a sentire sempre le stesse informazioni).

3 0 nessuna

Nuove finestre popup

Finestre pop-up che fanno sí che un utente cieco di un lettore di schermo non capisca che il contesto è cambiato, modificando sia il contenuto che viene letto sia i possibili comandi immettibili.

L'apertura di finestre pop-up avviene con l'apertura della pagina "organigramma" e con l'attivazione dei alcuni link relativi ai video.
3 3 alta

Finestre sovrapposte

Finestre pop-up che fanno sí che un utente ipovedente di un ingranditore di schermo non riconosca che la scroll bar che vede sia quella della finestra nello sfondo. Quando ci clicca sopra (con l'intenzione di scorrere il contenuto della finestra pop-up in primo piano), ottiene come risultato lo scambio delle due finestre e quella di pop-up, che l'utente stava esaminando, passa dietro, senza permettergli di capire cosa sia successo.

2 1 media

Lentezza finestre popup

Finestre pop-up che rallentano un utente con difficoltà motorie (perchè deve muovere il mouse sul pulsante, piccolo, di chiusura della finestra in alto a destra, nella barra del titolo). Ancora peggio se tali finestre si aprono ogni volta che si ritorna alla home page.

Il sito prevede la presenza di finestre pop-up e questo può sicuramente creare problemi agli utenti con difficoltà motorie.
2 3 alta

Form senza label

Controlli di una form privi di associazione con le loro etichette (i.e. mancanza di label/for), che fanno sí che un utente cieco di un lettore di schermo non capisca come usare alcuni dei controlli (e.g. perchè tutte le etichette vengono lette una dopo l'altra e poi segue la lettura di tutti i controlli, uno dopo l'altro -- nel caso di una form impaginata con una tabella il cui contenuto non si linearizza correttamente).

Nelle pagine del sito è presente una form di ricerca con un solo campo che è situato nella parte superiore della pagina: a questa mancano gli attributi label/for, il bottone che svolge la funzione di submit è un immagine senza attributo alt che segue il campo di testo.

ricerca
2 3 alta

Temporizzazioni troppo brevi

Form o comportamento del server tali per cui un utente che ci mette più tempo del previsto per svolgere una determinata azione (ad es. consultare una pagina e successivamente premere un pulsante "accetto") si trova nella situazione di non poter procedere perchè il sistema ha cambiato stato di propria iniziativa.

3 0 nessuna

Barriere alla Comprensione

impatto frequenza gravità

Tabelle dati

Tabelle dati (e.g. orari di autobus) non codificate appropriatamente (con TH, scope, headers) che non permettono ad un utente cieco di un lettore di schermo di navigare tra le celle delle tabelle in modo che gli venga ricordato il significato di ciascuna cella (leggendo anche le intestazioni della cella).


3 0 nessuna

Tabelle di impaginazione

Tabelle di impaginazione (gabbie grafiche) le quali, una volta che vengano linearizzate (cioè sostituite dal loro contenuto, togliendo la struttura a tabella, e procedendo dall'alto verso il basso, e da sinistra verso destra -- per noi occidentali), producono un ordine degli elementi che non è quello logico, e che quindi confonde l'utente di un lettore di schermo.

Il layout del sito si basa sull'uso di tabelle (invisibili), le quali non sembrano creare grossi problemi per gli utilizzatori di browser testuali o di lettori di schermo, nel senso che la pagina presentata mantiene comunque la struttura logica dell'originale.
2 2 media

Titoli

Pagine prive di titolo (o con titolo non informativo, come "Untitled document"), che fanno sí che utenti ciechi di lettori di schermo non capiscano su che pagina sono arrivati.

Tutte le pagine del sito hanno il titolo "Tg1", il che è equivalente al non aver nessun titolo perchè non comunica la pagina specifica in cui ci troviamo, ma informa soltanto che siamo all'interno del sito del Tg1.
3 3 alta

Lingua

In un sito privo dell'attributo lang, che specifica la lingua in cui il testo a scritto, un lettore di schermo utilizzato da utenti non vedenti non è in grado di risalire alla lingua a cui appartengono le parole incontrate, e quindi non sarà in grado di leggerle in modo corretto. Anche se il lettore è impostato per la lingua italiana, se incontra una parola straniera priva di attributi che ne specifichino la lingua, non la legge correttamente.

Nel codice html della pagina non è presente l'attributo lang e fortunatamente per gli utenti di lettori di schermo nelle pagine non compaiono termini in lingua straniera.
1 2 bassa

Titoli frame

Frame privi di un nome coerente con il loro contenuto fa sì che utenti non vedenti che utilizzano un lettore di schermo possano essere disorientati.

All'unico frame presente nella home page non è assegnato nessun nome: questo comporta il rischio che gli utenti non vengano mai a conoscenza che dentro di esso sono contenute le news.
2 2 media

Suddivisione in sezioni

Pagine contenenti molto materiale, magari eterogeneo (come ad es. barre di navigazione, indici, news, ...) e prive di una loro suddivisione esplicita in gruppi usando i marcatori H2, fieldset, ... rendono complessa la loro consultazione. Un utente di un lettore di schermo potrebbe non rendersi conto di essere in una sezione non interessante. Questo è particolarmente grave quando l'utente esplora la pagina per cercare una determinata informazione.

3 0 nessuna

Immagini come titoli, non comprensibili

Talora è possibile vedere pagine web che usano immagini per presentare titoli di sezioni della pagina. Un utente di un lettore di schermo non potrà capire quel titolo a meno che l'immagine non sia corredata di testo alternativo nell'attributo ALT.

2 0 nessuna

Immagini come titoli, non ingrandibili

Utente ipovedente non potrà ingrandire il testo del titolo che è codificato come un'immagine (quindi rappresentato come dei pixel); egli dovrà per forza usare un ingranditore di schermo per poterla ingrandire, con la conseguenza di ridurre il suo campo visivo, e quindi l'efficacia e l'efficienza con cui usa il sito web.

E' il caso delle voci del menu di sinistra e dei titoli dei riquadri nella home page che sono immagini non ingrandibili.
1 3 media

Barriere al Controllo da parte degli Utenti

impatto frequenza  

Access key

Mancanza di tasti rapidi (access key) che fanno sí che disabili motori non possano attivare certi link in maniera rapida e sicura.

2 3 alta

Troppi link

Troppi link nella pagina, che fanno sí che utenti ipovedenti di un ingranditore di schermo impieghino tanto tempo e fatica a trovare il link che cercano.

E' il caso della home page nella quale sono presenti molti link, sparsi in tutte le zone dello schermo.
3 2 alta

Testo non ridimensionabile

Testo che non è ridimensionabile, che non permette ad un utente ipovedente di usare la pagina anche senza ingranditore di schermo.

3 0 nessuna

Layout non ridimensionabile

Layout della pagina non ridimensionabile, che non permette ad un utente ipovedente di un ingranditore di schermo di incrementare la dimensione della finestra o del testo senza scompaginare l'impaginazione in maniera tale da comprometterne la comprensione.

Ingrandendo il teso la dimensione della pagine e delle colonne di impaginazione rimane invariata.
2 3 alta

Skip links

Mancanza di skip links nascosti che fanno sí che utenti non vedenti di lettori di schermo non possano velocemente saltare il materiale preliminare di una pagina.

La mancanza di queste scorciatoie obbliga gli untenti ciechi ad ascoltare sempre una ventina di link prima di giungere al contenuto vero e proprio della pagina.
3 3 alta

Versione solo testo

La versione testuale del sito non aggiornata e non contenente tutte le informazioni disponibili nella versione grafica può portare gli utenti che, per vari motivi hanno deciso di utilizzarla, a credere che il sito sia carente di contenuto.

Gli utilizzatori di browser testuali per forza di cose non possono fruire dei contenuti multimediali, che formano la gran parte del contenuto del sito.
1 3 media

Controlli del browser disabilitati

Le finestre che vengono aperte dal browser (non per iniziativa dell'utente) e che sono prive degli usuali controlli, come il tasto "indietro", "ricarica", "home", barra dell'URL, rende più difficile e faticosa la ricerca del link "indietro" da parte di un utente di ingranditore di schermo, il quale si trova costretto ad esplorare tutta la finestra per trovarlo.

Attivando un link relativo ad un video, il risultato è l'apertura di una nuova finestra pop-up priva di controlli o di barra degli indirizzi. Una volta terminata la visione del video l'utente per proseguire è costretto a chiudere la finestra con l'apposita icona del browser posta sulla barra del titolo.
2 3 alta

Conclusioni

I progettisti del sito web del Tg1 hanno deciso di incentrare il contenuto su contributi multimediali: nella fattispecie edizioni del telegiornale o video di servizi realizzati dal Tg1.
La conseguenza di questa scelta è che il sito non è accessibile ed usabile da utenti non vedenti che sfruttano tecnologie assistive come lettori di schermo e nemmeno da utulizzatori di browser testuali o non udenti in quanto i filmati non sono accompagnati nè da didascalie nè da sottotitoli.
Per ragioni di presentazione i titoli del menù principale posto sulla sinistra della pagina sono costituiti da immagini che sono prive di descrizione testuale alternativa, il che provoca due conseguenze: come prima cosa crea frustazione negli utenti di lettore di schermo e di browser testuali perchè questi sono costretti ad immaginare a cosa si riferisca il collegamento in quanto possono conoscere solo il nome del file immagine relativo alla voce del menu e come seconda inibisce l'ingrandimento del testo del menu ad opera di utenti ipovedenti.
Inoltre la corretta navigazione è impedita anche agli utenti che usano browser senza il supporto javascript.
Bisogna dire che il sito web in questione risulta di difficile comprensione anche per utenti non disabili in quanto si basa su un architettura poco chiara ed, eccezion fatta per i filmati, il contenuto è veramente povero di indormazioni.

validxhtmlvalidcss