Si.Tra. DEIT, Dipartimento di Elettronica Intelligenza Artificiale e Telecomunicazioni Università Politecnica delle Marche, Ancona Studio dell'accessibilità.

Presentazione sul tema: "Si.Tra. DEIT, Dipartimento di Elettronica Intelligenza Artificiale e Telecomunicazioni Università Politecnica delle Marche, Ancona Studio dell'accessibilità."— Transcript della presentazione:

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 Web Accessibility 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.

3 Beneficiari dell’accessibilità
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).

4 Ma cos’è l’Accessibilità?
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).

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 WCAG 1.0 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.

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)

10

11

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

13 Motivazione Punto di controllo 1.1
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.

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 <img src="img/filieraittica.gif"
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" />

16

17

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
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 ORIGINALE Visione piatta

29 Visione con liste a più livelli
MODIFICATO Visione con liste a più livelli

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 Problemi riscontrati / Soluzioni adottate
Controllo della validità del linguaggio di marcatura per ogni pagina del sito controllo automatico della sintassi (Markup Validation Service) . Errori vari: mancate chiusure di tag, omissione di virgolette per i valori degli attributi, attributi sconosciuti ecc..

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; color: white; /*contrasto invertito se puntato*/ background: black;

49 Soluzioni adottate

50 Linea guida 13 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.

51 Linea guida 13 Punto di controllo 13.1 (Priorità 2):
Identificare chiaramente la destinazione di ogni collegamento. La chiarezza della destinazione dei link è utile per tutte le categorie di utenti ma in soprattutto per utenti con disabilità di tipo visivo e cognitivo. Punto di controllo 13.2 (Priorità 2): Fornire metadati per aggiungere informazioni semantiche a pagine e siti. Punto di controllo 13.3 (Priorità 2): Fornire informazioni sull’organizzazione generale di un sito (per esempio una mappa del sito o un sommario dei contenuti) Chi sviluppa siti accessibili non dovrebbe mai dimenticare di includere una mappa del sito, avendo cura di porre un collegamento ad essa, ben visibile, in tutte le altre pagine.

52 Linea guida 13 / 14 Punto di controllo 13.4 ( Priorità 2): Usare i meccanismi di navigazione in maniera coerente. È incoerente, per esempio, se i menu di navigazione cambiano di aspetto e di posizione da una pagina all’altra. Punti di controllo 14.3 (Priorità 3) : Creare uno stile di presentazione coerente per tutte le pagine. Stessa posizione elementi distintivi della pagina per evitare spaesamento degli utenti (menù navigaz ecc) Punto di controllo 13.5 (Priorità 2): Fornire barre di navigazione per evidenziare i meccanismi di navigazione e dare ad essi accesso. se ben realizzata, è uno strumento di questo tipo: un oggetto distinto dal contenuto informativo di un documento, e tale da comunicare chiaramente all’utente la sua funzione. Punto di controllo 13.6 (Priorità 2): Raggruppare i collegamenti correlati, identificare il gruppo, e, finché non lo faranno i programmi utente, fornire un modo per saltare il gruppo. Garantire la chiarezza del testo del collegamento ipertestuale e la possibilità di saltare i link ripetitivi nelle pagine (l’intestazione della pagina o la barra di navigazione) a diverse categorie di utenti che utilizzano tecnologie assistive o hanno problemi di mobilità.

53 Linea guida 13 / 12 Punto di controllo 13.8 (Priorità 2):
Posizionare le informazioni distintive all’inizio di intestazioni, paragrafi, elenchi ecc Punto di controllo (Priorità 2): Dividere grandi blocchi di informazioni in gruppi più gestibili. L’organizzazione per titoli e paragrafi è importante innanzitutto per chi usa una sintesi vocale: permette una rapida panoramica dei contenuti, senza essere costretti a leggere tutto il testo del documento. Ma è importante anche per l’utente comune, perché non c’è nulla di meno accessibile alla lettura e alla comprensione che trovarsi di fronte a un muro compatto di parole, mai interrotto da un titolo o da un a capo.

54 Motivazione 13.4) Uno stile di presentazione coerente su ogni pagina permette agli utenti di localizzare i meccanismi di navigazione più facilmente, ma anche di saltarli più facilmente se è ciò che desiderano . 13.5) Se, infatti, gli elementi costitutivi della pagina si ripetono in modo costante attraverso un sito, l’utente può formarsi una mappa mentale di quelle caratteristiche: se invece navigando, non le ritrova più, potrebbe credere di essere giunto in un altro sito. 14.3 ) Garantire una percezione chiara degli elementi che caratterizzano l’identità del sito che si sta navigando (loghi, testata, menu, struttura grafica ecc.)

55 Problemi riscontrati Destinazione collegamenti non indicata:
Link interni al sito Al altre pagine del sito stesso A documenti PDF o Jpeg Link esterni ad altri siti Completa inaccessibilità per la pagina “Contatti” Mancanza dell’attributo “title” in tutti i link della pagina e dei menù Nessuna mappa o sommario del sito Non è stata riscontrata la possibilità di saltare gruppi di collegamenti e menù Struttura del sito non uniforme e coerente in tutte le pagine (menu, contenuto, liste e link)

56 Soluzioni adottate Inserimento dell’attributo “title” in tutti i collegamenti. Indicazione della destinazione di tutti i collegamenti esterni della pagina. Indicazione del tipo di documento e dimensione nei link che si riferiscono a documenti esterni. Nella pagina contatti : inseriti i collegamenti per l’apertura di caselle mail.

57 Esempio Link esterno nella Homepage

58 Esempio MENU’ Disciplinare Filiera Ittica
Non è indicato ne il tipo di documento, ne tanto meno la dimensione: scaricare un pdf di 10 MB senza saperlo in anticipo potrebbe mettere in crisi qualunque utente.

59 Esempio pagina Contatti

60 Esempio nella Homepage

61 Soluzioni adottate Inclusione di una mappa del sito con relativo collegamento nel menù di navigazione. Ristrutturazione della barra di navigazione sinistra e destra per renderle uniformi e distinguibili rispetto al contenuto del sito. Ricostruzione grafica e sintattica della barra “Briciole di Pane” che traccia il percorso dell’utente nel sito Inserita la possibilità di saltare menù e gruppi di link Organizzazione del testo in titoli e paragrafi per agevolare la “lettura per sfioramento”.

62 Lettura per sfioramento
Organizzazione del testo in titoli e paragrafi Questo aiuterà sia le persone che “sfiorano” i testi visivamente sia quelle che usano sintetizzatori vocali. “Sfiorare” [skimming] con la sintesi vocale significa permettere all’utente di saltare da un’intestazione all’altra, o di paragrafo in paragrafo, ed ascoltare il minimo indispensabile di parole per determinare se il blocco d’informazione corrente (titolo, paragrafo, link ecc.) gli interessa. Se l’idea principale del paragrafo è nel mezzo o alla fine, gli utenti vocali sono costretti ad ascoltare la maggior parte del documento prima di poter trovare ciò che desiderano.

63 MENU’ e Mappa del sito Home (Fine HOME) Le Filiere (Fine FILIERE)
Si.Tra. Consumatori Mondo Agroalimentare Mondo Internet FAQ Contatti (Fine HOME) Le Filiere Latte Alta Qualità Rintracciabilita Latte AQ Il Disciplinare Le Aziende Aderenti Ittica Approfondimenti Rintracciabilità Pesce Scirocco36 Punti vendita Pesce Scirocco36 Carni Bovine Rintracciabilità Carne Bovina Punti Vendita BovinMarche Vai al sito BovinMarche Cereali (Fine FILIERE) Servizio Si.Tra. Per i consumatori Per il mondo agro Per il mondo IT (Fine SERVIZIO Si.Tra.) Eventi Dicono di noi Links

64 MENU ORIGINALE MENU MODIFICATO Home Si.Tra. FAQ Contatti Le Filiere
Latte Alta Qualità Ittica Carni Bovine Cereali Il Servizio Si.Tra. Per i consumatori Per il mondo agroalimentare Per il mondo IT Eventi Dicono di noi Links MENU MODIFICATO - Decrementa + Incrementa * Resetta Home Si.Tra. FAQ Contatti Mappa (Fine HOME) Le Filiere Latte Alta Qualità Ittica Carni Bovine Cereali (Fine FILIERE) Il Servizio Si.Tra. Per i consumatori Per il mondo agroalimentare Per il mondo IT (Fine SERVIZIO Si.Tra.) Eventi Dicono di noi Links

65 Saltare gruppo di collegamenti
MENU’ <div id="side"> <map title="Menu di Navigazione“ id="MenuNav"> <div id="nasc" class="nasc"><br /> <a href="#contenuto" title="Salta il Menu di Navigazione"> [Passa al Contenuto]</a></div> <ul> <li>…</li> </ul> <div class="finelista"> (Fine HOME)</div> … <div id="content"> <a id="contenuto"></a> <div id="sitemap"> <div class="nasc"><a href="#ctl00_SiteMapPath1_SkipLink" title="Salta">[Passa al contenuto]</a></div> <p class="quote">ti trovi in: <span class="grass">Home</span></p> </div> <a id="ctl00_SiteMapPath1_SkipLink"></a> <div id="titolo"> CSS .nasc { width: 0; height: 0; position: absolute; overflow: hidden; top: -200em; } .finelista { width:0; height:0; overflow:hidden; top:-210em;

66 Senza CSS MENU DX MODIFICATO (lista link) Altre Info Filiera Ittica
Approfondisci Rintracciabilità breve Punti vendita Scirocco36 Il Disciplinare Download Disciplinare Filiera Ittica [pdf 10.5 MB] MENU DX ORIGINALE (link liberi) Altre Info La filiera Ittica Approfondimenti Rintracciabilità breve Punti vendita Scirocco36 Il Disciplinare Download Disciplinare Filiera Ittica

67 Linea guida 5 Garantire che le tabelle abbiano la necessaria marcatura per essere trasformate da browser accessibili e da altri programmi utente.

68 Linea guida 5 Punto di controllo 5.1 (priorità 1)
Per le tabelle di dati, identificare le intestazioni di riga e colonna. Punto di controllo 5.2 (priorità 1) Per le tabelle di dati che hanno due o più livelli logici di intestazioni di riga o di colonna, usare la marcatura per associare celle di dati e celle d’intestazione. Punto di controllo 5.3 (priorità 2) Non usare le tabelle a scopo d’impaginazione, a meno che non abbiano senso quando linearizzate. Altrimenti, se la tabella non ha senso, fornire un’alternativa equivalente (che può essere una versione linearizzata). Punto di controllo 5.4 ( priorità 2) Se una tabella è usata a scopo d’impaginazione, non usare alcuna marcatura strutturale per ottenere effetti di formattazione visuale. Punto di controllo 5.5 (priorità 3) Fornire sommari per le tabelle. Punto di controllo 5.6 (priorità 3) Fornire abbreviazioni per le etichette delle celle d’intestazione.

69 Motivazioni possibilità per gli utenti con deficit nella vista di navigarne i contenuti consentendo di collegare una determinata cella di dati alla relativa cella di intestazione. Agevolare chi utilizza Screen Readers o Browsers testuali che non possono comprendere bene una struttura tabellare preferendone una versione lineare Gli utenti non vedenti, ricevendo informazioni descrittive dei contenuti grazie all’attributo summary, potranno così valutare se fruire il contenuto della tabella o passare oltre.

70 Problemi riscontrati Tabelle dati con false intestazioni non marcate con l’opportuno elemento <th> Anche se si tratta di tabelle semplici le celle di intestazione non erano collegate con le relative celle di dati. Mancanza dell’attrib “summary” Tabelle utilizzate impropriamente a scopo di impaginazione con uso errato di elementi <hr> (homepage)

71 Soluzioni adottate Uso dell’elem. <th>per le celle di intestazione Uso degli attributi “headers” e “id” Raggruppare le intestazioni e il corpo della tabella per mezzo di <thead> <tbody> <colgroup> Uso dell’attributo “sumary” per chi legge le tabelle in modalità non visuale (guida all’ utente sul contenuto e sull’ organizzazione della tabella dati) Fornitura di una versione linearizzata per ogni tabella Uso del foglio di stile per definire la presentazione degli elementi della tabella

72 Esempio nella Homepage
TABELLA A SCOPO DI IMPAGINAZIONE IMPAGINAZIONE TRAMITE I DIV

73 Esempio rintracciabilità Scirocco36

74 Esempio rintracciabilità Scirocco36

75 Punto di controllo 4.3 (priorità 3)
Identificare la lingua principale di un documento. Motivazione Le informazioni sulla lingua sono utili per: strumenti autoriali, strumenti di traduzione, accessibilità, selezione dei caratteri, resa della pagina, ricerca e scripting.

76 Soluzioni adottate < html xmlns=" lang="it" xml:lang="it“ >

77 Etichette per moduli Punto di controllo 10.2 (priorità 2)
Fino a quando i programmi utente non supporteranno l’esplicita associazione tra etichette e controlli di modulo, per tutti i controlli di modulo che hanno etichette associate in modo implicito, garantire che l’etichetta sia posizionata correttamente. Punto di controllo 12.4 (priorità 2) Associare le etichette ai loro controlli in modo esplicito.

78 Motivazione Uso di <LABEL>: marcare le etichette di un modulo è una precauzione essenziale per l’accessibilità. consente alle tecnologie assistive di indicare senza ambiguità all’utente qual è la funzione di un campo di input. permette il trasferimento diretto del focus dall’etichetta al campo. selezionando l’etichetta, si può subito scrivere un valore nel campo di input a essa associato altrimenti difficilmente selezionabile da utenti ipovedenti o con disabilità motorie.

79 Soluzioni adottate Il requisito chiede di garantire la fornitura di informazioni che garantiscono a tutti gli utenti di poter utilizzare i moduli contenuti in una pagina web. Uso dell’ elemento <LABEL> (per identificare le etichette dei campi modulo) con gli attributi specifici “id” :elemento da associare “for” :associa l’etichetta al campo modulo corrispondente Al click sull’etichetta il focus passa direttamente al campo text desiderato

80 Esempio <h2>Rintraccia il prodotto</h2>
Inserisci la data di scadenza (gg/mm/aaaa): <br /> <input name="ctl00$Contenuto$txtdata" type="text" id="ctl00_Contenuto_txtdata" /> <input type="submit" name="ctl00$Contenuto$Button1" value="Trova" id="ctl00_Contenuto_Button1" /> <h2 class="nero">Rintraccia il prodotto</h2> <label for="txtdata"> Inserisci la data di scadenza (gg/mm/aaaa): </label> <br /> <input name="$txtdata" type="text" id="txtdata" /> <input type="submit" name="$Button1" value="Trova" id="Button1"/>

81 Sviluppi futuri USABILITA’: Una definizione che mi piace:
è la disciplina che si frappone tra l'utente e il l’interfaccia stessa. Una definizione che mi piace: ciò che chiede all'utente di un sito di pensare il meno possibile , fornendogli un ambiente nel quale può muoversi a suo agio, trovando senza sforzo ciò che gli serve.

82 Test di USABILITA’ Come migliorare l'usabilità?
Facendo user testing. L'usabilità si misura con cinque indici di qualità (Jakob Nielsen): Facilità di apprendimento: Quanto è semplice per gli utenti portare a termine semplici task la prima volta che vedono la user interface? Efficienza: Una volta che gli utenti hanno imparato ad utilizzarla, con quanta rapidità riescono a portare a termine i task? Facilità di memorizzazione: Dopo un certo periodo che non si usa la user interface, quanto è facile ricordarsi come si utilizza? Errori: Quanti errori l'utente commette? Con quale gravità? Soddisfazione: Quanto è piacevole usare la user interface?

83 WCAG 2.0 Le Web Content Accessibility Guidelines 2.0 sono una evoluzione delle WCAG 1.0, e, per quanto i principi ispiratori siano gli stessi, sono strutturate diversamente in modo da semplificare il lavoro degli sviluppatori. Le nuove linee guida tendono in definitiva, a superare l'incertezza nella valutazione della conformità, che è ineliminabile nelle WCAG 1.0. Sono attualmente a livello di Working Draft (in fase di raffinamento).

84 Considerazione finale
Tutti hanno il diritto di navigare liberamente nel web che ormai è diventata la fonte primaria di informazione e sarebbe ingiusto non permettere a persone meno fortunate di esplorare questo mondo, quando esistono alcuni accorgimenti per rendere il tutto più accessibile.