Verifica di accessibilità con il metodo Barriers walkthrough.

Indice


Torna all'indice [0] [1] Oggetto della verifica.

La verifica di accessibilità con il metodo Barriers walkthrough è stata eseguita sul sito dell'Università degli Studi di Udine.

L'applicazione del metodo impone una serie di passi preliminari al fine individuare (tra tutti i possibili) gli scenari (casi d'uso) che si intende verificare e le categorie di utenti (disabilità) rispetto ai quali deve essere eseguita la verifica di accessibilità.

Visto i requisiti di progetto, categorie di utenti, scenari e pagine sono stati scelti su basi:

Quantitative:
l'esame sarà eseguito per due forme di disabilità (non affini ma possibili per le specifiche categorie di utenti), su due scenari, per un totale di una decina di pagine (fatti salvi i requisiti d'uso);
D'uso:
sono stati scelti dei percorsi logici quali: analisi dell'offerta didattica per una possibile iscrizione, ricerca per una possibile collaborazione.

Tutte le pagine sono state verificate utilizzando i seguenti browser:

Per l'analisi del contrasto visivo è stato utilizzato lo strumento Colour Contrast Analyser fornito dalla AIS Web Accessibility Toolbar per IE e dalla estensione Web developer 1.0.2 per Firefox. Entrambi fanno riferimento alla regola: "Due colori sono in grado di fornire una buona visibilità di colore se la differenza di luminosità e la differenza di colore sono maggiori di una soglia stabilita." Gli algoritmi sono dichiarati conformi a quanto stabilito dal W3C per cui il livello minimo è 125 per la differenza fra le luminosità e 500 per quella fra i colori. (rif. WebAccessibile.org)

Le pagine vengono erogate da un server Zope/(Zope 2.7.5-final, python 2.3.5, linux2) ZServer/1.1 Plone/2.0.4 come visualizzato dalla estensione Spy Server di Mozilla Firefox;

Torna all'indice [0] [2] Ricognizione del sito

Prima di procedere alla verifica vera e propria è stata eseguita una ricognizione esaustiva del sito per prendere conoscenza della struttura di navigazione e delle modalità utilizzate per la rappresentazione dei contenuti.

Almeno per i principali percorsi di navigazione è stata verificata una uniformità nelle impostazioni grafiche e strutturali. Il sito nella versione corrente non comprende ancora tutte le funzionalità ma immagino che a breve (come accaduto abbastanza recentemente con CERTIBOL), tutte le funzionalità saranno migrate alla nuova versione.

Il sito, nella sua parte principale, é composto da tre sezioni (Ateneo, Ricerca, Didattica), ognuno diviso in sotto-sezioni e l'organizzazione delle pagine che fanno parte del ramo principale rispecchia la struttura dell'albero di navigazione principale. Esistono poi rami secondari che consentono di raggiungere una serie di servizi trasversali (URP, Help Desk, eccetera).

Le pagine analizzate hanno un impianto comune (si differenzia la home page che ha una propria ed unica strutturazione) e sono organizzate nelle componenti di seguito elencate, che si susseguono dall'alto in basso, ciascuna di esse si estende orizzontalmente per l'intera dimensione della pagina:

1. Heading
1.1 Riferimenti e logo

contiene indirizzo, telefono, fax, denominazione (sottende il link alla home page) ed il logo dell'Università;

1.2 Accesso diretto a servizi

barra di menù orizzontale, allineata a destra, con servizi (accessori) trasversali alla struttura del sito;

1.3 Sezioni

il sito è organizzato i tre sezione e questa parte, oltre ad immagini riferite alla sezione corrente, visualizza due entrate che consentono di accedere direttamente alle altre due;

2. Body
2.1 Area Superiore (1)

lembi delle schede che identificano le sottosezioni (di cui cliccabili quelle delle sezioni non correnti) e form del motore di ricerca;

2.2 Area Superiore (2)

bread-crumbs ed icone per il ridimensionamento del testo;

2.3 Lato sinistro

menù contestuale a due livelli; il numero e il contenuto delle opzioni é contestualizzato ma la struttura é comune;

2.4 Area centrale

contenuti specifici della posizione nell'albero di navigazione (Sezione/Sotto-sezione), fortemente contestualizzati.

3. Footing
3.1 Link

link a pagine che non rientrano in alcuno dei contesti sopra descritti;

3.2 Credits

Link alla parte corrispondente della pagina di Guida al sito.

Torna all'indice [0] [3] Scelta degli scenari.

A ciascun scenario è stato assegnato (simbolicamente) un titolo ed uno specifico caso d'uso.

Accesso al sito:
ho definito come scenario separato la home page in quanto costituisce elemento di transito per qualsiasi caso d'uso sia iniziato a partire dall'avvio del browser, soprattutto se il sito non è d'uso così abituale (con relativo salvataggio nei "preferiti" degli URL di specifiche pagine); inoltre la home page è generalmente (ed anche nel caso del sito in analisi) costruita in modo diverso dalle altre pagine, sia per l'aspetto grafico che per l'organizzazione dei contenuti;
Ricerca per collaborazioni:
per questo scenario sono stati utilizzati i percorsi e le pagine che consentono di determinare le aree di possibile collaborazione con una delle strutture (il Dipartimento di Matematica ed Informatica appunto) dell'Università; a questo ho aggiunto l'analisi di pagine che, rispetto al caso d'uso, possono considerarsi terminali: indice delle informazioni per le imprese, spin-off attivati;
Analisi offerta didattica:
in questo caso è stato seguito l'intero percorso sino alla visualizzazione del Piano di Studi per il Corso di Laurea in Tecnologie Web e Multimediali, al fine di simulare un percorso di ricerca di un Corso di Laurea conforme alle attese di formazione in vista di una possibile iscrizione.

Torna all'indice [0] [4] Scelta delle categorie di utenti

La scelta delle categorie di utenti è caduta sui casi di disabilità: Ipovedenza e Disabilità motoria
Le due tipologie di disabilità sono state scelte perchè abbinabili alle seguenti tipologie di utenti:

Studente:
che sta navigando sul sito dell'Università per cercare un persorso didattico che le/gli consenta di acquisire quelle conoscenze che ritiene necessarie per lo sbocco professionale perseguito;
Impiegato:
a cui è stato affidato l'incarico di ricercare sul sito dell'Università la possibilità ed i modi per avviare una collaborazione tra Azienda ed Università finalizzata alla realizzazione di un qualche progetto.

Nella sezione Riferimenti Metodologici sono riportate le definizioni classificatorie degli utenti per le due categorie di disabilità prescelte e, per ciascuna di esse, le barriere che possono sussistere all'uso di una pagina web.
La condizione di ipovedenza è stata simulata ridimensionando la finestra del browser a 1024x768 pixel e utilizzando le possibilità di l'ingrandimento offerte da AIS Web Accessibility Toolbar per IE e dalla estensione Web developer 1.0.2 per Firefox con valori di 150/200%.
La condizione di disabiltà motoria è stata simulata utilizzando lo schermo touch-screen di un di un personal computer Flybook, senza l'ausilio della penna fornita in dotazione.

Per l'esito delle verifiche di validità e conformità si rimanda alla pagina principale di questa relazione.

[5] Esito della verifica

Torna all'indice [0] Accesso al sito

La pagina costituisce una sorta di hub che dovrebbe instradare l'utente verso i tre temi principali (Ateneo, Ricerca, Didattica) ed un numero più ampio di percorsi "secondari"; particolare risalto è dato infine all'Offerta didattica.

Da un punto di vista grafico l'uso composito di link su immagini e di link testuali attesta il diverso peso che si intende dare ai due gruppi di percorsi; per gli utenti diversamente abili rispetto alle cui disabilità è stato applicato il metodo delle barriers walkthrough tali scelte risultano penalizzanti per il corretto utilizzo dei collegamenti che costituiscono il contenuto della pagina.

Torna all'indice  [0] Ricerca per collaborazione

La mappa del sito evidenzia che la sezione Ricerca inizia dal secondo livello dell'albero di navigazione (Homepage.Ricerca) e si estende, comprendendo l'entry point, su 3/4 livelli, considerando che il terzo livello può contenere collegamenti ad ulteriori pagine di dettaglio; questa strutturazione è implementata e resa navigabile, in ciascuna delle pagine analizzate, dalle parti:

1.3 Heading.Sezioni

per la navigazione al secondo livello (Sezioni);

2.1 Body.Area superiore (1)

per la navigazione al terzo livello (Sotto-sezioni);

2.3 Body.Lato sinistro

per la navigazione al quarto livello (esempio: Dipartimenti in Strutture di Ricerca).

Ciò, per così dire, appiattisce l'albero di navigazione, rendendo si possibili "salti" orizzontali ma al costo di una ricca farcitura di collegamenti; una simile strutturazione rende inoltre praticamente inutili le bread-crumbs.

Per quanto riguarda invece l'aspetto grafico e la ridistribuzione dei contenuti, va rilevato che, alle condizioni di test indicate, l'intestazione di pagina (heading) occupa più di metà della pagina visualizzata, le parti comuni non si ridistribuiscono correttamente, i colori utilizzati danno luogo, in ciascuna delle parti cromatograficamente distinte, a contrasti visivi generalmente insufficienti.

Torna all'indice [0] Analisi offerta didattica

La mappa del sito evidenzia che la sezione Didattica inizia dal secondo livello dell'albero di navigazione (Homepage.Didattica) e, navigando le pagine che costituiscono questa sezione (almeno per la parte Offerta didattica in esame) si estende, comprendendo l'entry point, per almeno 6 livelli (le bread-crumb della pagina di un insegnamento sono:
Home>Didattica>Facoltà Scienze Matematiche, Fisiche e Naturali>Tecnologie web e multimediali>Programmi insegnamenti a.a. 2006/2007>Corso introduttivo)

I livelli dell'albero di navigazione dal secondo al quarto sono direttamente raggiungibili da ciascuna delle pagine analizzate utilizzando i collegamenti posti in :

1.3 Heading.Sezioni

per la navigazione al secondo livello (Sezioni);

2.1 Body.Area superiore (1)

per la navigazione al terzo livello (Sotto-sezioni);

2.3 Body.Lato sinistro

per la navigazione al quarto livello (esempio: Dipartimenti in Strutture di Ricerca).

Ciò, per così dire, appiattisce l'albero di navigazione, rendendo si possibili "salti" orizzontali ma al costo di una ricca farcitura di collegamenti.

I livelli più profondi sono invece raggiungibili dai collegamenti presenti in 2.4 Body.Area contenuti che, per le pagine non terminali (cioè contenenti ancora elementi di navigazione), ha un pay-load costituito in buona parte appunto dai collegamenti.

Nella ricognizione del sito, per la sezione in esame, ho verificato la presenza di ridondanze; ad esempio la pagina Insegnamenti del corso di laurea di primo livello in Tecnologie web e multimediali contiene già i piani di studio per l'anno accademico 2006/2007 ma, selezionando il collegamento Piani di studio si apre una nuova pagina che contiene esattamente gli stessi Piani di studio presenti nella pagina di provenienza.

Per quanto riguarda invece l'aspetto grafico e la ridistribuzione dei contenuti, va rilevato che, alle condizioni di test indicate, l'intestazione di pagina (heading) occupa più di metà della pagina visualizzata, le parti comuni non si ridistribuiscono correttamente, i colori utilizzati danno luogo, in ciascuna delle parti cromatograficamente distinte, a contrasti visivi generalmente insufficienti.

Torna all'indice [0]  6. Sintesi delle assegnazioni dei livelli di gravità

La sintesi delle verifiche fatte con il metodo Barriers walkthrough viene riportata nella tabelle che segue contenente:

Tabella di sintesi delle verifiche con il metodo Barriers walkthrough.
Scenario Pagina Gravità per utenti Collegamenti;
key denominazione ipovedenti disabili motori copia locale url sorgente
Accesso al sito [a] Home page critico serio ../HomePage.. http://www.uniud.it
[b] Pagina standard critico critico
Ricerca per collaborazioni [c] Strutture critico critico ../RicercaStrutture.. http://www.uniud.it/ricerca/strutture
[d] Matematica e Informatica critico critico ../RicercaDiMi.. http://www.uniud.it/.../dimi
[e] Attività critico critico ../RicercaAttivita.. http://www.uniud.it/ricerca/finanziamenti
[f] Imprese critico critico ../RicercaImprese.. http://www.uniud.it/ricerca/imprese
[g] Spin-off Attivati critico critico ../SpinOff.. http://www.uniud.it/ricerca/imprese/spin_off/elenco_spinoff
Analisi Offerta Didattica [h] Offerta critico critico ../Didattica.. http://www.uniud.it/didattica/offerta
[i] Facoltà critico critico ../DidatticaFacolta/.. http://www.uniud.it/didattica/facolta/
[l] Scienze critico critico ../DidatticaScienze.. http://www.uniud.it/didattica/facolta/scienze/
[m] Corsi di Laurea critico critico ../DidatticaSsMmFfNnCorsi.. http://www.uniud.it/didattica/.../corsi
[m] TWM critico critico ../DidatticaTWM.. http://www.uniud.it/didattica/.../tecnologie_web_e_multimediali
[o] Insegnamenti TWM critico critico ../DidatticaTWMPiani.. http://www.uniud.it/didattica/facolta/.../insegnamenti.htm

[7] Riferimenti Metodologici

I riferimenti metodologici riportati di seguito sono parte del materiale didattico del corso di Progetto di siti e portali web e del documento Barrier walkthrough - Heuristic evaluation guided by accessibility barriers.

Torna all'indice [0]  Indice degli argomenti

Torna all'indice [0] [7.1] Disabilità

Torna all'indice Riferimenti Metodologici [7.1.1] 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.

Torna all'indice Riferimenti Metodologici Elenco delle barriere per utenti ipovedenti

Torna all'indice Riferimenti Metodologici [7.1.2] 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).

Torna all'indice Riferimenti Metodologici Elenco delle barriere per utenti disabili motori

Torna all'indice [0] [7.2] Barriere

Torna all'indice Riferimenti Metodologici [7.2.1] Barriere per utenti ipovedenti

Torna all'indice barriere per ipovedenti Immagini ricche malposizionate
Categoria:

Percezione

Causa:

Layout della pagina subottimale perché la grafica non fa capire la presenza dell'immagine, che è portatrice di informazioni.

Tipo di fallimento:

L'utente potrebbe non capire che c'è l'immagine se essa è posizionata al di fuori del suo campo visivo e in posizioni estreme della pagina (es. in basso o alto a dx). Questo può succedere soprattutto se la pagina si basa su un impianto grafico che fornisce delle indicazioni visuali sbagliate su dove la pagina termina (ad es. con delle linee o decorazioni verticali che possono essere interpretate come margine destro, oltre al quale non si trova nulla). La conseguenza è che l'immagine non verrebbe proprio vista, e quindi le sue informazioni non fruite.

Effetto:

Riduzione di efficacia.

Rimedio:

Cambiare l'impostazione grafica, facendo in modo tale che la grafica non induca ad immaginare la fine della pagina (a destra o in basso) prima del tempo.

Torna all'indice barriere per ipovedenti Immagini ricche incluse nello sfondo
Categoria:

Percezione

Causa:

Immagini latrici di informazioni incluse nello sfondo della pagina (tramite CSS) per le quali non è possibile specificare testo alternativo equivalente.

Tipo di fallimento:

Tali immagini sarebbero totalmente non percepibili da parte degli utenti dato che i lettori di schermo o i browser parlanti non segnalerebbero neppure la presenza dell'immagine, tanto meno del testo ad esse associato.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Fare in modo di includere le immagini con del codice HTML (usando IMG oppure OBJECT), specificando un valore per l'attributo ALT di IMG (o del contenuto per OBJECT) ed eventualmente associando all'immagine un link che porta ad una pagina di spiegazioni dettagliate dell'immagine.

Torna all'indice barriere per ipovedenti Contrasto visivo insufficiente
Categoria:

Percezione

Causa:

La pagina contiene materiale in primo piano su qualche tipo di sfondo e i colori usati per dipingere gli uni e l'altro sono troppo poco contrastati. Lo sfondo in questione può essere un riquadro colorato con tinta uniforme, a gradiente, con qualche trama, con un'immagine. E il materiale di primo piano può consistere in testo o in immagini.

Il livello di contrasto troppo basso può essere dovuto ad insufficiente differenza di luminosità, o a cattiva scelta delle diverse tonalità di colore.

Talvolta il problema sorge solo quando il contenuto della pagina viene riposizionato (ad es. perché si è cambiata la dimensione del testo, o la geometria della finestra).

Tipo di fallimento:

La persona farà molta fatica a distinguere le due cose, e in certi casi non riuscirà a decifrare proprio il materiale di primo piano.

Effetto:

Riduzione, anche totale, dell'efficacia.

Rimedio:

Il rimedio consiste nella rimozione completa delle immagini di sfondo, o nella loro modifica in modo tale che mai possano interferire con la lettura/ percezione del materiale di primo piano.

In aggiunta, una scelta oculata di colori ben contrastati a livello di luminosità (da verificare visualizzando la pagina in una scala di grigi) e ben contrastati a livello di tonalità sicuramente risolve questo tipo di problema.

Torna all'indice barriere per ipovedenti Materiale in movimento
Categoria:

Percezione

Causa:

Immagini o testo in movimento (ad es. testo scorrevole, immagine animata).

Tipo di fallimento:

Il materiale in movimento potrebbe essere posto in un luogo al di fuori del campo visivo dell'utente, con la conseguenza che il cambiamento non viene affatto notato.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Evitare di usare materiale in movimento, e dare sempre all'utente la libertà di avanzare nella fruizione del materiale.

Torna all'indice barriere per ipovedenti Immagini funzionali in sfondo
Categoria:

Utilizzazione

Causa:

La pagina contiene nello sfondo (ev. anche mediante regole CSS) delle immagini che nella pagina visualizzata assumono un ruolo funzionale. Ad es. corrispondono ad immagini cliccabili, a pulsanti, a etichette di controlli di form o a etichette di categorie di contenuti.

Tipo di fallimento:

L'utente che prova ad ingrandire la dimensione dei caratteri, e a modificare la forma e dimensione della finestra rischia di spostare i contenuti e disallineare la struttura dello sfondo con quella del materiale di primo piano. La conseguenza è che le immagini non sono più visualizzate nel contesto desiderato.

Inoltre l'utente potrebbe voler disabilitare i figli di stile della pagina ed usare il proprio stile. In questo caso non riuscirebbe a percepire proprio il materiale incluso con il CSS.

Rimedio:

Rimuovere le immagini funzionali dallo sfondo e includere le informazioni importanti direttamente nell'HTML. Agire poi con il CSS per ottenere l'effetto grafico desiderato.

Torna all'indice barriere per ipovedenti Immagini funzionali prive di testo
Categoria:

Utilizzazione

Causa:

La pagina contiene delle immagini funzionali (link cliccabili, pulsanti di invio per form, mappe immagine) prive di testo alternativo. Analogamente per pulsanti in Flash.

Tipo di fallimento:

L'utente non potrà ingrandire le immagini (nel caso in cui non usi l'ingranditore di schermo) e quindi potrebbe non essere in grado di leggerne o distinguerne il contenuto. Analogamente, nel caso debba cambiare i colori della pagina con il proprio foglio di stile, non potrà modificare nulla dell'immagine.

Rimedio:

Includere nelle immagini l'attributo ALT (IMG/@ALT, AREA/@ALT) o un contenuto anche testuale per OBJECT. Fare in modo che il testo sia informativo e che quindi permetta di capire l'effetto dell'attivazione del link.

Fare questo anche per i banner pubblicitari.

Evitare l'uso di ALT="" per un'immagine cliccabile (dentro un A) dato che comunque l'elemento è raggiungibile con la tastiera.

Torna all'indice barriere per ipovedenti Menu dinamici in JavaScript
Categoria:

Utilizzazione

Causa:

La pagina contiene del codice JavaScript che, non appena l'utente posiziona il focus dell'interazione su un elemento, viene aperto un menu in una determinata zona della pagina.

Tipo di fallimento:

L'utente dell'ingranditore di schermo potrebbe guardare una sezione della pagina che è lontana dalla parte della pagina che contiene il menu appena aperto, il quale quindi risulta esterno al campo visivo dell'utente, che non può fruirne.

Effetto:

Riduzione, anche drastica, dell'efficacia.

Rimedio:

Fare in modo che tutte le opzioni di navigazione e i comandi operativi (ad es. i comandi da menu) siano attivabili anche disattivando JavaScript. Magari offrendo in una sezione separata della pagina dei link o pulsanti ridondanti. Far in modo che tale pagina sia raggiungibile dalla pagina originale anche se javaScript è disabilitato.

Torna all'indice barriere per ipovedenti Mancanza di link interni
Categoria:

Utilizzazione, controllo da parte dell'utente

Causa:

La pagina, relativamente complessa e ricca di contenuto che spesso non viene tutto visualizzato insieme, manca di link interni alla pagina che permettano all'utente di saltare di sezione in sezione, o di ritornare in testa alla pagina.

Tipo di fallimento:

L'utente sarà costretto a muovere il campo visivo dalla parte inferiore della pagina alla barra di scorrimento (per spostare il contenuto della finestra) e poi di nuovo all'inizio della finestra per poter leggere il titolo della sezione e la sua parte iniziale.

Questo potrebbe essere ancora più grave nel caso di form complesse, nelle quali l'utente potrebbe non accorgersi della presenza di elementi importanti.

Effetto:

Una riduzione della produttività, e in misura minore dell'efficacia (dato che potranno essere compiuti errori ed omissioni).

Rimedio:

Alla fine di ciascuna sezione della pagina includere dei link per poter saltare alla fine della successiva sezione, all'inizio della sezione appena vista, in testa o alla fine della pagina.

Torna all'indice barriere per ipovedenti Righe di testo lunghe
Categoria:

Controllo da parte dell'utente

Causa:

La pagina contiene righe di testo troppo lunghe rispetto al campo visivo.

Tipo di fallimento:

Le righe più lunghe del campo visivo forzano l'utente a continuamente far scorrere il campo visivo da sx a dx per poter leggere il testo della riga, e poi di nuovo da dx a sx per andare all'inizio della riga successiva. Il problema è acuito dall'eventuale dover fare scrolling orizzontale della pagina, nel qual caso l'utente deve spostare il campo visivo anche in basso per localizzare ed "agganciare" la barra di scorrimento.

Effetto:

Il problema influenza la produttività e la soddisfazione; alla lunga influenza anche l'efficacia dato che l'utente si stanca e rischia di confondersi e quindi commette più errori e la sua motivazione nell'usare il sito si riduce.

Rimedio:

Il modo migliore di risolvere il problema è di supportare un layout liquido. In questo modo l'utente potrà modificare la larghezza della finestra e la dimensione dei caratteri senza che ciò causi la presenza della barra di scorrimento orizzontale. E comunque l'utente potrà settare la larghezza delle righe di testo in modo da ridurre gli scorrimenti del campo visivo.

Torna all'indice barriere per ipovedenti Troppi link
Categoria:

Comprensione, Controllo da parte dell'utente

Causa:

Troppi link nella pagina, talvolta non bene organizzati in gruppi.

Tipo di fallimento:

Il numero elevato di link costringe l'utente ad un'analisi lunga e faticosa di ciascuno di essi.

Gli utenti devono far scorrere il loro ristretto campo visivo su tutti i link, nelle varie zone della pagina, memorizzandoseli, prima di poter decidere se continuare la navigazione e quindi quale attivare. L'esame della pagina procede una sezione alla volta, con il rischio di dimenticarsi alcuni link visti in precedenza o la loro posizione. Il problema è acuito se la pagina richiede scrolling verticale od orizzontale.

Effetto:

Il problema influenza ovviamente la produttività e la soddisfazione; ma anche l'efficacia ne viene compromessa soprattutto se il problema si ripete dato che l'utente si stanca e rischia di confondersi e quindi commette più errori e la sua motivazione nell'usare il sito si riduce.

Rimedio:

Occorre riorganizzare i link suddividendoli in sezioni/categorie. Nella stessa pagina introducendo delle liste (UL) o DIV separate, introducendo dei titoli di categoria (con degli H2-H3). Eventualmente aggiungendo dei link intra-pagina (A/@href che punta ad un A/@name), eventualmente nascosti, per poter passare da un gruppo al successivo o al precedente. In pagine diverse rendendo più profondo il sito con delle pagine intermedie. Deve essere possibile per l'utente esaminare sinteticamente un blocco di link e decidere solo dal titolo del blocco se i link che esso contiene sono rilevanti o meno.

Inoltre bisogna supportare un layout liquido in modo che l'utente possa ingrandire il testo a piacimento, accorciando le righe di testo (utile per gli utenti di ingranditori di schermo) senza richiedere scrolling orizzontale.

Torna all'indice barriere per ipovedenti Form con redirect
Categoria:

Utilizzazione

Causa:

La pagina contiene delle form in cui alcuni controlli (campi o menu a tendina implementati con SELECT), una volta che vengono utilizzati, causano un submit al server il quale spedisce una nuova pagina al browser. Questo comportamento è basato su gestori di eventi JavaScript.

Tipo di fallimento:

Il problema è che per l'utente, una volta scelta una voce dal menu (ad es.) il browser attende qualche secondo e poi propone la nuova pagina riposizionando il focus all'inizio. L'utente deve quindi 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.

Effetto:

Riduzione anche marcata dell'efficacia e dell'efficienza. Le conseguenze si complicano se la pagina non è ben organizzata dal punto della navigazione interna (uso di H1-H2, uso di skip-links, uso di ACCESSKEY).

Rimedio:

Se possibile fare a meno dell'invio intermedio dei dati al server. Ove ciò non fosse possibile, adottare tutti gli accorgimenti necessari per limitare le conseguenze negative: usare i tag H1-H6 e DIV per suddividere in sezioni il contenuto della pagina, usare gli skip-links per permettere all'utente di saltare oltre barre di navigazione e materiale preliminare, fornire i controlli della form di ACCESSKEY per poter spostare direttamente il focus su di essi, includere le etichette dei controlli nel tag LABEL.

Torna all'indice barriere per ipovedenti Form ampie
Categoria:

Utilizzazione

Causa:

La pagina contiene una form i cui controlli sono sparsi in un'ampia area della pagina e disposti su più di una colonna.

Tipo di fallimento:

L'utente potrebbe non accorgersi della presenza di controlli in zone estreme della pagina (in alto o basso a dx), e quindi potrebbe cercare di inviare i dati senza aver compilato completamente la form.

Effetto:

Riduzione dell'efficacia e della produttività.

Rimedio:

Impaginare la form in maniera che visualmente sia chiaro dove essa termina (a dx e in basso). Preferire una disposizione su una sola colonna dei controlli.

Torna all'indice barriere per ipovedenti Finestre sovrapposte
Categoria:

Utilizzazione.

Causa:

La pagina contiene codice (HTML o JavaScript) che apre nuove finestre che si sovrappongono totalmente o quasi del tutto con la finestra usata sino a quel momento.

Tipo di fallimento:

L'utente non distingue la nuova finestra dalla precedente, e quindi si trova del tutto disorientato dal nuovo contesto di interazione.

Può ad es. capitare che l'utente 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 in primo piano), ottiene come risultato lo scambio delle due finestre e quella di primo piano, che l'utente stava esaminando, passa dietro, senza permettergli di capire cosa sia successo.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Evitare di aprire nuove finestre; se lo si deve proprio fare, fare in modo che sin dall'inizio della nuova pagina sia chiaro all'utente che si tratta di una nuova finestra e dargli/le modo di chiuderla. Evitare di sovrapporle completamente o quasi con la finestra principale.

Torna all'indice barriere per ipovedenti Temporizzazioni troppo brevi
Categoria:

Utilizzazione

Causa:

Il comportamento del server è di causare un refresh della pagina, magari con modifica del contenuto, senza che ci sia stato un qualche evento causato dall'utente per attivare tale comportamento.

Tipo di fallimento:

L'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.

Effetto:

Riduzione anche totale dell'efficacia.

Rimedio:

Evitare le temporizzazioni automatiche che cambiano stato alla pagina senza che l'utente le abbia richieste esplicitamente.

Torna all'indice barriere per ipovedenti Immagini come titoli
Categoria:

Comprensione

Causa:

La pagina contiene dei titoli di categoria (ad es. di un gruppo di link tra loro correlati, o di un gruppo di news) implementati mediante delle immagini che sono prive di attributo ALT.

Tipo di fallimento:

L'utente non potrà usare solamente il browser per ingrandire il contenuto della pagina, dato che ciò non produrrà l'effetto di ingrandire i titoli.

Egli dovrà per forza usare un ingranditore di schermo per poter fruire appieno della pagina, con la conseguenza di ridurre ulteriormente il proprio campo visivo.

Effetto:

Riduzione efficacia.

Rimedio:

Evitare di usare immagini per i titoletti di categorie. Usare invece le regole del CSS per ottenere il desiderato effetto grafico.

Torna all'indice barriere per ipovedenti Mancanza di tasti rapidi
Categoria:

Controllo da parte dell'utente

Causa:

La pagina contiene dei link o pulsanti o controlli di form che sono ricorrenti nelle pagine del sito e che non hanno alcun tasto rapido associato (con @ACCESSKEY).

Tipo di fallimento:

L'utente potrebbe usare i tasti rapidi per spostare velocemente e in maniera precisa il focus dell'interazione sulla parte della pagina che interessa, senza dover usare barre di scorrimento e senza dover spostare a mano il campo visivo.

Rimedio:

Per i link/pulsanti/controlli che sono ricorrenti nelle pagine del sito (cioè dove valga la pena che l'utente impari e ricordi che ci sono dei tasti rapidi associati) aggiungere l'attributo @ACCESSKEY ad A, INPUT, BUTTON. Ricordarsi di evitare di usare i caratteri che vengono usati nell'elenco dei nomi di menu del browser o le cifre (quest'ultime vengono usate da Firefox per saltare ad una determinata linguetta tra quelle aperte).

Ricordarsi di fare in modo che i tasti rapidi vengano descritti in qualche pagina di aiuto e che siano sempre gli stessi per un determinato link/pulsante/controllo.

Torna all'indice barriere per ipovedenti Testo non ridimensionabile
Categoria:

Controllo da parte dell'utente.

Causa:

La pagina contiene del testo per il quale sono state usate delle modalità di presentazione tali per cui non può essere ridimensionato. Ad es. unità di misura assolute del CSS (px, pt, cm) o tag deprecati come FONT/@SIZE.

Tipo di fallimento:

L'utente potrebbe (a seconda del browser usato) non riuscire ad ingrandire la dimensione del testo. Con la conseguenza di dover utilizzare un ingranditore di schermo.

Effetto:

Riduzione anche marcata dell'efficacia.

Rimedio:

Usare sempre unità di misura CSS di tipo relativo, come em e %.

Non usare mai FONT/@SIZE né immagini con il testo dipinto in pixel.

Torna all'indice barriere per ipovedenti Layout non ridimensionabile
Categoria:

Controllo da parte dell'utente

Causa:

La pagina ha una struttura di impaginazione non fluida, che non permette di modificare le dimensioni della finestra o quelle del testo senza compromettere la comprensibilità e fruibilità del contenuto.

Talvolta la pagina lascia inutilizzata una grossa proporzione dello schermo.

Tipo di fallimento:

L'utente non potrà massimizzare la finestra, né aumentare la dimensione del carattere. Sarà pertanto costretto ad usare un ingranditore di schermo.

Il problema è ancora più grave se il testo all'interno della pagina non fluisce correttamente, pregiudicandone la comprensione.

Effetto:

Riduzione anche marcata dell'efficacia.

Rimedio:

Usare il CSS per posizionare gli elementi della pagina ed usare sempre (eccetto per margini e bordi) delle unità di misura relative. Non usare tabelle di impaginazione che siano dimensionate mediante delle immagini spaziatrici estese usando delle unità di misura assolute (ad es. 145px).

Torna all'indice barriere per ipovedenti Skip links
Categoria:

Controllo da parte dell'utente

Causa:

La pagina non permette di saltare direttamente al contenuto, evitando il materiale preliminare e ripetuto nelle pagine (logo, briciole di pane, pulsantiera globale).

Tipo di fallimento:

L'utente non ha modo di posizionare direttamente il focus dell'interazione, e quindi il suo campo visivo, sul nocciolo della pagina.

Effetto:

Riduzione della produttività.

Rimedio:

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").

Torna all'indice barriere per ipovedenti Controlli del browser disabilitati
Categoria:

Controllo da parte dell'utente

Causa:

La pagina è stata aperta in una nuova finestra del browser dove i controlli tipici del browser non ci sono (back, next, refresh, ecc).

Tipo di fallimento:

L'utente è costretto a percorrere in lungo e in largo la pagina per trovare un link che gli/le permetta di tornare indietro o di rileggere l'URL della pagina.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Non disabilitare mai tali controlli.

Solamente nel caso di finestre temporanee, dove il primo link/pulsante permetta di chiuderle, è ragionevole pensare che i controlli normali vengano disabilitati.

Torna all'indice Riferimenti Metodologici [7.2.2] Barriere per utenti disabili motori

Torna all'indice barriere per disabili motori Menu a cascata
Categoria:

Utilizzazione

Causa:

La pagina contiene dei menu a cascata (implementati con delle SELECT annidate o mediante codice JavaScript).

Tipo di fallimento:

L'utente ha difficoltà nel posizionare il puntatore nelle voci giuste, e soprattutto per fare in modo che i menu secondari si aprano e rimangano aperti quando si scorrono le loro voci.

Effetto:

Riduzione dell'efficacia e della soddisfazione.

Rimedio:

Evitare i menu in cascata; eventualmente realizzare dei menu separati, meglio ancora se appiattiti (barre di navigazione con le voci esplicite) o basati su radiobutton.

Torna all'indice barriere per disabili motori Eventi mouse
Categoria:

Utilizzazione

Causa:

La pagina si basa su codice JavaScript per ottenere determinati effetti. Le routine vengono invocate mediante gestori di eventi legati al mouse (es. "onclick", "onmouseover", "onmouseout", ...).

Tipo di fallimento:

L'utente, che potrebbe preferire l'uso della tastiera al mouse per determinate azioni, si trova nella situazione in cui le funzionalità sembrano esserci ma non funzionano.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Usare anche i gestori di eventi logici ("onfocus", "onkeypress", ...).

Meglio ancora se le funzionalità fossero rese disponibili anche senza JavaScript.

Torna all'indice barriere per disabili motori Mancanza di link interni
Categoria:

Utilizzazione, controllo da parte dell'utente

Causa:

La pagina, relativamente complessa e ricca di contenuto che spesso non viene tutto visualizzato insieme, manca di link interni alla pagina che permettano all'utente di saltare di sezione in sezione, o di ritornare in testa alla pagina.

Tipo di fallimento:

L'utente è costretto a continuamente muovere il puntatore dalla pagina alla barra di scorrimento e viceversa.

Anche nel caso di utilizzo della tastiera (se ovviamente è possibile usarla), la mancanza di tali link richiede all'utente un uso più frequente dei tasti.

Effetto:

Aumenta il tempo necessario per completare il compito; aumentano gli errori (nell'uso della barra di scorrimento ad esempio). E quindi cala l'efficacia e la produttività.

Rimedio:

Alla fine di ciascuna sezione della pagina includere dei link per poter saltare alla fine della successiva sezione, all'inizio della sezione appena vista, in testa o alla fine della pagina.

Torna all'indice barriere per disabili motori Troppi link
Categoria:

Comprensione, Controllo da parte dell'utente

Causa:

Troppi link nella pagina, talvolta non bene organizzati in gruppi.

Tipo di fallimento:

Il numero elevato di link costringe l'utente ad un'analisi lunga e faticosa di ciascuno di essi.

Il gran numero di link, se disposti in maniera da richiedere dello scrolling verticale od orizzontale, forza l'utente a delle azioni con il mouse o con la tastiera che sono difficili da compiere con ù accuratezza (il pulsante di scroll è piccolo, il cursore della barra di scorrimento è piccola).

Effetto:

Il problema influenza ovviamente la produttività e la soddisfazione; ma anche l'efficacia ne viene compromessa soprattutto se il problema si ripete dato che l'utente si stanca e rischia di confondersi e quindi commette più errori e la sua motivazione nell'usare il sito si riduce.

Rimedio:

Occorre riorganizzare i link suddividendoli in sezioni/categorie. Nella stessa pagina introducendo delle liste (UL) o DIV separate, introducendo dei titoli di categoria (con degli H2-H3). Eventualmente aggiungendo dei link intra-pagina (A/@href che punta ad un A/@name), eventualmente nascosti, per poter passare da un gruppo al successivo o al precedente. In pagine diverse rendendo più profondo il sito con delle pagine intermedie. Deve essere possibile per l'utente esaminare sinteticamente un blocco di link e decidere solo dal titolo del blocco se i link che esso contiene sono rilevanti o meno.

Inoltre bisogna supportare un layout liquido in modo che l'utente possa ingrandire il testo a piacimento, accorciando le righe di testo (utile per gli utenti di ingranditori di schermo) senza richiedere scrolling orizzontale.

Torna all'indice barriere per disabili motori Link troppo vicini
Categoria:

Utilizzazione

Causa:

La pagina contiene delle sequenze di link molto vicini tra loro o molto piccoli.

Tipo di fallimento:

L'utente farà molta fatica a posizionare il mouse su dei link molto piccoli; in certi casi rischierà di colpire il link sbagliato, se posto vicino a quello desiderato.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Distanziare i link tra loro, ed assicurarsi che l'etichetta di ciascuno dei link sia sufficientemente grande.

Torna all'indice barriere per disabili motori Nuove finestre
Categoria:

Utilizzazione

Causa:

La pagina contiene del codice (HTML o JavaScript) che apre nuove finestre quando l'utente attiva dei link o pulsanti.

Tipo di fallimento:

Il dover muovere il mouse sul pulsantino di chiusura della finestra, ogni volta che questa appare, richiede all'utente una notevole fatica perché deve muovere il mouse sul pulsante, piccolo, di chiusura della finestra in alto a destra, nella barra del titolo.

Effetto:

Riduzione della produttività.

Rimedio:

Evitare di aprire nuove finestre in generale.

Se lo si deve proprio fare, fare in modo che sin dall'inizio della nuova pagina sia chiaro all'utente che si tratta di una nuova finestra e dargli/le modo di chiuderla.

Torna all'indice barriere per disabili motori Form senza LABEL
Categoria:

Utilizzazione

Causa:

La pagina contiene delle form i cui controlli sono privi del corretto markup LABEL/@FOR oppure è impaginata in maniera complessa (ad es. perché impaginata con una tabella il cui contenuto non si linearizza correttamente).

Tipo di fallimento:

Certi controlli hanno una superficie cliccabile ridotta (ad es. radiobutton o checkbox). L'utente farà quindi fatica ad attivare il controllo.

Effetto:

Riduzione della produttività.

Rimedio:

Aggiungere sempre il 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.

Torna all'indice barriere per disabili motori Temporizzazioni troppo brevi
Categoria:

Utilizzazione

Causa:

Il comportamento del server è di causare un refresh della pagina, magari con modifica del contenuto, senza che ci sia stato un qualche evento causato dall'utente per attivare tale comportamento.

Tipo di fallimento:

L'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.

Effetto:

Riduzione anche totale dell'efficacia.

Rimedio:

Evitare le temporizzazioni automatiche che cambiano stato alla pagina senza che l'utente le abbia richieste esplicitamente.

Torna all'indice barriere per disabili motori Mancanza di tasti rapidi
Categoria:

Controllo da parte dell'utente

Causa:

La pagina contiene dei link o pulsanti o controlli di form che sono ricorrenti nelle pagine del sito e che non hanno alcun tasto rapido associato (con @ACCESSKEY).

Tipo di fallimento:

L'uso della tastiera è spesso preferito; pertanto la presenza dei tasti rapidi migliora di molto l'usabilità del sito.

Effetto:

Riduzione della flessibilità, e quindi della produttività e soddisfazione.

Riduzione anche marcata della produttività.

Rimedio:

Per i link/pulsanti/controlli che sono ricorrenti nelle pagine del sito (cioè dove valga la pena che l'utente impari e ricordi che ci sono dei tasti rapidi associati) aggiungere l'attributo @ACCESSKEY ad A, INPUT, BUTTON. Ricordarsi di evitare di usare i caratteri che vengono usati nell'elenco dei nomi di menu del browser o le cifre (quest'ultime vengono usate da Firefox per saltare ad una determinata linguetta tra quelle aperte).

Ricordarsi di fare in modo che i tasti rapidi vengano descritti in qualche pagina di aiuto e che siano sempre gli stessi per un determinato link/pulsante/controllo.

Torna all'indice barriere per disabili motori Controlli del browser disabilitati
Categoria:

Controllo da parte dell'utente

Causa:

La pagina è stata aperta in una nuova finestra del browser dove i controlli tipici del browser non ci sono (back, next, refresh, ecc).

Tipo di fallimento:

L'utente è costretto a percorrere in lungo e in largo la pagina per trovare un link che gli/le permetta di tornare indietro o di rileggere l'URL della pagina.

Effetto:

Riduzione dell'efficacia.

Rimedio:

Non disabilitare mai tali controlli.

Solamente nel caso di finestre temporanee, dove il primo link/pulsante permetta di chiuderle, è ragionevole pensare che i controlli normali vengano disabilitati.

Torna all'indice Riferimenti Metodologici [7.3] Assegnazione di livelli di gravità ai problemi

In quasi tutti i metodi di valutazione dell'usabilità (eccetto la valutazione della conformità dell'accessibilità) è necessario procedere all'assegnazione di un livello di gravità ai problemi che vengono riscontrati. Questo serve onde poter distinguere tra problemi gravi e meno gravi, e poter quindi fornire delle raccomandazioni mirate e più utili a chi poi dovrà pensare a come risolvere i problemi.

Onde valutare la gravità di un problema di usabilità si suggerisce di considerare due parametri, l'impatto che un problema può avere sull'efficacia, produttività e sicurezza di un utente che sta svolgendo un determinato compito in una determinata situazione operativa e la frequenza con cui quel problema si presenta all'utente durante lo svolgimento di quel compito.

Usando una scala da 1 a 3 (3 per l'effetto peggiore) associata a ciascuno dei due parametri, si può poi con la tabella che segue derivare una classificazione della gravità che permette di distinguere tra problemi minori, seri e critici. Tale distinzione potrà poi venir usata dagli sviluppatori del sito per derivare altri tipi di giudizi (ad es. di priorità o urgenza).

Tabella di calcolo della gravità
impattofrequenzagravità
11minore
12minore
13serio
21serio
22serio
23critico
31critico
32critico
33critico

Si noti come questi giudizi, essendo basati su impatto rispetto ad efficacia o sicurezza, e su frequenza all'interno di un compito, permettono di derivare delle conclusioni sul grado di efficacia, produttività, soddisfazione e sicurezza che il sistema valutato supporta, e quindi di usabilità. Ovviamente è a carico del valutatore il determinare quale valore associare per ciascuno dei due parametri.

Per quanto riguarda l'impatto, i valori verranno assegnati usando i seguenti criteri di massima:

  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.

Si tenga conto che nell'assegnare il livello di impatto è necessario aver ipotizzato il livello di conoscenza ed esperienza che l'utente considerato possegga, sia relativamente all'uso di Internet e relativa tecnologia che relativamente all'uso del sito; sarà rispetto a questi livelli che l'impatto dovrà essere determinato.

Per la frequenza (riferita al numero di volte in cui il problema compare durante l'esecuzione di un compito) invece i valori possono essere:

  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.

Si noti come per l'efficacia e la sicurezza, solo l'impatto debba essere considerato; mentre sia l'impatto che la frequenza devono essere valutati per determinare l'influenza sulla produttività e sulla soddisfazione.