Si.Tra.

1. Si.Tra. DEIT, Dipartimento di Elettronica Intelligenza Artificiale e Telecomunicazioni UniversitàPolitecnica delle Marche, Ancona Studio dell'accessibilità del portale ASSAM - Si.Tra. Sistema Informatico di Tracciabilità e Rintracciabilità dei prodotti agroalimentari Relatore prof. Aldo Franco Dragoni Candidato Federico Trevisani Corso di laurea in Ingegneria Informatica e dell’Automazione

2. Il web è ormai una risorsa chiave per l’ acquisizione di informazioni. L’ impossibilità di accedere al web potrebbe diventare un ulteriore elemento di emarginazione, invece di un’occasione irripetibile per favorire l’integrazione dei disabili e degli anziani. Web Accessibility

3. La Web accessibility ha una valenza: sociale economica tecnologica L’ accessibilità si basa su uno dei principi fondamentali del Web: l’ Universal Access (accesso alle informazioni garantito a persone con culture, tradizioni e strumenti diversi, e quindi anche ai disabili). Beneficiari dell’accessibilità

4. Accessibileè un contenuto web che può essere fruito da un utente indipendentemente che esso sia affetto da disabilità o limitazioni fisiche e/o cognitive, occasionali o permanenti, e indipendentemente dal tipo di tecnologia utilizzato per collegarsi alla Rete. In definitiva rendere un contenuto accessibile significa renderlo raggiungibile sia fisicamente (percepibile) che mentalmente (comprensibile) da tutte le categorie di utenti (disabili inclusi). Ma cos’è l’Accessibilità?

5. Legge Stanca • L’Italia si è posta all’avanguardia rispetto alla maggior parte delle altre nazioni, di uno strumento legislativo pensato per tutelare il diritto degli utenti con disabilitàa fruire degli strumenti informatici, e in particolare di Internet, senza subire discriminazioni rispetto ai cosiddetti “normodotati”. L’ accessibilità dei siti è quindi un elemento irrinunciabile nella realizzazione di servizi forniti per via telematica. • Il disegno di legge sull’Accessibilità delle applicazioni telematiche, è stato approvato dal Senato e pubblicato sulla G.U. n°13 del 17/01/2004 come legge 4/2004 intitolata: Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici, nota anche come “legge Stanca” (dal nome dell’allora ministro per l’innovazione e le tecnologie Lucio Stanca). • Questo significa che tutti i siti della Pubblica Amministrazione italiana, i siti che godono di finanziamento pubblico,aziende private concessionarie di servizi pubblici, aziende municipalizzate regionali, ecc… saranno obbligati al rispetto delle linee guida sull’Accessibilità. • Tale normativa prevede responsabilità precise, anche a livello dirigenziale, per l’ inosservanza del principio fondamentale di garantire l’ accesso all’ informazione a tutti.

6. Il World Wide Web Consortium (o W3C),è un ente sovranazionale senza scopo di lucro, che ha lo scopo di standardizzare i linguaggi e le tecnologie per il Web. La sezione che si occupa di accessibilità all’interno del W3C è la WAI (Web Accessibility Initiative) Le Web Content Accessibility Guidelines 1.0 (WCAG 1.0), W3C Recommendation del 5 maggio 1999, sono ormai assunte come standard de facto per la definizione dei criteri di accessibilità dei siti. Il documento elenca 14 guideline (o principi per una progettazione accessibile). Gli esperti della WAI stanno lavorando da ormai diversi anni alle WCAG 2.0. WCAG 1.0

7. WCAG 1.0 Ciascuna “Linea Guida” è approfondita da dei Punti di Controllo (checkpoint) che analizzano le situazioni tipiche delle pagine Web. Ad ogni Punto di Controllo è assegnato un livello di priorità basato sull'impatto che esso possiede sull'accessibilità. Priorità 1 : obbligatorio per garantire l’accesso al contenuto. Priorità 2 : difficoltà nell’accesso al contenuto per alcuni utenti. Priorità 3 : facoltativo ma migliora l’accesso ai documenti web.

8. Tecnologie assistive • Browser testuali: un programma utente che elimina automaticamente tutti gli elementi grafici presenti in un documento web, mostrando all’utente solo i testi in esso contenuti, comprese le descrizioni testuali alternative. L’interazione con l’utente avviene principalmente via tastiera. • Screen readers:lettore di schermo, è un software che traduce i contenuti presenti sul monitor di un computer in una forma differente da quella grafica, di solito in parole pronunciate da una voce sintetica. • Display Braille:tavoletta costituita da una riga di 40 /80 celle Braille, fatta ognuna da 6/8 punti a rilievo: Grazie a meccanismi piezoelettrici, i punti a rilievo si alzano e si abbassano di continuo, riproducendo sulla barra le lettere alfabetiche che compongono le parole presenti sullo schermo. • Ingranditori di schermo:software che, usando varie modalità, ingrandisce in tutto o in parte i contenuti del monitor. • Sistemi operativi:strumenti per l’accessibilità incorporati.

9. Browsers utilizzati • Internet Explorer • Mozilla Firefox • Safari • Konqueror (linux) • WebbIE (testuale) • WinGuido (vocale)

12. Fornire contenuti che, quando presentati all’utente, svolgono essenzialmente la stessa funzione o scopo dei contenuti uditivi o visivi. Linea guida 1 Punto di controllo 1.1 (Priorità 1): Fornire un equivalente testuale per ogni elemento non di testo.

13. Motivazione Requisito da soddisfare per garantire l’accessibilità a livelli minimi. Molti utenti utilizzano strumenti di navigazione che si basano sui soli contenuti testuali (non vedenti) è quindi necessario fornire equivalenti testuali per immagini, rappresentazioni grafiche di testo (compresi i simboli e loghi), ecc. Punto di controllo 1.1

14. Problemi riscontrati • Non tutte le immagini e loghi del sito avevano testo alternativo per permetterne la visualizzazione in caso di immagini disabilitate. N.B. Questo punto di controllo è di priorità 1.

15. Soluzione adottata • Inserimento all’interno dei tag <img> di tutte le pagine del sito dell’attributo alt=“testo alternativo” Esempio nella pagina iniziale: <img src="img/filieraittica.gif" alt="Filiera Ittica" class="pics" /> E nel logo dell’assam in alto a destra: <img src="img/logoassamsmall.gif" alt="Logo ASSAM" />

18. Linea guida 3 Marcare i documenti per mezzo degli appropriati elementi strutturali. Controllare la presentazione tramite i fogli di stile piuttosto che tramite elementi e attributi di presentazione.

19. Linea guida 3 • Punto di controllo 3.2 (Priorità 2): Creare documenti che possano essere validati confrontandoli con una grammatica formale pubblicata. • Punto di controllo 3.3 (Priorità 2): Usare i fogli di stile per controllare l’impaginazione e la presentazione. • Punto di controllo 3.4, priorità 2 Usare unità di misura relative invece che assolute nei valori di attributo del linguaggio di marcatura e nei valori di proprietà dei fogli di stile. • Punto di controllo 3.5 (Priorità 2): Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche • Punto di controllo 3.6 (Priorità 2): Marcare le liste ed elencare le voci della lista in modo appropriato • Punto di controllo 3.7 (Priorità 2): Marcare le citazioni

20. Punto di controllo 3.3 (priorità 2)Punto di controllo 6.1 (priorità 1) • Usare i fogli di stile per controllare l’impaginazione e la presentazione. • Organizzare i documenti in modo che possano essere letti senza i fogli di stile.

21. Linea guida 3 • Contenuto. È l’informazione fornita da un documento (testi, immagini, tabelle, grafici, filmati … • Presentazione. È il modo in cui i contenuti appaiono all’utente ovvero l’insieme delle loro caratteristiche. L’insieme degli stili applicati a un documento: i fogli di stile (CSS). • Struttura. È l’insieme delle relazioni tra i contenuti di un documento. I rapporti di subordinazione e di coordinazione tra i contenuti sono l’ossatura, lo schema che rappresenta la struttura di un documento. <tag>

22. Motivazioni • 3.3) Rende il documento più pulito, leggero e ordinato in modo da garantire una fruizione ottimale da parte di screen readers, browser testuali. • 6.1)Garantire la fruibilità della pagina disabilitando i fogli di stile in modo che un utente possa comunque accedere ai contenuti in un ordine di lettura comprensibile.

23. Motivazioni 3.2)La creazione di contenuti web che non rispettano le grammatiche formali pubbliche causano dei problemi di accesso ai contenuti da parte di utenti che utilizzano browser o tecnologie assistive che non riescono ad identificare elementi o attributi non standard. 3.4) Le unità di misura relative, quali em e , % consentono di impostare testi ridimensionabili e layout liquidi, che hanno la proprietà di adattare i contenuti, nei limiti del possibile, alla larghezza della finestra del browser. • riduce il rischio di comparsa della barra di scorrimento orizzontale,(fattore d’inaccessibilità grave per gli utenti ipovedenti). 3.5) Gli elementi da H1 a H6 sono fondamentali per l’accessibilità. Permettono infatti di stabilire la gerarchia reciproca dei contenuti di un documento e sono utili soprattutto per chi naviga con un sintetizzatore vocale. 3.6) Gli elenchi ordinati aiutano gli utenti non-visuali nella navigazione

24. Problemi riscontrati (1) • Nel codice c’è un mix di contenuti, strutture e presentazioni (tag soup). • Il foglio css risulta scarno e la maggior parte degli elementi di presentazione sono “inline” nella pagina (tag soup). ESEMPIO (homepage): <hr color =green size =2/><span style="color: #1267bc"> Pesce</span><a href=filiera_ittica_rb.html><br /> <img src ="img/filieraittica.gif" alt="Filiera Ittica" style="width: 124px; height: 56px" /></a> <hr color =green size =2/> <a href=filiera_bovini_rb.html > Carne Bovina <img src ="img/filierabovini.gif" alt="filiera bovini" style="width: 121px; height: 66px" /></a> …

25. Soluzioni adottate (1) • Eliminazione dal codice di marcatura gli elementi e gli attributi di presentazione,sostituendoli con l’uso dei fogli di stile per ottenere equivalenti effetti di formattazione. • Inserimento di appositi elementi strutturali al posto di quelli usati impropriamente. • Rielaborazione e completamento del foglio di stile • In questo modo ogni elemento strutturale (img,div,body,p,H1, ecc.) ha la propria presentazione nel foglio di stile foglia.css. • L’ allineamento, i margini e il posizionamento degli elementi nella presentazione di una pagina sono stati gestiti anch’essi tramite il foglio di stile CSS

26. Soluzioni adottate (1) ESEMPIO (homepage): <a href="filiera_latteAQ_rb.html" title="Filiera Latte" class="grass"> Latte Alta Qualità</a> <div class="pi"> <a href="filiera_latteAQ_rb.html" class="pic" title="Filiera Latte"><img src="img/filieralatteAQQM.gif" alt="Filiera Latte" class="pics" /></a></div> Eliminando del tutto la presentazione nel documento html che viene affidata ai fogli di stile, gli elementi essenziali della struttura rimangono visibili e comprensibili per il lettore.

27. Problemi riscontrati (2) • Togliendo la presentazione dalle pagine il sito risulta poco accessibile • Utilizzando alcuni browser i contenuti si sovrapponevano rendendo alcune pagine poco leggibili. • Pagine non adatte per risoluzioni più basse (comparsa barra scorrimento orizzontale)

28. Visione piatta ORIGINALE

29. Visione con liste a più livelli MODIFICATO

30. ORIGINALE

31. MODIFICATO

32. Soluzioni adottate (2) • Ristrutturazione della pagina tramite i tag contenitori <div> e posizionamento tramite l’attributo “float”. • Dimensionato tutti i div, immagini e tabelle (height e width) in unità relative (% ; em) nel foglio di stile. In questo modo al ridimensionamento della pagina tutti gli elementi si riducono a fisarmonica evitando cosi la comparsa della barra orizzontale. • Ottimizzazione del sito fino alla risoluzione 800*600 • Dimensione del testo in “em” e non piu in “pt” o “px” per facilitarne l’ingrandimento a favore degli ipovedenti che utilizzano gli ingranditori di schermo.

33. Originale

34. Modifica

35. RISOLUZIONE 800*600 Comparsa barra orizzontale Layout liquido: Visione compatta al ridimensionamento della pagina

36. Controllo della validità del linguaggio di marcatura per ogni pagina del sito controllo automatico della sintassi (Markup Validation Service) http://validator.w3.org/ . Errori vari: mancate chiusure di tag, omissione di virgolette per i valori degli attributi, attributi sconosciuti ecc.. Problemi riscontrati / Soluzioni adottate

37. Problemi riscontrati (3) • Il testo non racchiuso in paragrafi ma “libero” nella pagina • Errori nelle liste • menu mal strutturati <h1>Si.Tra. - SIstema di TRAcciabilità </h1> Attualmente il sistema agroalimentare è interessato da una profonda rivisitazione in termini di sicurezza…

38. Soluzioni adottate (3) • Rispetto della gerarchia delle intestazioni e aggiunta dello stile al livello h3 nel css. • Rivisitazione di tutte le liste ordinate <ol>, non ordinate <ul> e di definizione <dl> all’interno delle pagine e inserimento di lista non ordinata per il menu di destra, modifica della struttura a lista del menu di sinistra. (FAQ e Disciplinari) • Divisione dei testi in paragrafi <p> per facilitare chi utilizza screen readers o browsers testuali. ESEMPIO: MENU DX SENZA CSS ESEMPIO: MENU DX PAG Si.Tra.

39. Migliorare la leggibilità del sito • Ingrandita la dimensione del testo nel css • Intestazioni in grassetto per il menù di sinistra • Applicazione javascript che rispetta le regole del DOM (Document Object Model) che permette all’utente di personalizzare la dimensione del testo della pagina a piacimento

40. Linea guida 2 • Punto di controllo 2.1 (Priorità 2): Garantire che tutte le informazioni veicolate con il colore siano disponibili anche senza colore, per esempio attraverso il contesto o il codice di marcatura. • Punto di controllo 2.2 (Priorità 2): Garantire che le combinazioni di colore di primo piano e sfondo abbiano un sufficiente contrasto quando viste da qualcuno con deficit nella visione dei colori o su un monitor in bianco e nero.

41. Motivazione 2) Un documento non può essere considerato accessibile, se le informazioni in esso contenute non sono leggibili, o meglio usabili, anche in assenza di colore. Persone che usano browser testuali o monitor che alterano i colori: • non vedenti,Ipovedenti • chiunque abbia una percezione alterata del colore (protanomalia, deuteranomalia) • assenza totale della percezione dei colori (b/n) • tra cui anche anziani.

42. Problemi riscontrati • Link nella pagina e nel menu di destra • non distinguibili dal testo e dai link gia visitati • non sottolineati, quindi dipendenti esclusivamente dal colore • poco contrasto con lo sfondo • Titoli verdi su sfondo verde • Immagine di sfondo troppo scura e frastagliata che non garantisce un sufficiente contrasto con il testo • Potrebbe generare confusione per utenti ipovedenti

43. Esempio menù di destra

44. Soluzioni adottate Utilizzo della barra dell’accessibilità e di programmi appositi per analizzare il contrasto e la luminosità tra primo piano e sfondo. Colour Contrast Analyser :simula la visione da parte di persone con patologie della vista e tramite un algoritmo proposto dal W3C visualizza i risultati per la percezione alterata del colore. Per superare il requisito è necessario che: • La differenza di luminosità fra primo piano e sfondo deve avere come valore di soglia 125 • La differenza di colore fra primo piano e sfondo abbia come valore di soglia 500

45. Colour Contrast Analyser

46. Soluzioni adottate • Schiarito colore di background nel foglio di stile • Eliminato provvisoriamente lo sfondo • Utilizzato un verde leggermente piu scuro per i titoli • Ridefinito il colore dei link visitati e non, per soddisfare il requisito • Modificata la tonalità di arancione dello sfondo delle celle di intestazioni di tabella su testo nero • Modificata leggermente la tonalità di colore dello sfondo dei menu’

47. Soluzioni adottate • LINK • Sottolineatura dei link per renderli indipendenti dal colore e soddisfare il punto di controllo • Aggiunte le proprietà a:visited e a:focus nel css • per notificare che il link è stato visitato (corsivo e viola) • per rendere visibile la selezione di un link per mezzo dei sistemi di puntamento (mouse/tastiera) o alternativi (contrasto invertito).

48. Css per i link /* hyperlinks */ a:link { text-decoration: underline; font-style: normal; /*blu*/ color: #0000FF /*#1267bc*/ ; /*Primo piano:#0000FF Sfondo:#F2EAC3*/ /*Differenza di colore:536 (limite 500) / Differenza di luminosità:202 (limite 125)*/ } a:visited { text-decoration: underline; font-style: italic; color: #4A004A /*#660066*/; /*Differenza di colore: 523 / Differenza di luminosità:201*/ } a:focus a:hover { text-decoration:none; font-style: italic; color: white; /*contrasto invertito se puntato*/ background: black; }

49. Soluzioni adottate

50. Fornire chiari e coerenti meccanismi di navigazione: informazioni di orientamento, barre di navigazione, una mappa del sito ecc. Per aumentare le probabilità che una persona trovi ciò che sta cercando in un sito. Linea guida 13