Usabilità e Accessibilità

Transcript

1 Usabilità e Accessibilità ISO :1998: l usabilità è l efficacia, l efficienza e la soddisfazione con cui specifici utenti raggiungono specifici obiettivi in particolari ambienti. ISO TS 16071: L accessibilità è l usabilità di un prodotto, servizio, ambiente o strumento, per persone col più ampio raggio di capacità. cristina gena - aim 07/08 1 Usabilità e Accessibilità ISO :1998: l usabilità è l efficacia, l efficienza e la soddisfazione con cui specifici utenti raggiungono specifici obiettivi in particolari ambienti. ISO TS 16071: L accessibilità è l usabilità di un prodotto, servizio, ambiente o strumento, per persone col più ampio raggio di capacità. Fruibile da chiunque cristina gena - aim 07/

2 Usabilità e Accessibilità Un sito web è usabile quando soddisfa i bisogni informativi dell'utente che lo sta visitando, fornendogli facilità di accesso e navigabilità e consentendo un adeguato livello di comprensione dei contenuti cristina gena - aim 07/08 3 Accessibilità: una definizione Un sito web è accessibile quando la sua interfaccia è fruibile indipendentemente da: Browser (browser grafici, testuali, vocali ); Periferiche di input / output (tastiera, schermo, mouse, barre braille ecc. Canale sensoriale utilizzato per l interazione (vista, udito, tatto); Abilità psico-motorie dell utente; Abilità percettive dell utente; Connettività (LAN, Modem, GPRS ecc.); Hardware e software (Palmari, Desktop, WebTV ecc.); cristina gena - aim 07/

3 Usabilità e Accessibilità L usabilità non può essere progettata a prescindere dagli utenti che utilizzano effettivamente il sito, dagli obiettivi che questi cercano di raggiungere, dall ambiente in cui ciò avviene. L accessibilità deve essere progettata tenendo bene in mente le esigenze dell ampio numero di persone disabili, o che hanno tecnologie obsolete, o che si collegano al web con dispositivi diversi dal computer. cristina gena - aim 07/08 5 Cosa hanno in comune l usabilità e l accessibilità? L utente Un progetto di usabilità pone gli utenti al centro. Un progetto di accessibilità pone al centro gli utenti disabili o con problemi di accesso alla rete. Progettare un sito usabile e accessibile è un processo user-centered. cristina gena - aim 07/

4 Utenti diversamente abili Disabilità della vista Disabilità dell udito Disabilità motorie emulatori di mouse, testiera, ingrandimento di oggetti Disabilità cognitive evitare immagini in movimento veloce cristina gena - aim 07/08 7 Le tecnologie assistive Tecnologie di ausilio a portatori di handicap nella fruizione dei servizi informatici: Screen reader: Jaws; Windows Eye; IBM Home Page Reader; Display (Barre) Braille; Screen Magnifier; Browser testuali Lynx; cristina gena - aim 07/

5 Il quadro normativo di riferimento USA: Section 508 (1998) emendamento del Rehabilitation Act che richiede la conformità ad un insieme di punti di controllo per la realizzazione di servizi digitali offerti / per la pubblica amministrazione; Unione Europea: Piano d azione eeurope 2002 Reclama la necessità di adottare l accessibilità come requisito fondamentale dei servizi informatici; Indica le linee guida dettate dal W3C come punto di riferimento; Risoluzione della Commissione Europea del 3 gennaio 2003; cristina gena - aim 07/08 9 Il quadro normativo di riferimento Italia: Circolare AIPA (6 settembre 2001): il consiglio dei ministri aveva aderito al W3C Indica le linee guida del W3C come modello cui uniformarsi progettazione universale; Non viene indicato alcun obbligo ma solo una richiesta di conformità; 2003 anno europeo dei disabili Libro bianco di Lucio Stanca (Ministro per l innovazione e le tecnologie): Analisi esaustiva della tematica; Detta l orientamento che le successive deliberazioni dovranno possedere; cristina gena - aim 07/

6 Il quadro normativo di riferimento Dicembre 2003 Approvazione della Legge Stanca "Disposizioni per favorire l accesso dei soggetti disabili agli strumenti informatici". Ad esso seguono numerose altre iniziative legislative, alla fine unificate nel testo di legge approvato nel dicembre Legge Stanca del 2004 lavoro di sintesi Sancito il diritto di ciascun individuo ad accedere a tutte le fonti informative e rende obbligatorio che tale accesso sia garantito dalla pubblica amministrazione e dagli enti di pubblica utilità (es. scuole e biblioteche) Le PA sono obbligate a seguire la legge, i privati incentivati Regolamento di attuazione (DPR marzo 2005) e decreto ministeriale con linee guida e metodologia (requisiti tecnici, luglio 2005) cristina gena - aim 07/08 11 Il quadro normativo di riferimento Nella Stanca non vi è alcun riferimento ai siti web già esistenti, per i quali il contratto per la realizzazione è stato stipulato prima dell entrata in vigore della legge: Ma il Codice della PA Digitale (Decreto Legislativo del 7 marzo 2005, n. 82), afferma che entro due anni dall entrata in vigore del codice anche i siti web già esistenti dovranno adeguarsi. cristina gena - aim 07/

7 Schema di Regolamento di attuazione della Stanca accessibilità la capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari (articolo 2, comma 1, lettera a) della legge 9 gennaio 2004, n. 4) tecnologie assistive gli strumenti e le soluzioni tecniche, hardware e software, che permettono alla persona disabile, superando o riducendo le condizioni di svantaggio, di accedere ai servizi erogati dai sistemi informatici (articolo 2, comma 1, lettera b) della legge 9 gennaio 2004, n. 4) verifica tecnica valutazione condotta da esperti, anche con strumenti informatici, sulla base di parametri tecnici (articolo 1 del Regolamento) verifica soggettiva valutazione articolata su più livelli di qualità ed effettuata con l intervento del destinatario, anche disabile, dei servizi sulla base di considerazioni empiriche (articolo 1 del Regolamento) fruibilità la caratteristica dei servizi di rispondere a criteri di facilità e semplicità d uso, di efficienza, di rispondenza alle esigenze dell utente, di gradevolezza e di soddisfazione nell uso del prodotto (articolo 1 del Regolamento) cristina gena - aim 07/08 13 La Web Accessibility Initiative Nel 1996 è stato creato il WAI allo scopo di stendere un insieme di linee guida da applicare agli strumenti informatici legati al WWW. Sono così nate: WCAG:Web Content Accessibility Guidelines (le pagine web); UAAG: User Agent Accessibility Guidelines (gli strumenti di navigazione); ATAG: Authoring Tool Accessibility Guidelines (editor, CMS ecc.); XAG: XML Accessibility Guidelines (linee guida che i linguaggi basati su XML devono seguire, es. SMIL, RSS ecc); cristina gena - aim 07/

8 Le WCAG 2 temi fondamentali; 14 linee guida; 65 punti di controllo; 3 livelli di conformità; cristina gena - aim 07/08 15 Le WCAG: temi fondamentali Indicano le due anime delle WCAG: Assicurare una trasformazione elegante Le pagine devono essere ugualmente fruibili indipendentemente da device, abilità, software, capacità percettive ecc. (aspetto più tecnico) Rendere il contenuto comprensibile e navigabile l accessibilità non è solo un fatto tecnico/percettivo, ma anche e soprattutto psicologico-cognitivo; cristina gena - aim 07/

9 Dive into accessibility 30 days to a more accessible web site Copyright 2002 Mark Pilgrim Reperibile all indirizzo: cristina gena - aim 07/08 17 Giorno 6: Indicate un DOCTYPE Iniziate le frasi con un lettera maiuscola; e dunque iniziate le pagine HTML con DOCTYPE. E' solo una regola di base <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> cristina gena - aim 07/

10 Giorno 7: Identificate la vostra lingua <html lang= it"> <html xmlns=" lang= it" xml:lang= it"> cristina gena - aim 07/08 19 Giorno 8: Date titoli significativi Dovreste già saperlo (attributi title ai link e alt alle immagini) cristina gena - aim 07/

11 Giorno 9: Fornite ulteriori ausili alla navigazione <link rel="home" title="home" href=" <link rel="prev" title="dipartimento di informatica di Torino" href=" <link rel="next" title="research Interest" href=" cristina gena - aim 07/08 21 Giorno 10: Presentate subito il contenuto principale <table> <tr> <td valign="top" align="left" width="25%">... navigation bar... </td> <td valign="top" align="left">... main content... </td> </tr> </table> cristina gena - aim 07/

12 Giorno 10: Presentate subito il contenuto principale <table> <tr>  <td><img src="/images/1.gif" width="1" height="1" alt=""></td>  <td valign="top" align="left" rowspan="2">... main content... </td> </tr> <tr> <td valign="top" align="left" width="25%">... navigation bar... </td> </tr> </table> cristina gena - aim 07/08 23 Giorno 10: Presentate subito il contenuto principale cristina gena - aim 07/

13 Giorno 11: Saltate la barra di navigazione <a href="#startcontent" accesskey="2" tabindex="2" class="skiplink">skip over navigation</a>.skiplink {display:none} <a name="startcontent" id="startcontent"></a> cristina gena - aim 07/08 25 Giorno 12: Usate i colori sicuri a:link { color: #0000FF} a:hover { color: #FF0000} a:visited { color: #990099} blu rosso viola cristina gena - aim 07/

14 Giorno 13: Usare link veri <a href="javascript:rollover()"> <a href="#" onclick="javascript: rollover(); onkeypress ="javascript: rollover(); > cristina gena - aim 07/08 27 Giorno 14: Aggiungete titoli ai link <a href="fun.html" title="pictures of Cristina and her friends and nice gadgets" class="nero" accesskey="6" tabindex="6">fun [6] </a> <a href=" title="[external link]">department of Computer Science</a> accesskey= accesso da tastiera (ctrl o alt+chiave) tabindex=ordine di tabulazione cristina gena - aim 07/

15 Giorno 15: Definite scorciatoie da tastiera tasto 1 - Home page tasto 2 - Al contenuto principale (vedi saltate la barra di navigazione) tasto 3 - Indice tasto 4 - Ricerca tasto 8 - Termini d'uso tasto 9 Commenti <a href="mailto:cgena[at]di.unito.it" accesskey="9" tabindex="9 title=" me">cgena[at]di.unito.it</a> tasto 0 - Dichiarazione di accessibilità cristina gena - aim 07/08 29 Giorno 16: Non aprite nuove finestre <a target="_blank"> esempio cristina gena - aim 07/

16 Giorno 17: Definite gli acronimi <acronym title="associazione italiana per l'intelligenza artificiale">ai*ia</acronym> cristina gena - aim 07/08 31 Giorno 18: Date alle tabelle (vere) una vera didascalia <caption align="bottom"> tabella di prova </caption> cristina gena - aim 07/

17 Giorno 19: Usate vere intestazioni di tabella <th abbr="prova di intestazione abbreviata!">prova</th> <th abbr="prova di intestazione abbreviata!">prova</th> <th abbr="prova di intestazione abbreviata!">prova</th> <th abbr="prova di intestazione abbreviata!">prova</th> <th abbr="prova di intestazione abbreviata!">prova</th> cristina gena - aim 07/08 33 Giorno 21: Ignorate le immagini con funzione spaziatrice <table> <tr>  <td> <img src="/images/1.gif" width="1" height="1" alt=""> </td>  <td valign="top" align="left" rowspan="2">... main content... </td> </tr> <tr> <td valign="top" align="left" width="25%">... navigation bar... </td> </tr> </table> esempio cristina gena - aim 07/

18 Giorno 22: Usate liste vere (o fatele sembrare tali) ul.lista1 li{ list-style-type : circle; padding: 10px; } <ul class="lista1"> <li>i received a degree in <a href=" title="[external link]">communication Science</a> at the <a href=" title="[external link]">university of Torino</a> in </li> </ul> cristina gena - aim 07/08 35 Giorno 23: Fornite testi equivalenti per le immagini <img src="img/crimalaga.jpg" alt="cristina in 2002" width="100" height="107"> cristina gena - aim 07/

19 Giorno 24: Fornite testi equivalenti per mappe di immagini <img alt="site navigation links" src="footer.gif" width="500" height="212" usemap="#map"> <map name="map"> <area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html"> <area alt="by category" shape="rect" coords="277,113,348,129" href="/category/"> <area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html"> <area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html"> <area alt="powered by Movable Type" shape="rect" coords="-4,190,131,210" href=" </map> cristina gena - aim 07/08 37 Giorno 25: Usate barre orizzontali vere (o quasi) div.hr {display: none} /*/*/a{} netscape4 e opera 5 MAC ignorano queste regole div.hr { display: block; height: 10px; background-image: url(img/griginohr.gif); background-repeat: repeat-x; background-position: center center; width: 80%; } hr {display:none} /**/ <div class="hr"></div><hr /> ì cristina gena - aim 07/

20 Giorno 26: Usate dimensioni relative per i font p { font-size: 12px; (per netscape4) } /*/*/a{} netscape4 e opera 5 MAC ignorano queste regole body, body p, body td{ font-size: x-small; voice-family: "\"}\""; IE si ferma qui voice-family: inherit; font-size: small; padding: 10px; } opera 5 html>body p, html>body td { font-size: small; }/* */ cristina gena - aim 07/08 39 Giorno 27: Usate intestazioni vere <h1>, <h2>, <h3> cristina gena - aim 07/

21 Giorno 28: Etichettate gli elementi dei moduli <label for="url">url:</label><br /> <input id="url" name="url" /><br /><br /> <label for="text">comments:</label><br /> <textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br /> <input type="checkbox" id="bakecookie" name="bakecookie" /> <label for="bakecookie">remember info?</label><br /><br > esempio cristina gena - aim 07/08 41 Giorno 29: Rendete tutto ricercabile accesskey="4" cristina gena - aim 07/

22 Giorno 30: Dichiarate il vostro livello di accessibilità <a href="/accessibility_statement.html" title="accessibility features of this site" accesskey="0">accessibility statement</a> cristina gena - aim 07/08 43 La conformità Questa pagina è conforme alle "Linee guida per l'accessibilità ai contenuti del Web 1.0" del W3C disponibili a livello Doppia-A. Specificare: l Il titolo delle linee guida: "Linee guida per l'accessibilità ai contenuti del Web 1.0" L'URI delle Linee Guida: WEBCONTENT Il Livello di conformità: "A", "Doppia-A", o "Tripla-A". L'ambito della dichiarazione (ad. es., pagina, sito, o una ben definita porzione di un sito.). cristina gena - aim 07/

23 La conformità 2 Specificare: Includere, su ciascuna pagina che si dichiara conforme,una delle tre icone fornite dal W3C e collegare l'icona all'appropriata spiegazione W3Criguardante la dichiarazione. Informazioni circa le icone e su come inserirle all'interno delle pagine sono disponibili presso cristina gena - aim 07/08 45 La dichiarazione di accessibilità ocid= cristina gena - aim 07/