Simulazione euristica guidata da barriere

Ultimo aggiornamento: 18 Febbraio 2011

Titolo e autori

Simulazione euristica guidata da barriere rispetto a "Barrier Walkthrough Heuristic evaluation guided by accessibility barriers" ( barrier walkthrough method ) del sito www.beppegrillo.it/movimento .

Il gruppo è composto da:

Data di inizio stesura del rapporto: 12 Gennaio 2011.

Introduzione

Metodo utilizzato

Per la stesura di questo rapporto sono state seguite le linee guida presenti nel rapporto denominato "Simulazione euristica guidata da barriere per la verifica dell'accessibilità", reperibile in inglese alla seguente pagina web: barrier walkthrough method .

Tale metodo è utile a verificare l'accessibilità di un sito, ed è costituito da un elenco di barriere di accessibilità. Il valutatore verifica, per ogni pagina del sito in analisi, quali delle barriere sono presenti. Per barriera di accessibilità, si intende qualunque impedimento per l'utente con qualche disabilità, temporanea o permanente, nel suo percorso di attività che lo portano all'obiettivo finale, e che utilizza un qualche tipo di tecnologia (assistiva o altro).

Una barriera ha i seguenti parametri di descrizione:

  • tipo di utente e disabilità;
  • tipo di tecnologia assistiva utilizzata;
  • attività che viene ostacolata dalla barriera (fallimento);
  • caratteristiche della/e pagina/e che erigono lo barriera.

Le barriere elencate nel corso di questa relazione derivano dall'interpretazione di principi di accessibilità inseriti all'interno di un contesto di uno scenario generico. Le possibili tipologie di utente da considerare per questo lavoro di analisi sono le seguenti:

  • Utenti non vedenti : utenti di lettori di schermo o di browser parlanti; utenti di barre Braille; tipicamente ciechi, talvolta ipovedenti. Questa categoria potrebbe includere anche utenti vedenti ma costretti ad usare qualche tecnologia disabilitante: browser che non visualizzano immagini, portali vocali.
  • Utenti ipovedenti : utenti ipovedenti di ingranditori di schermo; talvolta utenti degli strumenti di accessibilità offerti direttamente dal sistema operativo. Questa categoria potrebbe includere anche utenti disabilitati da tecnologie quali cellulari e PDA con schermi ridotti, con una ridotta possibilità di interagire.
  • Utenti non udenti : persone non udenti o con gravi difetti di udito. La categoria potrebbe includere anche utenti costretti ad usare il sito in situazioni in cui l'audio non può essere sentito (ad es. in una sala lettura, durante una conferenza).
  • Utenti daltonici : persone daltoniche (che non usano alcuna tecnologia assistiva). La categoria potrebbe includere anche utenti che usano dispositivi dotati di schermi a bassa qualità, o monocromatici.
  • Utenti disabili motori : persone con menomazioni fisiche per le quali l'uso del web può essere influenzato dalla mancanza di controllo muscolare o nervoso delle braccia e mani, da tremore o dalla mancanza di agilità delle dita e delle mani. La categoria potrebbe includere persone solo temporaneamente disabili (ad es. con il braccio in gesso), oppure persone che usano il sito in posizioni inusuali (ad es. durante una presentazione in pubblico, sul podio in piedi).
  • Utenti disabili cognitivi : persone con abilità limitata di elaborare e ricordare informazioni, prendere decisioni o apprendere; includono disabili nell'apprendere (dislessici o disgrafici), con disturbi nell'attenzione, con disabilità nella crescita (es. autismo, Down) o con disturbi neurologici (es. Alzheimer). Questa categoria potrebbe includere anche persone che usano il sito sotto stress (ad es. con fretta in un ambiente rumoroso e pieno di distrazioni, o durante la guida di un'automobile). Inoltre la categoria può includere anche visitatori del sito di una lingua straniera.
  • Utenti di browser senza Javascript : utenti di browser o sistemi che non sono in grado di elaborare istruzioni JavaScript. Ad es. microbrowser a bordo di telefonini o PDA; ad es. utenti di sistemi proxy, gateway o transcoder. Anche agenti artificiali, come gli spider dei motori di ricerca, o i sistemi di test automatizzati, si trovano nella situazione di non poter elaborare istruzioni JavaScript.
  • Utenti con epilessia fotosensibile : utenti che hanno un'epilessia fotosensibile, per i quali le crisi epilettiche sono scatenate da sfarfallio o luce lampeggiante. Solo il 5 per cento delle persone con epilessia possono avere epilessia fotosensibile. Maggiori dettagli possono essere letti su www.epilepsy.org.uk.
  • Motori di ricerca : ovviamente, questi sono utenti molto differenti! In molti casi, però, gli spider dei motori di ricerca si scontrano sullo stesso tipo di barriere che si trovano di fronte gli esseri umani.

Procedimento

Inizialmente è stata scelta una categoria di utenti tra quelle citate. Sulla base di questa categoria, è stato quindi selezionato l'elenco delle possibili barriere da rilevare. Si è stabilito uno scenario d'uso del sito, e le pagine del sito che dovevano essere analizzate. Successivamente, i valutatori hanno analizzato ogni pagina tra quelle stabilite, ricercando al suo interno le barriere dell'elenco selezionato. In caso di rilevazione di una barriera, ne hanno misurato l'impatto e la frequenza. Per ogni barriera sono stati confrontati i risultati derivati dall'analisi, al fine di giungere ad un livello di impatto e frequenza condiviso tra i valutatori. Infine, è stato stabilito il livello di gravità per tutte le barriere rilevate.

Livelli di gravità

Il livello di gravità di una barriera viene stabilito valutando principalmente due parametri, che avranno un valore tra 1 e 3: l'impatto su efficacia, produttività e sicurezza, e la frequenza con la quale essa si presenta. Questi due parametri vengono messi in relazione grazie alla tabella presente nelle linee guida, da cui verrà ricavato un solo valore che indicherà la gravità della barriera. Il livello di gravità potrà avere 3 livelli: minore, serio, critico.

Tabella 1: Tabella per calcolare la gravità di un difetto
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

I valori dell'impatto sono stati assegnati utilizzando i seguenti criteri:

  1. la presenza del problema viene notata dall'utente considerato, ma ci sono facili modi per aggirarla od evitarla. Esso non incide significativamente sulle capacità dell'utente di raggiungere con successo il termine del compito. Può invece incidere sull'efficienza con cui l'utente svolge il compito e/o sulla sua soddisfazione.
  2. la presenza del problema è notata ed incide significativamente sull'efficacia e/o sicurezza. L'utente non riesce ad aggirarlo facilmente, o ad evitarlo. Per uscire dalla situazione problematica l'utente può necessitare di notevole tempo, vari tentativi e ingegno. Il problema rende difficile, faticoso e/o rischioso il proseguimento del compito, ed è facile che l'utente compia degli errori. Il problema incide sicuramente e marcatamente su efficacia e/o sicurezza.
  3. si tratta di una barriera che porta molto spesso 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.

I valori della frequenza (numero di volte che appare la barriera in questione durante il compito) sono invece stati assegnati in base a questi criteri:

  1. il problema si manifesta raramente e non sempre durante lo svolgimento del compito; in pochi e marginali casi esso si manifesta. Dunque esso incide in maniera molto limitata sulla produttività e sulla soddisfazione.
  2. il problema si verifica ogni volta che si svolge quel compito. Può incidere significativamente su produttività e su soddisfazione.
  3. il problema si verifica più volte durante lo svolgimento del compito. Sicuramente incide sulla produttività, facendola calare marcatamente; e altrettanto di sicuro incide sulla soddisfazione.

Sempre seguendo le linee guida presenti in barrier walkthrough method , è stato tenuto conto del livello di conoscenza ed esperienza che l'utente considerato possedeva, sia relativamente all'uso di Internet e relativa tecnologia relativamente all'uso del sito, durante l'assegnamento dei livelli di impatto.

Strumenti utilizzati

Per la produzione di questo rapporto sono stati utilizzati i seguenti strumenti:

Perimetro dell'indagine

Primo caso d'uso: utenti non vedenti

Profilo Utente

Il signor Carlo, un ex operaio di 55 anni, è stato colpito da una forma di glaucoma che lo ha gradualmente portato ad una cecità totale. A Firenze, città in cui vive, esso riscontra molte barriere architettoniche, che gli impediscono l'accesso a svariati servizi.

Scenario

Carlo, parlando con amici, scopre l'esistenza del sito "Movimento 5 Stelle", che promuove liste di candidati a cariche governative di molte città; vuole verificare la presenza di candidati nella sua città, con una particolare sensibilità nei confronti della sua situazione di disabile. Per navigare sul web utilizza un software di sintetizzazione vocale.

Categoria Utente considerata

Utenti non vedenti

Pagine analizzate
Periodo di tempo dell'analisi

Dal 12 gennaio 2011 al 7 febbraio 2011.

E' stato scelto di analizzare queste pagine, in relazione al compito che l'utente si è prefissato: a partire dalla Home page , l'utente deve ricercare la pagina con l'elenco delle liste di candidati ; a questo punto, localizzata la sua città, che in questo caso poniamo essere Firenze, deve accedere alla pagina delle liste della città di Firenze . In questa pagina, se interessato, può accedere alla pagina di un candidato di Firenze . Nel caso in cui l'utente abbia quindi bisogno di chiarificazioni riguardo a qualche contenuto, può accedere alla pagina "Contattaci" del sito, ed eventualmente può iscriversi al sito stesso per rimanere aggiornato, accedendo alla pagina di iscrizione .

Secondo caso d'uso: utenti daltonici

Profilo Utente

Gianni è uno studente universitario di 22 anni interessato alla politica, grande estimatore di Beppe Grillo.

Scenario

Gianni, frequentatore abituale del sito "Movimento a 5 Stelle", ha deciso di consultarlo per leggere gli ultimi articoli inseriti, con particolare attenzione ai temi discussi sul forum del sito. Lo schermo del suo computer, ormai datato, non permette di visualizzare bene i colori del sito.

Categoria Utente considerata

Utenti daltonici

Pagine analizzate
Periodo di tempo dell'analisi

Dal 12 gennaio 2011 al 7 febbraio 2011.

Le pagine sono state scelte rispetto al compito prefissato dall'utente: a partire dalla Home page , l'utente entra nella pagina del Forum , dove trova il link che lo fa accedere a un articolo specifico .

Terzo caso d'uso: utenti non udenti

Profilo Utente

Luigi è un impiegato in una piccola azienda manufatturiera di Bolzano. La sua casa si trova vicino agli argini del torrente Talvera, una zona amata dalla cittadinanza per via del viale alberato che costeggia il torrente.

Scenario

Nell'ultimo periodo l'ambiente delle passeggiate del Talvera è stato sconvolto da una serie di lavori, che prevedevano la costruzione di garages interrati, e che hanno ridotto il tratto alberato che rendeva così godibile la zona. Luigi sa che la lista civica 5 stelle si è mossa, e vuole leggere l'articolo che ha pubblicato sulla propria pagina del sito "Movimento 5 Stelle". Luigi si trova a lavoro, dove il suo computer ha le casse audio disattivate per non disturbare i colleghi.

Categoria Utente considerata

Utenti non udenti

Pagine analizzate
Periodo di tempo dell'analisi

Dal 12 gennaio 2011 al 7 febbraio 2011.

Le pagine sono state scelte rispetto al compito prefissato dall'utente: a partire dalla Home page , l'utente entra nella pagina con l'elenco delle liste di candidati , dove trova il link che lo fa accedere alla pagina delle liste della città di Bolzano .

Sommario risultati

Primo caso d'uso: utenti non vedenti

Per quanto riguarda questa categoria di utenti, il sito presenta un notevole numero di barriere. Vengono di seguito elencate le più gravi:

  • Marcatura della lingua
  • Mappe di immagini prive di testo
  • Mancanza di didascalie del video
  • Tabelle dati senza relazioni strutturali
  • Mancanza di tasti rapidi
  • Skip links
  • Pagine senza titoli
  • Form senza LABEL

Molte di queste barriere, come la marcatura della lingua errata, o la mancanza di didascalie nei video, penalizzano fortemente il lavoro del lettore di schermo, principale strumento assistivo utilizzato dai non vedenti nella fruizione dei siti web. Altre, come la mancanza di tasti rapidi e di Skip links impediscono agli utenti di essere produttivi quanto desiderano. Di conseguenza un utente non vedente potrebbe rinunciare alla consultazione di questo sito.

C'è da dire che la maggior parte delle barriere gravi rilevate potrebbero essere soppresse con ristrutturazioni davvero minime del sito in questione, raggiungendo quindi un livello di accessibilità più accettabile, che potrebbe portare nuovi utenti al suo utilizzo.

Documenti in formato PDF

Riportiamo inoltre il problema relativo ai documenti in formato PDF inseriti all'interno del sito in questione. Nel menu presente nell'header della pagina, sono presenti due link,"Programma" e "Non-Statuto", che indirizzano ad un documento in formato PDF.

I documenti in formato PDF non rientrano nella Guideline 1.1 del WCAG 2.0, dato che il contenuto dei documenti "Programma" e "Non-Statuto" hanno un contenuto testuale. Tuttavia l'accessibilità dei documenti in formato PDF segue delle proprie linee guida, come l'utilizzo di tag simili a quelli dell'HTML, ed è stato verificato che questi documenti non utilizzano tali tag (tramite la funzionalità "Accessibility Quick Check" di Adobe Reader 8). In particolare consideriamo le seguenti condizioni di utilizzo:

  • Persone che non sono in grado di installare il software Acrobat Reader.
  • Persone con velocità di connessione lenta, che non sono disposti a installare Acrobat Reader.
  • Persone che utilizzano sistemi operativi e browser che non supportano il formato PDF.
  • Persone con le versioni di tecnologie assistive che non supportano il formato PDF.

Queste condizioni possono rendere inaccessibile il documento PDF per l'utente, c'è quindi una totale perdita di efficacia di tali link.

L'alternativa ideale accessibile per i contenuti forniti in un file PDF è una pagina HTML equivalente che sia valida e accessibile. Nel caso in cui non sia possibile fornire quest'alternativa, si consiglia perlomeno di segnalare che si sta per accedere ad un contenuto in formato PDF, ed eventualmente fornire i link necessari per scaricare il software che ne permette la fruizione.

Riferimenti

Secondo caso d'uso: utenti daltonici

La barriera più importante, riguardo a questa categoria di utenti, è quella relativa all'essenzialità del colore all'interno del sito. In particolare è errata la scelta di evidenziare la presenza di un link esclusivamente attraverso la differenza di colore (blu) rispetto al resto del testo (nero). Ciò comporta l'impossibilità di localizzare gli eventuali link presenti, comportando un'effettiva inefficacia degli stessi.

Anche la risoluzione di questo problema richiederebbe uno sforzo minimo per essere risolto, eventualmente ripristinando la classica sottolineatura, o sfruttando altre proprietà grafiche come uno sfondo applicato al link.

Terzo caso d'uso: utenti non udenti

Per quanto riguarda gli utenti non udenti, le barriere indicano la loro impossibilità nel fruire dei filmati proposti all'interno del sito. I filmati trovati all'interno delle pagine analizzate non risultavano avere sottotitoli di nessun genere. L'utente non udente è quindi tagliato fuori da una massiccia quantità di materiale presente nel sito analizzato. Tutti i video trovati nelle pagine del sito sono stati caricati sul sito Youtube.

La risoluzione e quindi l'abbattimento di questa barriera richiede un lavoro più importante rispetto alle altre barriere rilevate; c'è da dire comunque che l'amministratore del sito si è già posto questo problema, come dimostra il canale su Youtube del blog di Beppe Grillo, che ospita alcuni filmati inerenti al contenuto del sito in questione, come questo video caricato sul canale Youtube di Beppe Grillo.

Dettaglio risultati primo caso d'uso: utenti non vedenti

Immagini ricche senza testo alternativo

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera: tutte le pagine analizzate.

Cause del fallimento

Nell'immagine di sfondo della testa di tutte le pagine del sito è disegnata la scritta "Non riceve alcun finanziamento pubblico", che non viene quindi letta dal lettore di schermo.

scritta in sfondo

Inoltre, nella pagina www.beppegrillo.it/movimento/elenco_liste.php è presente un'immagine mappata, con le istruzioni disegnate nell'immagine stessa.

scritta in sfondo
Conseguenze

L'utente non viene a conoscenza delle informazioni così presentate, dato che il lettore di schermo non le legge; l'efficacia diventa quindi nulla. Mentre la prima informazione è marginale rispetto al compito dell'utente, la seconda poteva essere utile a capire meglio come erano stati organizzati i link sulla mappa.

Valutazione

Impatto: 2; Frequenza: 2; Gravità: serio

Rimedi

Inserire l'informazione all'interno di un tag apposito, come un P o uno SPAN, in ogni caso in maniera testuale.

Mancanza di didascalie del video

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

I video di Youtube inseriti nelle pagine analizzate non possiedono delle didascalie associate alle scene.

video senza didascalie
Conseguenze

Sebbene la maggior parte dei video inseriti mostrano delle interviste, abbastanza comprensibili anche senza didascalie, sono stati trovati alcuni filmati di cui non si riesce a cogliere il significato con la sola possibilità di ascoltarli; l'efficacia del video viene quindi ridotta nel primo caso, ed è nulla nel secondo.

Valutazione

Impatto: 3; Frequenza: 2; Gravità: serio

Rimedi

Inserire nei video descrizioni testuali sincronizzate con le scene video. Titolare il filmato, aggiungere didascalie ad ogni singola scena. In alternativa, o in aggiunta, fornire fornire materiale audio supplementare, come ad esempio una voce "fuori campo" che descrive le scene visualizzate.

Colore essenziale

Esito dell'analisi

Barriera assente

I link presenti all'interno della pagina non sono in alcun modo distinguibili dal testo semplice, a meno del colore blu che li differenzia. Questo problema non coinvolge i lettori di schermo, che rilevano comunque la loro presenza, segnalandola.

Frame inaccessibili

Esito dell'analisi

Barriera assente

Non sono stati rilevati frames durante l'esplorazione delle pagine in analisi.

Materiale in movimento

Esito dell'analisi

Barriera assente

Nessun elemento in movimento (testo, immagini) è state rilevato durante l'esplorazione delle pagine in analisi.

Mappe di immagini prive di testo

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

La pagina www.beppegrillo.it/movimento/elenco_liste.php contiene un'immagine mappata, dove le aree cliccabili rappresentano dei link a sezioni del sito specifiche per singoli comuni o regioni. Esiste l'attributo ALT esclusivamente per l'immagine che rappresenta la mappa intera. Le aree non possiedono l'attributo ALT.

Conseguenze

L'utente non ha la possibilità di capire su quale area ha il focus, e gli viene quindi anche preclusa la possibilità di selezionare la sua area di interesse. Nel caso specifico l'utente si trova impossibilitato a continuare lo svolgimento del suo compito, visto l'impedimento nella ricerca del suo comune di residenza. La mappa risulta essere inefficace.

mappa con aree senza attributo ALT

Osserviamo uno stralcio di codice riguardo l'implementazione della mappa:

<img src="immagini/cartina_liste_italia.jpg" alt="Tutte le liste a 5 stelle" width="550" height="730" border="0" usemap="#Map" />
<map name="Map">
  <area shape="rect" coords="3,0,83,19" href="http://www.beppegrillo.it/listeciviche/liste/lombardia/">
  <area shape="rect" coords="330,5,401,21" href="#">
  <area shape="rect" coords="445,5,500,22" href="http://www.beppegrillo.it/listeciviche/liste/veneto/">
  <area shape="rect" coords="5,180,74,196" href="http://www.beppegrillo.it/listeciviche/liste/piemonte/">
  <area shape="rect" coords="104,196,160,212" href="#">
  ...
</map>
Valutazione

Impatto: 3; Frequenza: 3; Gravità: critico

Rimedi

Aggiungere una descrizione testuale della destinazione a cui porta l'area selezionabile, tramite l'attributo ALT.

Immagini funzionali in sfondo

Esito dell'analisi

Barriera assente

Non sono state rilevate immagini funzionali in sfondo durante l'esplorazione delle pagine in analisi.

Immagini funzionali prive di testo

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

La pagina www.beppegrillo.it/movimento/ contiene al suo interno due bottoni di tipo "image", che non possiedono un'attributo ALT. Il primo è quello relativo alla form di ricerca nel sito, ed è presente in tutte le pagine del sito:

bottone grafico del form di ricerca senza ALT
<form id="cse-search-box" action="http://www.beppegrillo.it/listeciviche/search.html">
  <fieldset>
    <input type="hidden" value="002916302953861402401:dciliddll-m" name="cx">
    <input type="hidden" value="FORID:9" name="cof">
    <input type="hidden" value="UTF-8" name="ie">
    <input type="text" onclick="this.value='';this.style.color='#000'" value="Cerca nel sito" id="headerSearchText" name="q">
    <input type="image" id="headerSearchButton" src="http://www.beppegrillo.it/movimento/immagini/button_search_header.png" name="sa">
  </fieldset>
</form>

Il secondo è associato alla form di iscrizione al sito:

bottone grafico di iscrizione al sito senza ALT
<form name="iscrizioneMovimento" method="get" action="http://www.beppegrillo.it/movimento/iscriviti.php">
<table width="100">
  <tbody><tr>
    <td align="left">Nome:</td>
    <td><input type="text" size="20" style="padding: 3px; border: 1px solid rgb(204, 204, 204); margin-bottom: 5px;" name="nome" id="nome"></td>
  </tr>
  <tr>
    <td>Cognome: </td>
    <td><input type="text" size="20" style="padding: 3px; border: 1px solid rgb(204, 204, 204); margin-bottom: 5px;" name="cognome" id="cognome"></td>
  </tr>
  <tr>
    <td> </td>
    <td align="left"><input type="image" src="http://www.beppegrillo.it/immagini/immagini/iscriviti_movimento_orange.gif">
    </td>
  </tr>
</tbody>
</table>
</form>
Conseguenze

Il sintetizzatore vocale legge per intero l'attributo SRC del bottone, che oltre ad essere una stringa di grosse dimensioni, non permette di capirne l'utilità. Questo problema porta disagi all'utente, che potrebbe comunque in entrambi i casi continuare il suo compito premendo INVIO una volta inseriti i dati. Questo rimedio è abbastanza efficace per quanto riguarda la ricerca nel sito, in quanto l'utente si aspetta di dover riempire solo un campo di testo, dopodichè è naturale inviare i dati premendo INVIO. Meno ovvio invece nel secondo caso, quando l'utente non sa quanti campi deve compilare e quindi andando avanti nella form si aspetta di trovare il bottone di invio.

Valutazione

Impatto: 2; Frequenza: 2; Gravità: serio

Rimedi

Aggiungere una descrizione testuale ai pulsanti grafici, tramite l'attributo ALT.

Link generici

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

All'interno della pagina www.beppegrillo.it/movimento/ , in coda all'articolo della sezione titolata "Programma" è presente un link denominato "continua", che porta alla pagina contenente l'articolo presentato per intero.

link di approfondimento troppo generico

Questo è il codice originale:

  <a href="http://www.beppegrillo.it/movimento/2010/08/istruzione.html">continua »</a>
Conseguenze

L'utente che utilizza il lettore di schermo non è motivato a selezionare il link quando esso viene proposto fuori dal contesto, in una finestra di dialogo che contiene tutti e soli i link. Ciò avviene perché l'etichetta "continua »" non ha un contenuto informativo adeguato; di conseguenza tale link non è più efficace per il suo scopo.

Valutazione

Impatto: 2; Frequenza: 1; Gravità: serio

Rimedi

Modificare l'etichetta del link al fine di far apprendere all'utente le informazioni necessarie sul possibile contenuto. In questo caso sarebbe utile comprendere il titolo dell'articolo. Nel caso specifico, ad esempio, segnalare il link attraverso l'etichetta "Leggi l'intero programma sull'istruzione".

Link ambigui

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

In alcune pagine relative alle liste civiche di singole città, sono stati rilevati dei link denominati "Programma", esattamente come il link presente nel menu nel footer, visibile in ogni pagina del sito. Questi link si riferiscono a pagine diverse: il primo link si riferisce al programma politico della città specifica, mentre il link del menu apre un documento PDF con altri contenuti.

Occorre dire che la situazione è alquanto variegata riguardo a questa tipologia di barriera. Alcune pagine di questo genere infatti non hanno nemmeno questo link, quindi la barriera non si presenta nel 100% dei casi.

  <a title="Programma" href="http://www.beppegrillo.it/listeciviche/liste/firenze/programma.html">Programma</a>
  <a target="_blank" href="http://www.beppegrillo.it/iniziative/movimentocinquestelle/Programma-Movimento-5-Stelle.pdf">Programma</a>
Conseguenze

L'utente del lettore di schermo non ha modo di distinguere i link descritti al di fuori dal loro contesto, in una finestra di dialogo che contiene tutti e soli i link. Ciò avviene perché entrambi i link hanno la stessa etichetta ed essa non permette di distinguerli.

Valutazione

Impatto: 2; Frequenza: 1; Gravità: serio

Rimedi

Modificare le etichette in modo da renderle informative. Ad esempio, sostituire all'interno della pagina di Firenze l'etichetta "Programma per Firenze" al posto della più generica "Programma".

Si rileva tra l'altro un uso poco utile dell'attributo A/@TITLE, che è presente nel primo link "Programma" (quello specifico per la città), ma non nel secondo. Una soluzione alternativa potrebbe quindi essere quella di utilizzare in entrambi i link l'attributo A/@TITLE, chiaramente differenziandone il valore.

Menu dinamici in Javascript

Esito dell'analisi

Barriera assente

I menu all'interno del sito sono costituiti da semplici liste non ordinate al cui interno sono presenti i link.

Eventi mouse

Esito dell'analisi

Barriera assente

Non sono state rilevate routines invocate mediante gestori di eventi.

Oggetti incomprensibili

Esito dell'analisi

Barriera assente

La pagina non contiene oggetti totalmente incomprensibili ai lettori di schermo.

Trappole per la tastiera

Esito dell'analisi

Barriera assente

Le pagine analizzate sono risultate visitabili senza blocchi con l'utilizzo del tasto TAB dall'inizio alla fine. In nessun'altra occasione sono state rilevate "trappole" per la tastiera.

ASCII art

Esito dell'analisi

Barriera assente

Non sono stati rilevati simboli con l'intento di essere usati come decorazioni. Unica eccezione, l'uso del carattere "»" per rappresentare una freccia. Ma il lettore di schermo in dotazione non ha nemmeno letto questo carattere, quindi non viene considerato una barriera.

Titoli spaziati

Esito dell'analisi

Barriera assente

Nessun titolo è stato spaziato nelle pagine del sito in analisi.

Troppi link

Esito dell'analisi

Barriera assente

I link sono bene distribuiti all'interno delle pagine, e mai eccessivi.

Form con redirect

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

La pagina www.beppegrillo.it/movimento/contattaci.php contiene una form in cui due menu a tendina consecutivi, una volta utilizzati, causano un submit al server il quale spedisce una nuova pagina al browser. Il secondo menu a tendina viene presentato solo a seguito della compilazione del primo.

menu del form contattaci
<td class="main">
  <form method="post" action="http://www.beppegrillo.it/movimento/contattaci.php?action=next" name="contattaci">
    <select onchange="javascript:document.contattaci.submit();" name="categoria">
      <option value="78">[Scegli la categoria]</option>
      <option value="86">- Segnala la violazione di una lista</option>
      <option value="85">- Segnala un problema tecnico</option>
      <option value="94">- Segnala l'invio della richiesta di certificazione</option>
      <option value="97">- Richiesta di informazioni</option>
    </select>
    <input border="0" align="top" type="image" title="Continua" alt="Continua" src="http://www.beppegrillo.it/listeciviche/php/bottone.gif">
  </form>
</td>
Conseguenze

Una volta scelta una voce dal menu a tendina, il browser propone la nuova pagina riposizionando il focus all'inizio. L'utente deve quindi prima capire che il browser mostra una nuova pagina quasi uguale alla precedente, e poi muovere il focus sino al punto del menu scelto in precedenza e solo dopo può continuare nella compilazione della form. Questo problema compromette l'efficienza della form.

Valutazione

Impatto: 2; Frequenza: 2; Gravità: serio

Rimedi

Evitare l'invio intermedio dei dati, o in alternativa suddividere in sezioni il contenuto della pagina, utilizzando skip-links per giungere direttamente al contenuto della pagina, o delle ACCESSKEY.

Link non separati

Esito dell'analisi

Barriera assente

Non sono stati trovati casi di link mal separati, quindi letti male dal lettore di schermo.

Nuove finestre

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

Molti link nella Home Page del sito aprono nuove schede. Ad esempio, tutti i link presenti nelle sezioni "Voci dal movimento", "Temi dal forum" e "Comunicati politici". Inoltre, la pagina www.beppegrillo.it/movimento/iscriviti.php contiene una form nella quale è presente un link denominato "La tua foto": tale link, se selezionato, apre una nuova finestra che si occupa del caricamento di una foto dell'utente che si sta iscrivendo.

nuova finestra aperta

I link presenti nella Home Page sono così definiti(notare l'attributo TARGET):

  <a class="lastEntryTitle" target="_blank" href="http://www.beppegrillo.it/listeciviche/forum/2011/01/fusione-fredda-1.html">fusione fredda</a>
Conseguenze

L'utente non si accorge che il contesto di interazione è cambiato, e che quindi è cambiato sia il contenuto che i comandi possibili. In tutte le situazioni appena descritte il tasto BACK del browser risulta disabilitato, comportando di conseguenza un'importante riduzione dell'efficacia.

Valutazione

Impatto: 2; Frequenza: 2; Gravità: serio

Rimedi

Evitare l'apertura dei link in nuove schede. Per quanto riguarda il caricamento dell'immagine, caso in cui l'apertura di una finestra è più plausibile, informare in maniera esplicita che è stata aperta una nuova finestra, fornendo un link nella pagina che da la possibilità di chiuderla.

Form senza LABEL

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

Le pagine citate contengono delle form i cui controlli sono privi del corretto markup LABEL/@FOR. Ecco degli esempi di codice presi dalla pagina " Iscriviti ":

  <tr>
    <td>Email*</td>
    <td><input value="" class="ti" id="email" name="email"></td>
    <td colspan="2">Conferma* <input value="" class="ti" id="email_confirm" name="email_confirm"></td>
  </tr>

Vediamo come i due campi "Email*" e "Conferma*" siano stati trattati diversamente: il primo prevede due TD, uno per l'etichetta e l'altro per il campo, mentre il secondo TD racchiude campo ed etichetta insieme.

Conseguenze

L'utente che usa il lettore di schermo in modalità "controlli della form" non può permettersi di scorrere avanti e indietro il focus dell'interazione perché il lettore di schermo non legge il testo associato all'etichetta del controllo focalizzato.

Valutazione

Impatto: 2; Frequenza: 3; Gravità: serio

Rimedi

Aggiungere i tag LABEL/@FOR attorno alle etichette di ciascun controllo. Nei casi in cui questo non è possibile usare l'attributo TITLE. In questo modo anche il testo dell'etichetta risulta cliccabile, per controlli come radiobutton e checkbox.

Form mal linearizzate

Esito dell'analisi

Barriera assente

Le form presenti all'interno delle pagine Contattaci e Iscriviti , impaginate con tabelle, vengono ben linearizzate.

Temporizzazioni troppo brevi

Esito dell'analisi

Barriera assente

Non sono state rilevati refresh nelle pagine analizzate, senza l'esplicito avvenimento di un evento particolare.

Tabelle dati senza relazioni strutturali

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

La pagina contiene una tabella dati relativa ai risultati elettorali, non codificata appropriatamente attraverso gli attributi TH/@SCOPE,@HEADERS.

<table cellspacing="0" cellpadding="3" border="1" width="100%" style="margin: 0.5em 0.5em 0.5em 0pt; border: 1px solid rgb(204, 204, 204); border-collapse: collapse; text-align: right;" id="risultatiElettorali">
  <tbody>
    <tr>
      <th><b>Regione/comune</b></th>
      <th><b>Voti lista</b></th>
      <th><b>% lista</b></th>
      <th><b>Voti presidente/sindaco</b></th>
      <th><b>% presidente/sindaco</b></th>
      <th><b>Seggi</b></th>
    </tr>
    <tr>
      <td>Piemonte</td><td>69448</td><td>3,66</td><td>90086</td><td>4,08</td><td>2</td>
    </tr>
    ...
    <tr>
      <td>Laives</td>
      <td>219</td>
      <td>2,60</td>
      <td>579</td>
      <td>6,6</td>
      <td>-</td>
    </tr>
  </tbody></table>
Conseguenze

L'utente non può navigare tra le celle della tabella in modo che gli venga ricordato il significato di ciascuna cella, con conseguente riduzione dell'efficacia.

Valutazione

Impatto: 3; Frequenza: 1; Gravità: serio

Rimedi

Usare gli attributi TH/@SCOPE o TH/@ID e TD/@HEADERS per legare in HTML le celle dati alle corrispondenti celle intestazione.

Tabelle dati senza sommario

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

La pagina contiene una tabella dati relativa ai risultati elettorali, che non possiede l'attributo SUMMARY e/o il tag CAPTION.

Conseguenze

L'utente deve esplorare e capire gran parte della tabella per capire se le informazioni che contiene sono di suo interesse. In ogni caso la tabella viene preceduta da un tag H1 contenente il titolo descrittivo della tabella. Inoltre la tabella, pur non avendo l'attributo SUMMARY possiede l'attributo ID, che ha un nome esplicativo riguardante la tabella stessa. La produttività non viene quindi pregiudicata eccessivamente.

tabella senza attributo SUMMARY
  <h1 id="page-title">Risultati elettorali</h1>
  <br>
  <table cellspacing="0" cellpadding="3" border="1" width="100%" style="margin: 0.5em 0.5em 0.5em 0pt; border: 1px solid rgb(204, 204, 204);
border-collapse: collapse; text-align: right;" id="risultatiElettorali">
    <tbody>
      <tr>
        <th><b>Regione/comune</b></th>
  ...
Valutazione

Impatto: 2; Frequenza: 1; Gravità: minore

Rimedi

Utilizzare l'attributo TABLE/@SUMMARY per descrivere con una frase chiara e coincisa di cosa tratta la tabella. Utilizzare il tag TABLE/CAPTION per specificare la didascalia associata alla tabella. Quest'ultimo tag, al contrario dell'attributo SUMMARY, viene visualizzato sul browser e può quindi essere anche trattato con le regole CSS.

Tabelle di impaginazione

Esito dell'analisi

Barriera assente

Non sono state rilevate tabelle di impaginazione su questo sito. Le pagine sono state presentate attraverso una serie di tag DIV, trattati con regole CSS.

Pagine senza titoli

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

Le pagine sopra elencate contengono il valore del tag TITLE uguale a quello della Home page: "MoVimento".

pagine con titoli uguali
Conseguenze

Quando l'utente entra in una di queste pagine, raggiungibili dalla stessa Home page, il lettore di schermo leggerà di nuovo lo stesso titolo. L'utente potrebbe quindi dedurre che la pagina non è cambiata. Ciò comporta una riduzione della produttività.

Valutazione

Impatto: 2; Frequenza: 3; Gravità: critico

Rimedi

Cambiare il titolo di queste pagine, rendendolo maggiormente informativo e diverso dai titoli delle altre pagine. Ad esempio, per Elenco delle liste di candidati il titolo può essere "Liste candidati", invece per Contattaci "Contattaci". Eventualmente sostituire il titolo della Home page "MoVimento" con il titolo "MoVimento - Home" per aggiungere informazioni.

Frame senza titolo

Esito dell'analisi

Barriera assente

Non sono stati rilevati frame all'interno di questo sito, tantomeno nelle pagine analizzate in dettaglio.

Marcatura della lingua

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera: tutte le pagine analizzate.

Cause del fallimento

L'attributo LANG è presente nel tag iniziale HTML, ma ha valore "en-us", mentre l'intero sito è in italiano.

<html lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" id="sixapart-standard">
...
</html>
Conseguenze

Il lettore di schermo pronuncia le parole con i fonemi della lingua inglese. Considerato che il sito è interamente in italiano, l'attributo LANG così impostato più che ridurre l'efficacia la ostacola totalmente.

Valutazione

Impatto: 3; Frequenza: 3; Gravità: critico

Rimedi

Modificare l'attributo HTML/@LANG con valore "it" anzichè "en-us". Nel caso in cui si riscontra la presenza di una parola con una lingua diversa, usare sempre l'attributo LANG per specificare la lingua di quella parola.

Mancanza di intestazioni

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

Nelle pagine elencate manca l'intestazione H1(Home page, Iscriviti, Liste della città di Firenze) o le intestazioni sono male ordinate(Candidato di Firenze).

Conseguenze

Se all'utente viene presentata la lista di tutte le intestazioni delle sezioni, questa è incompleta e/o errata, con la conseguenza che l'utente deve visitare l'intera pagina per reperire le informazioni volute. Viene perciò ridotta la produttività e in parte l'efficacia.

mancanza del tag H1 nella Home page
Valutazione

Impatto: 1; Frequenza: 2; Gravità: minore

Rimedi

Per ogni tipo di contenuto della pagina aggiungere una nuova intestazione, rispettando, se già presente, la gerarchia dei livelli.

Immagini come titoli

Esito dell'analisi

Barriera assente

Le pagine analizzate non contengono titoli di categoria implementati mediante immagini.

Mancanza di tasti rapidi

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

Non sono presenti tasti rapidi all'interno delle pagine analizzate, fatta eccezione per il pulsante "INVIA" presente nella form della pagina Iscriviti .

Conseguenze

La mancanza di questi tasti rapidi impedisce all'utente di accedere velocemente ai controlli della pagina. E' quindi obbligato a muoversi sequenzialmente usando il tasto TAB, e il problema viene acuito dalla mancanza di link per saltare al contenuto, o muoversi di sezione in sezione. Di conseguenza si registra una riduzione della flessibilità, e quindi di produttività e soddisfazione.

Valutazione

Impatto: 2; Frequenza: 3; Gravità: critico

Rimedi

Per i link ricorrenti, come quelli del menu, e i pulsanti della pagina Contattaci , aggiungere l'attributo @ACCESSKEY. Utilizzare caratteri che non vadano in conflitto con i tasti rapidi dei browser, e descrivere questi tasti in una sezione apposita del sito.

Skip links

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera: tutte le pagine analizzate.

Cause del fallimento

La mancanza di link per saltare al contenuto non permette di evitare il materiale preliminare e ripetuto nelle pagine.

Conseguenze

L'utente è costretto, nella navigazione all'interno del sito, a sentirsi leggere più e più volte il materiale preliminare, prima di arrivare al nocciolo della pagina, con una conseguente riduzione della produttività.

Valutazione

Impatto: 2; Frequenza: 3; Gravità: critico

Rimedi

Aggiungere, subito dopo il logo, un link che permetta di saltare al nocciolo della pagina. Preferire un link visibile a tutti; se ciò non fosse possibile implementare lo skip-links mediante un link nascosto (con display:none o con uno spaziatore trasparente dotato di ALT="salta al contenuto").

Pagina solo testo

Esito dell'analisi

Barriera assente

Nelle pagine analizzate non sono stati rilevati link che portano a pagine di solo testo.

Finestra con controlli del browser disabilitati

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Cause del fallimento

All'interno della pagina elencata è presente un link che apre una nuova finestra, per il caricamento di una foto. Questa finestra ha i controlli del browser disabilitati. La finestra in questione è quella visualizzabile nella figura relativa alla barriera "Nuove finestre".

finestra con controlli del browser disabilitati
Conseguenze

L'utente per poter chiudere questa pagina deve caricare effettivamente un'immagine, o chiudere forzatamente la finestra, in quanto non sono presenti link o pulsanti che permettano di chiuderla normalmente. Viene quindi ridotta l'efficacia.

Valutazione

Impatto: 2; Frequenza: 2; Gravità: serio

Rimedi

Non disabilitare i controlli del browser, oppure visto che la finestra è temporanea, inserire un link/pulsante che permetta di chiuderla.

Cambiamenti dinamici

Esito dell'analisi

Barriera assente

Nelle pagine analizzate non sono stati rilevati cambiamenti dinamici delle pagine, che ne impediscano l'utilizzo da parte dell'utente.

Tabella 2: Tabella riassuntiva per la valutazione delle barriere per Utenti non vedenti
Barriera Impatto Frequenza Gravità
Marcatura della lingua 3 3 critico
Mappe di immagini prive di testo 3 3 critico
Mancanza di didascalie del video 3 2 critico
Tabelle dati senza relazioni strutturali 3 1 critico
Mancanza di tasti rapidi 2 3 critico
2 3 critico
Pagine senza titoli 2 3 critico
Form senza LABEL 2 3 critico
Immagini funzionali prive di testo 2 2 serio
Nuove finestre 2 2 serio
Form con redirect 2 2 serio
Controlli del browser disabilitati 2 2 serio
Immagini ricche senza testo alternativo 2 2 serio
2 1 serio
2 1 serio
Tabelle dati senza sommario 2 1 serio
Mancanza di intestazioni 1 2 minore

Dettaglio risultati secondo caso d'uso: utenti daltonici

Colore essenziale

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera: tutte le pagine analizzate.

Cause del fallimento

I link presenti all'interno della pagina non sono in alcun modo distinguibili dal testo semplice, a meno del colore blu che li differenzia.

colore essenziale per i link
Conseguenze

L'utente non ha la possibilità di poter distinguere i link presenti all'interno degli articoli, l'efficacia di questi è quindi nulla.

Valutazione

Impatto: 2; Frequenza: 3; Gravità: critico

Rimedi

Utilizzare altri mezzi per distinguere i link, oltre al colore blu. Ad esempio utilizzare la classica sottolineatura.

Contrasto visivo insufficiente

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera: tutte le pagine analizzate.

Cause del fallimento

Le pagine contengono del materiale in primo piano con una differenza di contrasto non sufficiente rispetto allo sfondo. Nella Home page i problemi principali derivano dalla mancanza di contrasto rispetto allo sfondo giallo. Gli elementi coinvolti sono i separatori dei menu dell'header, e i link, inseriti all'interno di tag H3, presenti alla testa delle sezioni principali della pagina.

contrasto insufficiente dei separatori contrasto insufficiente dei link su sfondo giallo nella Home page

Nella pagina "Forum" e quella di un articolo del forum, i problemi sono causati da testo color grigio chiaro su sfondo grigio chiaro o bianco. Le immagini seguenti mostrano queste situazioni:

contrasto insufficiente nel forum contrasto insufficiente in articolo del forum

Riportiamo i rapporti prodotti con l'ausilio della toolbar per Firefox "Juicy Studio Accessibility", che ci hanno aiutato nel localizzare le situazioni che causano l'innalzamento della barriera:

Conseguenze

L'utente può non essere in grado di percepire chiaramente la presenza del materiale di primo piano. Le informazioni che l'utente rischia di non percepire in questo caso non sono fondamentali rispetto al compito che si è prefissato, di conseguenza l'efficacia è stata scarsamente ridotta.

Valutazione

Impatto: 1; Frequenza: 2; Gravità: minore

Rimedi

Aumentare il contrasto tra gli elementi modificandone la colorazione. Per i separatori si consiglia l'utilizzo del colore nero, come per i link; eventualmente pensare di cambiare il giallo di sfondo con un giallo un pò più chiaro. Riguardo al testo color grigio su sfondo grigio chiaro o bianco, si consiglia l'utilizzo di un grigio più scuro, o nero.

Tabella 3: Tabella riassuntiva per la valutazione delle barriere per Utenti daltonici
Barriera Impatto Frequenza Gravità
Colore essenziale 2 3 critico
Contrasto visivo insufficiente 1 2 minore

Dettaglio risultati terzo caso d'uso: utenti non udenti

Mancano didascalie per l'audio

Esito dell'analisi

Barriera presente

Pagine contenenti la barriera:

Le problematiche che innalzano questa barriera, sono le stesse per le barriere intitolate "Video senza didascalie" e "Manca sincronizzazione", per cui valgono le considerazioni incluse all'interno di questa sezione.

Cause del fallimento

La pagina contiene dei file multimediali che hanno un canale audio che descrive qualcosa, ma non ci sono descrizioni testuali nè didascalie riguardanti tale canale audio.

video senza didascalie
Conseguenze

L'utente non ha modo di fruire delle informazioni fornite dai dialoghi, e gli altri suoni presenti all'interno del filmato; inoltre i video presenti in questa pagina, come quasi tutti quelli del sito, mostrano interviste o stralci di telegiornali: l'efficacia di questi contenuti è quindi nulla.

Valutazione

Impatto: 3; Frequenza: 3; Gravità: critico

Rimedi

Aggiungere ai filmati anche la trascrizione della traccia audio vocale. Questo può essere fatto semplicemente aggiungendo un link ad una pagina con la trascrizione testuale o usando il tag OBJECT. Se la narrazione è sincronizzata con le immagini video, è necessario procedere ad una titolazione del filmato, arricchendo scena per scena con i sottotitoli (descrizione testuale dei dialoghi) e didascalie (descrizione testuale di altri suoni importanti delle scene). Linguaggi come SMIL permettono di realizzare una sincronizzazione sofisticata tra i vari canali.

Video senza didascalie, Manca sincronizzazione

Tabella 4: Tabella riassuntiva per la valutazione delle barriere per Utenti non udenti
Barriera Impatto Frequenza Gravità
Mancano didascalie per l'audio 3 3 critico
Video senza didascalie 3 3 critico
Manca sincronizzazione 3 3 critico