La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Si.Tra. Candidato Federico TrevisaniRelatore prof. Aldo Franco Dragoni Corso di laurea in Ingegneria Informatica e dellAutomazione DEIT, Dipartimento di.

Presentazioni simili


Presentazione sul tema: "Si.Tra. Candidato Federico TrevisaniRelatore prof. Aldo Franco Dragoni Corso di laurea in Ingegneria Informatica e dellAutomazione DEIT, Dipartimento di."— Transcript della presentazione:

1 Si.Tra. Candidato Federico TrevisaniRelatore prof. Aldo Franco Dragoni Corso di laurea in Ingegneria Informatica e dellAutomazione 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

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 unoccasione irripetibile per favorire lintegrazione dei disabili e degli anziani.

3 Beneficiari dellaccessibilità 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è lAccessibilità? 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 LItalia si è posta allavanguardia 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 sullAccessibilità 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 laccesso dei soggetti disabili agli strumenti informatici, nota anche come legge Stanca (dal nome dellallora ministro per linnovazione 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 sullAccessibilità. responsabilità precise 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à allinterno 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 laccesso al contenuto. Priorità 2 : difficoltà nellaccesso al contenuto per alcuni utenti. Priorità 3 : facoltativo ma migliora laccesso ai documenti web.

8 Tecnologie assistive Browser testuali: un programma utente che elimina automaticamente tutti gli elementi grafici presenti in un documento web, mostrando allutente solo i testi in esso contenuti, comprese le descrizioni testuali alternative. Linterazione con lutente 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 laccessibilità 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 allutente, 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 Punto di controllo 1.1 Motivazione Requisito da soddisfare per garantire laccessibilità 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 Inserimento allinterno dei tag di tutte le pagine del sito dellattributo alt=testo alternativo Esempio nella pagina iniziale: Filiera Ittica E nel logo dellassam in alto a destra: 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 limpaginazione 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 limpaginazione e la presentazione. Organizzare i documenti in modo che possano essere letti senza i fogli di stile.

21 Linea guida 3 Contenuto. È linformazione fornita da un documento (testi, immagini, tabelle, grafici, filmati … Presentazione. È il modo in cui i contenuti appaiono allutente ovvero linsieme delle loro caratteristiche. Linsieme degli stili applicati a un documento: i fogli di stile (CSS). Struttura. È linsieme delle relazioni tra i contenuti di un documento. I rapporti di subordinazione e di coordinazione tra i contenuti sono lossatura, lo schema che rappresenta la struttura di un documento.

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 dinaccessibilità grave per gli utenti ipovedenti). 3.5) Gli elementi da H1 a H6 sono fondamentali per laccessibilità. 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): Pesce Carne Bovina …

25 Soluzioni adottate (1) Eliminazione dal codice di marcatura gli elementi e gli attributi di presentazione,sostituendoli con luso 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 anchessi tramite il foglio di stile CSS

26 Soluzioni adottate (1) ESEMPIO (homepage): Latte Alta Qualità 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 e posizionamento tramite lattributo 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 lingrandimento 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 Si.Tra. - SIstema di TRAcciabilità 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, non ordinate e di definizione allinterno 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 per facilitare chi utilizza screen readers o browsers testuali. ESEMPIO: MENU DX SENZA CSSESEMPIO: 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 allutente 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 dellaccessibilità 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 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 sullorganizzazione 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 allaltra. 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 allutente 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 (lintestazione 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 allinizio di intestazioni, paragrafi, elenchi ecc Punto di controllo 12.3 (Priorità 2): Dividere grandi blocchi di informazioni in gruppi più gestibili. Lorganizzazione 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 lutente 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, lutente può formarsi una mappa mentale di quelle caratteristiche: se invece navigando, non le ritrova più, potrebbe credere di essere giunto in un altro sito ) Garantire una percezione chiara degli elementi che caratterizzano lidentità 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 dellattributo 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 dellattributo 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 lapertura 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 dellutente 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 allutente di saltare da unintestazione allaltra, o di paragrafo in paragrafo, ed ascoltare il minimo indispensabile di parole per determinare se il blocco dinformazione corrente (titolo, paragrafo, link ecc.) gli interessa. Se lidea 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 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 Rintracciabilità Pesce Scirocco36 Punti vendita Pesce Scirocco36 Il Disciplinare Carni Bovine Rintracciabilità Carne Bovina Punti Vendita BovinMarche Vai al sito BovinMarche Cereali Il Disciplinare (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 MODIFICATO - DecrementaDecrementa + IncrementaIncrementa * ResettaResetta 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 MENU ORIGINALE 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

65 Saltare gruppo di collegamenti MENU [Passa al Contenuto] … (Fine HOME) … [Passa al contenuto] ti trovi in: Home … 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 tabelle 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 dintestazione. Punto di controllo 5.3 (priorità 2) Non usare le tabelle a scopo dimpaginazione, a meno che non abbiano senso quando linearizzate. Altrimenti, se la tabella non ha senso, fornire unalternativa equivalente (che può essere una versione linearizzata). Punto di controllo 5.4 ( priorità 2) Se una tabella è usata a scopo dimpaginazione, 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 dintestazione.

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 allattributo summary, potranno così valutare se fruire il contenuto della tabella o passare oltre.

70 Problemi riscontrati Tabelle dati con false intestazioni non marcate con lopportuno elemento Anche se si tratta di tabelle semplici le celle di intestazione non erano collegate con le relative celle di dati. Mancanza dellattrib summary Tabelle utilizzate impropriamente a scopo di impaginazione con uso errato di elementi (homepage)

71 Soluzioni adottate Uso dellelem. per le celle di intestazione Uso degli attributi headers e id Raggruppare le intestazioni e il corpo della tabella per mezzo di Uso dellattributo 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 IMPAGINAZIONEIMPAGINAZIONE TRAMITE I DIV

73 Esempio rintracciabilità Scirocco36

74

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

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

78 Motivazione Uso di : marcare le etichette di un modulo è una precauzione essenziale per laccessibilità. consente alle tecnologie assistive di indicare senza ambiguità allutente qual è la funzione di un campo di input. permette il trasferimento diretto del focus dalletichetta al campo. selezionando letichetta, 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 (per identificare le etichette dei campi modulo) con gli attributi specifici id :elemento da associare for :associa letichetta al campo modulo corrispondente Al click sulletichetta il focus passa direttamente al campo text desiderato

80 Esempio Rintraccia il prodotto Inserisci la data di scadenza (gg/mm/aaaa): Rintraccia il prodotto Inserisci la data di scadenza (gg/mm/aaaa):

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

82 Test di USABILITA 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? Come migliorare l'usabilità? Facendo user testing.

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.


Scaricare ppt "Si.Tra. Candidato Federico TrevisaniRelatore prof. Aldo Franco Dragoni Corso di laurea in Ingegneria Informatica e dellAutomazione DEIT, Dipartimento di."

Presentazioni simili


Annunci Google