Comunicazione Web efficace e accessibilità dei siti scolastici

Università di Bergamo > Facoltà di Lettere e Filosofia > Marco Lazzari > Tesi > Case Study: WeBelotti.

CASE STUDY: WeBelotti,
il sito Web dell'Istituto "B. BELOTTI" di BERGAMO

La validazione automatica: Bobby e Torquemada

Successivamente sono passata all'analisi della Home Page con gli strumenti automatici Bobby e Torquemada.

Dopo essermi collegata al sito di Bobby http://bobby.watchfire.com/bobby ho inserito l'URL http://www.itc-belotti.org e ho scelto la validazione secondo le WCAG 1.0. Dopo qualche secondo è apparsa l'icona Repair Needed in quanto mancavano alcuni requisiti necessari richiesti.

Logo del validatore automatico Bobby

Skip to report

URL tested: http://www.itc-belotti.org/, January 21, 2005 3:17:28 AM CST Watchfire Bobby Core v4.0.1, WAI Content Accessibility Guidelines 1999/05/05, Support Level: AAA

Nell'intestazione, oltre al logo di Bobby, sono comparsi l'indirizzo, la data della validazione e il link alle linee guida WAI mentre nella seconda parte è comparsa la pagina con i fogli di stile disabilitati e l'elenco degli errori e avvertenze in ordine di priorità:

PRIORITY 1. I requisiti necessari erano soddisfatti: infatti non è apparsa la scritta error, ma solo la serie di punti di controllo umani (User Checks) che Bobby invita ad effettuare sugli elementi che il programma non è in grado di analizzare e sono:

If you can't make a page accessible, construct an alternate accessible version. Questa possibilità di creare una versione alternativa non è stata presa in considerazione in quanto il nostro scopo era rendere il sito accessibile.
Provide alternative content for each SCRIPT that conveys important information or functionality. è opportuno assicurarsi che le pagine siano utilizzabili quando gli script sono disabilitati oppure non supportati.
If style sheets are ignored or unsupported, are pages still readable and usable? I fogli di stile utilizzati non portano contenuto e dai test risulta che la pagina è comprensibile anche se non sono supportati i CSS. Nonostante ciò ho voluto renderla ancora più comprensibile e fruibile inserendo, prima di ogni sezione, la dicitura
div class="nascosto" hr /Titolo della sezione /div
affinché nella versione solo testo ci sia una riga che divida le varie sezioni con il rispettivo titolo invisibile nella versione supportata dai CSS.
If you use color to convey information, make sure the information is also represented another way. Nella Home il problema del colore si presentava, secondo il report, alle linee:
- 27 e 28 logo WeBelotti e Certificazione Internazionale. Queste componenti sono fornite di testo alternativo "alt" che esplicita il significato.
- 38 slogan "la tua password per il futuro". Questo testo è costituito da un'immagine alla quale ho aggiunto il testo alternativo "alt" esattamente uguale alla dicitura presente nell'immagine.
- 80-81, 84-85, 142-143, 157-159, 163-165. Queste parole sono colorate ma l'informazione è resa dalla grandezza del carattere definita dagli "Hn" indipendentemente dal colore.
If an image conveys important information beyond what is in its alternative text, provide an extended description. Nella Home il problema delle immagini si presentava, secondo il report, alle linee 24, 25, 35, 122-123, 137-139, 143-145. Ho ritenuto che il testo alternativo fosse già esaustivo in quanto queste immagini non necessitano di una lunga descrizione in quanto hanno valore simbolico più che fotografico.

PRIORITY 2. Non tutti i requisiti necessari erano soddisfatti e sono stati segnalati 2 errori:

Make sure event handlers do not require use of a mouse. è necessario non legare la gestione degli eventi provocati dall'utente al solo mouse. Ho quindi sostituito l'evento OnClick per l'attivazione degli script con OnKeypress;
Provide an explicit label for each form control. Nella Home il problema del form si presentava, secondo il report, alla linea 66. Il form di questa pagina consente la ricerca di una parole o all'interno del sito d'Istituto o con il motore di ricerca Google. è necessario che ad ogni form sia associata una "label" ossia un'etichetta esplicativa.

Inoltre sono stati segnalati i seguenti punti di controllo:

Make sure that labels of all form controls are properly placed. è opportuno controllare che tutte le etichette associate ai form siano posizionate correttamente
If there are logical groupings of form controls, use FIELDSET with LEGEND on each group. Nella Home il problema si presentava, secondo il report, alla linea 63. E' necessario dividere grandi blocchi di informazione in gruppi più maneggevoli.
Is the user made aware that there will be pop-up windows or changes in the active window? Nella Home il problema si presentava, secondo il report, alle linee 52, 53, 54, 63, 79, 83, 99, 100, 109, 117, 149. Si tratta di link esterni che si aprono in una nuova finestra del browser. Inizialmente ho inserito un "title" con la dicitura "apre una nuova finestra del browser" per avvisare gli utenti, in seguito, con il passaggio all'XHTML 1.1 tutti i "target" sono stati eliminati e i link si aprono nella stessa pagina.
If programmatic objects create pop-up windows or change the active window, make sure that the user is aware this is happening. Nella Home il problema si presentava, secondo il report, alla linea 12. Si tratta della riga che corrisponde alla scelta della modalità di visualizzazione ed in questo caso l'utente è al corrente di quello che sta accadendo.
Make sure header elements are not used only for bold text. è opportuno usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.
Check that the foreground and background colors contrast sufficiently with each other. Nella Home il problema si presentava, secondo il report, alle linee 27, 28, 38, 80-81, 84-85, 142-143, 157-159, 163-165. Riguardo al contrasto sui colori è stato fatto uno studio e dei test di cui parleremo in seguito.
Mark up any quotations with the Q and BLOCKQUOTE elements.

Do not create a blinking effect with animated gif images. Nella Home il problema si presentava, secondo il report, alla linea 27. In questo caso l'immagine ha un formato gif ma non è in movimento.

PRIORITY 3. Non tutti i requisiti necessari erano soddisfatti e sono stati segnalati 2 errori:

Include default, place-holding characters in edit boxes and text areas. Nella Home il problema del form si presentava, secondo il report, alla linea 66. è necessario che ogni form sia associata oltre che l'attributo "label" (come visto prima) anche l'attributo "value" che suggerisce all'utente cosa deve inserire nella casella di testo del form.
Separate adjacent links with more than whitespace. Nella Home il problema si presentava, secondo il report, alla linea 162. Erano presenti due link esterni ravvicinati ed era necessario dividerli affinché l'utente con qualche disabilità motoria non avesse problemi nel cliccare il link.

Inoltre sono stati segnalati i seguenti punti di controllo:

Consider furnishing keyboard shortcuts for form elements. è opportuno fornire scorciatoie da tastiera anche per i form.
If this document is part of a collection, provide metadata that identifies this document's location in the collection. è opportuno fornire informazioni sulle raccolte di documenti (cioè documenti composti da più pagine).
Consider specifying a logical tab order among form controls, links and objects. è opportuno creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti.
If you have grouped links, is there a link at the beginning to bypass the group? è opportuno per i gruppi di link fornire un modo per saltare il gruppo.
If there are logical groups of links, have they been identified and a link to skip the group provided? è opportuno per i gruppi di link, che siano identificati e sia fornito un modo per saltare il gruppo.

Terminata la validazione con Bobby ho effettuato la validazione con Torquemada collegandomi all'indirizzo http://www.webxtutti.it/testa.htm per ottenere un riscontro ai problemi rilevati da Bobby.

Come con Bobby, ho inserito l'indirizzo Internet dell'Istituto nell'apposito campo, ho scelto il tipo di report e attivato il validatore. L'utilizzo di Torquemada è risultato più semplice: innanzitutto è in italiano, inoltre viene visualizzato il codice HTML con il numero della riga rendendo più facile la comprensione dell'errore.

Logo del validatore automatico Torquemada

Report dell'url: http://www.itc-belotti.org

Eseguito il 22-01-2005 alle ore 12:12

Torquemada versione 2.0

Il report restituito riportava essenzialmente le stesse avvertenze di Bobby ma non segnalava errori.

Report grafico, grafico leggero e testuale:

Elemento: A, Area

Attributo: Target

Commento: Attenzione: un link aprira' una nuova finestra di navigazione. L'utente ne e' al corrente? E' opportuno non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente

Elemento: A

Attributo: Title

Commento: Attenzione: si potrebbe aumentare l'espressivita' di un link utilizzando l'attributo TITLE. In seguito a questa segnalazione ho assegnato l'attributo "title" a tutti i link, compresi quelli interni affinché l'utente sappia sempre cosa sta per accadere.

Elemento: A, Area, Button, Input, Label, Legend, Textarea

Attributo: Tabindex

Commento: Attenzione: non e' stato specificato un ordine di navigazione tramite tabulazioni all'interno della pagina. Questo non era stato segnalato da Bobby e ho provveduto alla specificazione di un ordine logico con l'attributo "tab" che permette di saltare da link a link nell'ordine in cui questi appaiono nel file. Inoltre ho inserito l'attributo "accesskey" rendendo possibile la navigazione con l'utilizzo della tastiera.

Elemento: Img

Attributo: Longdesc

Commento: Attenzione: nel caso di immagine molto espressiva potrebbe essere necessario specificare un link ad una descrizione alternativa attraverso l'attributo. È opportuno fornire un equivalente testuale descrittivo in caso di immagini molto espressive e significative.

Attributo: onmousedown, onmouseup, onclick, onmouseover, onmouseout, onmousemove

Commento: Attenzione: e' consigliabile l'utilizzo di logical event handlers invece che device-dependent event handlers. Deve essere garantita l'indipendenza dal dispositivo utilizzato per l'input

Elemento: Link, Style

Commento: Attenzione: assicurarsi che la pagina possa essere visualizzata correttamente anche disabilitando l'utilizzo degli stylesheet. Come già verificato la pagina è comprensibile senza il supporto di CSS.

Prosegue con: La verifica con vari browser.