Salta al contenuto principale

Relazioni per il corso di PSW

Simulazione euristica barriere del sito www.unimib.it


Autori: Daniele Ceglia (93581 - daniele.rulez@gmail.com) e Andrea Iannelli (93672 - ianne85@gmail.com)

Data stesura rapporto: 19/06/2010


Introduzione

Di seguito sono presentati i risultati della simulazione euristica barriere effettuata sul sito dell'Università degli Studi di Milano-Bicocca.

Sono state analizate più pagine, per dichiare che il sito sia esente da un particolare barriera, è stato neccessario che tutte le pagine considerate non abbiano rilevato la presenza della barriera in oggetto.

Durante l'analisi inoltre è stato assegnato un livello di gravità ai problemi riscontrati.

Per valutare la gravità di un problema di usabilità sono stati considerati due parametri:

  1. 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;
  2. la frequenza con cui il problema si presenta all'utente durante lo svolgimento di quel compito.

Per quanto riguarda l'impatto i valori sono stati assegnati secondo i seguenti criteri:

Invece, per la frequenza i valori sono stati assegnati secondo i seguenti criteri:

A partire dai valori assegnati a frequenza ed impatto si assegna poi il valore della gravità secondo la seguente tabella:

Tabella per calcolare la gravità di un difetto.

Impatto Frequenza Gravità
basso bassa minore
basso media minore
basso alta importante
medio bassa importante
medio media importante
medio alta critica
alto bassa critica
alto media critica
alto alta critica

Per simulare l'utilizzo del sito come un'utente ipovedente abbiamo utilizzato l'igranditore di schermo dinamico presente nella distribuzione Linux Ubuntu con il gestore degli effetti desktop Compiz attivato.
Questo ingranditore permette di "zoommare" dinamicamente, e senza soluzione di continutà, l'area attualmente visualizzata dello schermo semplicemente tenendo premuto il tasto SUPER ed utilizzando la rotella centrale del mouse per regolare il livello di zoom.
In seguito muovendo il mouse l'area ingrandita dello schermo segue il cursore.

Come browser abbiamo utilizzato Firefox 3.6 e Chrome 5.



Perimetro dell'indagine

Nel dettaglio sono state testate le seguenti pagine del sito:

  1. Home
  2. Area Sistemi Informativi - WiFi
  3. Dipartimenti
  4. Università e lavoro
  5. Come iscriversi

Queste pagine scelte a caso tranne nel fatto che siano abbastanza "variegate" tra loro.

Le pagine sono state analizzate il giorno 07/06/2010.

Abbiamo scelto di simulare l'utilizzo del sito da parte di un'utente ipovedente.



Sommario risultati

Indice barriere (utente ipovedente):

      1.   [A]       Immagini ricche che sono mal posizionate
      2.   [A]       Immagini ricche incluse nello sfondo pagina
      3.   [A]       Il colore è necessario
      4.   [A]       Insufficiente contrasto visivo
      5.   [A]       Frame inaccessibili
      6.   [A]       Materiale in movimento
      7.   [A]       Mappe immagine
      8.   [P]       Immagini funzionali in sfondo
      9.   [A]       Immagini funzionali prive di testo
    10.   [P]       Tooltip troppo lunghi
    11.   [A]       Menù dinamici in JavaScript
    12.   [P]       Mancanza di link interni
    13.   [P]       Righe di testo lunghe
    14.   [P]       Troppi link
    15.   [A]       Form con redirect
    16.   [A]       Form ampi
    17.   [P]       Finestre sovrapposte
    18.   [A]       Temporizzazioni troppo brevi
    19.   [A]       Immagini usate come titoli
    20.   [A]       Mancanza di tasti rapidi
    21.   [A]       Il testo non può essere ridimensionato
    22.   [P]       Layout di pagina inflessibile
    23.   [A]       Mancanza di suggerimenti nel layout grafico
    24.   [P]       Skip links non implementati
    25.   [A]       Finestra del browser senza controlli
    26.   [A]       Dati di una tabella non ordinabili
    27.   [A]       Modifiche dinamiche

Il sito esaminato risulta essere abbastanza ben fatto per l'accessibilità.

I principali problemi riscontrati per un utente ipovedente sono la difficoltà che il sito gli impone con visualizzazioni troppo ampie e che lo obbligano frequentemente a cambiare la zona attualmente "zoommata" o il livello di zoom stesso utilizzato dall'ingranditore di schermo.
Anche la complessità del sito, che in alcune pagine è elevata, può portare a disorientamento.

Va comunque detto che il sito propone una sua versione ad alta leggibilità, la quale risulta però essere alquanto "ridotta" nei contenuti offerti e che potrebbe non soddisfare tutte le esigenze dell'utente.

Quindi il sito si può considerare sufficientemente accessibile a discapito però della scelta iniziale che l'utente dovrà effettuare, cioè se fruire del sito completo, con però alcuni problemi di accessibilità, oppure del sito in versione ad alta leggibilità.



Risultati in dettaglio


1. Immagini ricche che sono mal posizionate

The page layout is suboptimal because there are no graphical cues that suggest that there is an important image.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non ci sono immagini al di fuori del campo visivo e non ci sono layout che potrebbero suggerire all'utente che la pagina sia terminata anche se in realtà non lo è.

Torna su.


2. Immagini ricche incluse nello sfondo pagina

Images that convey information are included as background (using CSS); hence there is no way to attach any equivalent text to them.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Sono presenti immagini da CSS, tuttavia non veicolano informazioni.

Torna su.


3. Il colore è necessario

The page contains material (text, images, background, videos) where color is used as the sole mean to distinguish two or more different information items. [...]

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non ci sono informazioni veicolate esclusivamente dai colori.

Torna su.


4. Insufficiente contrasto visivo

The page contains foreground material placed against a background. The colors used to paint both of them have to little contrast. [...]

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: I colori utilizzati sono sufficientemente contrastanti tra loro.

Torna su.


5. Frame inaccessibili

The page is based on frames.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non sono stati utilizzati frame.

Torna su.


6. Materiale in movimento

Images or text that moves (for example running text, animated GIF).

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non è presente alcun'immagine o testo in movimento.

Torna su.


7. Mappe immagine

The page contains (client side) image maps, even with appropriate alternative text.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non è presente alcuna mappa immagine.

Torna su.


8. Immagini funzionali in sfondo

The page background contains images that have a functional role. For example they are positioned in a way that they correspond to clickable areas, to buttons, or to labels of form controls or of categories of items.

Barriera: PRESENTE
Impatto: basso
Frequenza: bassa
Gravità: minore

Commento: Nella pagina del WiFi ci sono immagini da sfondo CSS che, quando si ingrandiscono i caratteri al massimo, il testo ("AREA RISERVATA STUDENTI & DOTTORANDI") esce dallo sfondo rendendo il contrasto testo sul "nuovo sfondo" praticamente nullo.

Torna su.


9. Immagini funzionali prive di testo

The page contains functional images (clickable links, form buttons, image maps) that don't have alternative equivalent text. Similarly for Flash buttons and links.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Tutte le immagini cliccabili hanno un testo alternativo.

Torna su.


10. Tooltip troppo lunghi

The page contains links or images that are associated to tooltips (shown when hovering with the mouse), whose text is relatively long. [...]

Barriera: PRESENTE
Impatto: basso
Frequenza: media
Gravità: minore

Commento: In quasi tutte le pagine sono presenti tooltip troppo lunghi.

Torna su.


11. Menù dinamici in JavaScript

The page contains JavaScript code so that, as soon as the user moves the focus of interaction onto an element, a menu drops down in a given area of the page.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non ci sono menù dinamici in JavaScript.

Torna su.


12. Mancanza di link interni

The page, which is complex and full of contents that usually cannot be used completely in a window without requiring scrolling, does not have internal links that would allow the user to jump from section to section, or to return to the beginning of the page.

Barriera: PRESENTE
Impatto: medio
Frequenza: bassa
Gravità: importante

Commento: Non ci sono link interni che permettano all'utente di poter tornare all'inizio dell'argomento (vedere ad esempio la pagina Dipartimento).

Torna su.


13. Righe di testo lunghe

The page contains text lines that are too long for the user's field of vision.

Barriera: PRESENTE
Impatto: medio
Frequenza: bassa
Gravità: importante

Commento: Nella pagina WiFi il testo non è "liquido".

Torna su.


14. Troppi link

The page contains too many links, that are perhaps not well organized in clearly labeled groups.

Barriera: PRESENTE
Impatto: medio
Frequenza: media
Gravità: importante

Commento: In quasi tutte le pagine sono presenti molti link.

Torna su.


15. Form con redirect

The page contains a form where some controls, as soon as they are used, cause a submit to the server which returns a new, updated, page. [...]

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non ci sono form con redirect.

Torna su.


16. Form ampi

The page contains a form whose controls are spread on a wide region of the page and they are arranged on more than one visual column.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non sono presenti form di dimensione ampia.

Torna su.


17. Finestre sovrapposte

The page contains JavaScript or HTML code that opens new windows that are overlapping with the window that is being used and cover it completely/substantially.

Barriera: PRESENTE
Impatto: medio
Frequenza: alta
Gravità: critica

Commento: In quasi tutte le pagine ci sono link che aprono nuove finestre/schede (questi link sono solo segnalati tramite un'icona come "link esterni").

Torna su.


18. Temporizzazioni troppo brevi

The web page is automatically refreshed after a certain time has elapsed (that is, its content is changed and/or a new page is reloaded by the browser without the user asking for it).

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non è presente AJAX e nemmeno l'uso di reload automatico nelle pagine.

Torna su.


19. Temporizzazioni troppo brevi

The page contains titles of categories (e.g. a group of news, a group of related links) that are implemented through images that have no ALT text. [...]

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Quelle poche immagini che fanno anche da titolo possiedono un testo alternativo (vedere ad esempio la pagina WiFi).

Torna su.


20. Mancanza di tasti rapidi

The page has links/buttons/form controls that are repeated on many other pages (like in a web application) and no keyboard shortcut is defined with ACCESSKEY.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Va però precisato che, anche se presenti, gli accesskey sono mal "pubblicizzati" e sono disponibili solo per funzionalità di base.

Torna su.


21. Il testo non può essere ridimensionato

The page contains text that cannot be resized because of the way in which the font size has been specified (deprecated FONT tag, or absolute units in CSS like px, pt, in). [...]

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: È una funzionalità prevista dal sito.

Torna su.


22. Layout di pagina inflessibile

The page has a layout that is not liquid; that is, it does not adapt to window size nor does it adapt to resized text. If the user enlarges the window then its content does not adapt to the changes; if the user increases text size then objects in the window overlap or are clipped.

Barriera: PRESENTE
Impatto: basso
Frequenza: bassa
Gravità: minore

Commento: Nella pagina WiFi il layout non è fluido.

Torna su.


23. Mancanza di suggerimenti nel layout grafico

The page uses graphical cues to help understanding its contents (eg. vertical alignment, indentation, colors, white space, horizontal lines) that may disappear when using high magnification levels.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Il layout anche se ingrandito aiuta l'utente ad orientarsi.

Torna su.


24. Skip links non implementati

The page does not allow the user to jump directly to the content, skipping over preliminary stuff,links like logos, breadcrumbs, search boxes, global navigation bars).

Barriera: PRESENTE
Impatto: basso
Frequenza: media
Gravità: minore

Commento: Gli skip link sono presenti, ma sono nascosti da CSS, quindi solo i lettori di schermo possono vederli (di fatto sono utili solo agli utenti completamente non vedenti).

Torna su.


25. Finestra del browser senza controlli

The page has been opened within a new browser window but the usual browser controls (address bar, back, next, refresh buttons, ...) are missing.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non accade.

Torna su.


26. Dati di una tabella non ordinabili

The page contains a data table whose column headers can be clicked in order to sort table rows.

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non ci sono tabelle dati (solo tabelle utilizzate per il layout).

Torna su.


27. Modifiche dinamiche

The page is part of a web application based on AJAX where dynamic changes of the DOM occur. [...]

Barriera: ASSENTE
Impatto: -
Frequenza: -
Gravità: -

Commento: Non è utilizzato AJAX, né reload automatico e nemmeno JavaScript per modificare "piccole" parti della pagina.

Torna su.




Sito realizzato da Daniele Ceglia e Andrea Iannelli.

XHTML 1.0 Strict valido! CSS 2.1 valido! Validato da HTML Validator! (Analizzatore SGML) Validato da HTML Validator! (HTML Tidy)