E-inclusion: cittadinanza digitale e accessibilità Strumenti per la valutazione dell accessibilità Adamo Liberto Ufficio Accessibilità dei strumenti informatici Centro Nazionale per l Informatica nella Pubblica Amministrazione La valutazione dell accessibilità Quando valutare? Nella fase di progettazione (obiettivi, architettura del sito, grafica, requisiti di sistema) Nella fase di sviluppo (prototipo, contenuti, ambiente informatico di sviluppo) Collaudo (contenuti, tecnico:funzionalità e prestazioni) Pubblicazione (ambiente informatico di produzione, contenuti, motore di ricerca link) Manutenzione e promozione (sistema HW e SW, contenuti e posizionamento)
La valutazione dell accessibilità Validazione semiautomatica Validazione del codice Il ciclo della valutazione Analisi dell esperto Analisi con l utente La valutazione dell accessibilità Validazione semiautomatica Validazione del codice Il ciclo della valutazione Analisi dell esperto Analisi con l utente
Prima, validare il codice Requisito di base per poter parlare di accessibilità e la correttezza formale del codice della pagina, il rispetto della sintassi che deve essere dichiarata nella DTD (Document Type Definition) Il documento deve rispettare gli standard del W3C (X)HTML, CSS(Cascading Style Sheets): documentazione e specifiche: http://www.w3.org/tr/xhtml1/ http://www.w3.org/tr/html401/ http://www.w3.org/tr/rec-css2/ http://www.w3.org/tr/1999/rec-css1-19990111 La valutazione dell accessibilità Validazione semiautomatica Validazione del codice Il ciclo della valutazione Analisi dell esperto Analisi con l utente
Strumenti semiautomatici per la valutazione Strumenti semiautomatici per la valutazione Il report generato contiene: Errori Tutto quello che è verificabile automaticamente, per es Presenza dell attributo Alt Errori sintattici Possibili errori (warning) Richiedono il giudizio umano per es Controllare che disabilitando i fogli di stile la pagina risulti leggibile Contenuto degli attributi Alt Contenuto degli attributi Title
Strumenti semiautomatici per la valutazione Nessuno strumento semi-automatico può stabilire se una pagina è accessibile o meno!!! Dei 65 punti di controllo presenti nelle WCAG 1.0, solo 19 possono essere valutati automaticamente Dei 21 requisiti tecnici del DM 8 luglio 2005 della Legge 04/2004 solo 7-8 possono essere valutati automaticamente La valutazione dell accessibilità Validazione semiautomatica Validazione del codice Il ciclo della valutazione Analisi dell esperto Analisi con l utente
Analisi dell esperto Test non automatici che richiedono: Approccio metodologico Competenza tecnica Giudizio umano (spesso soggettivo) Familiarità con tecnologie assistive Analisi dettagliata dei requisiti anche sfruttando i tanti strumenti di valutazione (gratuiti e non)esistenti Provare a navigare le pagine utilizzando diverse configurazioni hardware e software (vari SO e browser) La valutazione dell accessibilità Validazione semiautomatica Validazione del codice Il ciclo della valutazione Analisi dell esperto Analisi con l utente
Analisi centrata sull utente Utenti sono i veri fruitori dei siti web Le competenze degli utenti disabili nell uso di tecnologie assistive non sono facilmente simulabili Le strategie di navigazione sono molto diverse in funzione della disabilità Le tecnologie assistive si evolvono rapidamente Difficile simulare i problemi cognitivi degli utenti Utenti anziani Utenti sordi Utenti con disabilità cognitive Analisi centrata sull utente Analisi basata su: Percezione dell accessibilità Comprensione della struttura del sito Raggiungibilità delle informazioni
La valutazione dell accessibilità Il lavoro di tutti i giorni: l accessibilità come strumento, come approccio metodologico, come modus operandi non solo come conclusione di un processo Strumenti di lavoro più conosciuti Lynx Web Developer Toolbar & Extensions, Web Accessibility Toolbar, Opera Web Developer Toolbar & Menu Colour Contrast Analyser & Juicy Studio Contrast Analyzer
Lynx E un browser testuale: non supporta immagini, tabelle, script, mouse, Mostra l organizzazione, la struttura ed il contenuto di una pagina web secondo la sequenza degli elementi del linguaggio a marcatori utilizzato Scaricabile all indirizzo: http://lynx.browser.org/ Oppure http://csant.info/lynx.htm, per una versione con file di installazione. Strumenti di lavoro: Web Developer Extension-1 Document Map. Permette di visualizzare in una barra laterale (Visualizza > Barra laterale > Document Map) la struttura (navigabile) degli headers nella pagina. Molto pratica per verificare la struttura del contenuto. Equivale un po' a farsi leggere da Jaws l'elenco dei titoli. https://addons.mozilla.org/it/firefox/addon/475 Firefox Web Developer Toolbar Molti strumenti utili per le verifiche, incluso linearizzazione della pagina, evidenziazione di tabelle e ordine di sovrapposizione, ecc. https://addons.mozilla.org/it/firefox/addon/60
Strumenti di lavoro: Web Developer Extension-2 Mozilla Accessibility Extension Duplica alcune funzionalità della Web Developer ma ha anche alcune funzioni uniche, ad esempio oltre a rimuovere solo i CSS rimuove anche tutti i tag presentazionali e le tabelle di layout, permette di visualizzare l ordine, il livello e il testo delle intestazioni (hx) oppure per esempio permette di verificare il sito con differenti contrasti selezionando Style > High Contrast View 1 e 2. https://addons.mozilla.org/it/firefox/addon/1891 Strumenti di lavoro: Web Developer Extension-3 Verifica colori (oltre l'algoritmo): VIS, Visual Impairment Simulator, permette di simulare a video la visualizzazione che si presenta agli utenti che soffrono delle più diffuse patologie visive. http://www.cita.uiuc.edu/software/vis/ Accessibar permette di cambiare in maniera molto semplice il tipo di font, il colore di background sia di testo che di link, fornisce inoltre un output vocale simulando un text to speach https://addons.mozilla.org/it/firefox/addons/previews/4242
Strumenti di lavoro: Web Developer Extension-4 Fangs - Screen Reader Emulator. E una estensione di Firefox che da in output una rappresentazione testuale delle pagine web così come verrebbe letto da uno screen reader, offrendo la possibilità di consultare ad esempio la lista dei link, la lista degli headings. http://sourceforge.net/projects/fangs Strumenti di lavoro: Web Developer Extension-4 HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page. Both algorithms were originally developed by the Web Consortium W3C. http://users.skynet.be/mgueury/mozilla/download.html
Analisi dei requisiti di accessibilità tramite gli strumenti di verifica tecnica http://www.webaccessibile.org/argomenti/argomento.asp?cat=474 Extension per Firefox https://addons.mozilla.org/it/firefox/addon/60 https://addons.mozilla.org/it/firefox/addon/1891 Requisito 1: Correttezza sintattica e semantica del codice Validatore HTML del W3C Valida l'html Validatore HTML - WDG Valida l'html Valida tutto il sito Validatore CSS del W3C Valida il CSS Informazioni Meta Visualizza DOCTYPE Struttura Intestazioni Struttura delle intestazioni JavaScript / Apertura di nuove finestre Codice Elementi e attributi HTML deprecati
Requisito 1: Correttezza sintattica e semantica del codice Extension per Firefox Tools Validate HTML validator Validate HTML tidy Validate local HTML Validate CSS View View source Outline Headings Deprecated Elements Requisito 2: Frame Struttura Nome/titolo dei frame Informazione Meta Elenco dei frame Codice Elementi ed attributi HTML deprecati Extension per Firefox View source View source View generated source Outline Outline Frame/deprecated elements
Requisito 3: Alternative testuali equivalenti Immagini Elenco delle Immagini utilizzate Alterna Immagini / Testi alternativi Visualizza le immagini Extension per Firefox Image Disable Image Display alt attribute Text Equivalent List of image Show text equivalent Requisito 4: colore che veicola informazione Colori Scala dei grigi Simulazioni Css Disattiva CSS Disable DisablepageColors
Requisito 5: Oggetti in movimento e scritte lampeggianti Immagini Analizza la frequenza delle gif animate Image Disable Image/ Image Animations Requisito 6: Contrasto del colore e della luminosità Colori Analisi del contrasto>color Contrast Analyzer- Juice Studio Strumenti>Simulazioni>Alterazione percettiva dei colori Strumenti>Simulazioni>Alterazione percettiva dei contrasti View Color Information
Requisito 7-8: mappe immagine lato client e lato server Immagine Visualizza mappe immagine Navigation Image maps Requisito 9-10: Tabelle dati semplici e complesse Struttura Tabelle Dati semplici Tabelle Dati complesse Information Display table information Outline Outline table Outline table caption/cells Navigation List of data Tables
Requisito 11: fogli di stile CSS Disattiva CSS Struttura Visualizza ordine di tabiulazione CSS Style Disable CSS> All Style Disable tag styling Requisito 12: ridimensionamento finestra del browser/caratteri Ridimensiona 800x600 Opzione IE Grandezza caratteri>molto grande/molto piccolo Resize Windows>800x600 Zoom>Zoom In-Zoom Out
Requisito 13: Tabelle di layout Struttura Tabelle dati complesse Linearizza(Rimuovi tabelle) Ordinamento delle celle in tabella Miscellaneus Linearize page Information Display table information Requisito 14: Form accessibili Struttura Elementi Fieldset /label Forms Display form details View form information Navigation Form elements
Requisito 15-16-17: script, applet, oggetti di programmazione Informazioni Meta Elenco di script e applet Struttura Gestori di eventi Opzioni IE Attiva / Disattiva Javascipt, ActiveX Extension per Firefox Information View Javascript Disable Disable scripting Disable mouse scripting List of events Requisito 18: multimedia accessibile Informazioni Meta Elenco dei file multimediali Information View Information Page > Media
Requisito 19: link significativi e maccanismi di salto Informazioni Meta Elenco ei collegamenti ipertestuali Visualizza attributo Title Visualizza link interni Information Display title attributes View anchor View anchor information Outline Outline Links>External Links Outline Links>External Links without title attributes View anchor View anchor information Requisito 20: refresh delle pagine Informazioni Meta Informazioni Metadata ( cercare la presenza di refresh) Extension per Firefox Information Display metatag ( cercare la presenza di refresh) Scripting Disable automatic refresh
Requisito 21: link spaziati, navigabilità da tastiera CSS Visualizza il foglio di stile Information Show Accesskey Display Div Order Keyboard Keyboard shorthcut Options Controllare che tramite il tasto TAB della tastiera si riescano a scorrere sequenzialmente tutti i link presenti nella pagina E per concludere una dimostrazione: Dal sito del W3C:Demo di uno stesso sito realizzato in 2 versioni: accessibile e inaccessibile http://www.w3.org/wai/eo/2005/demo/overview Requisito 1:validazione sintattica e semantica del codice: Validazioni: valida HTML, valida CSS Requisito 3:alternativa testuale equivalente alle immagini Immagini: elenco delle immagini utilizzate, alterna immagini/testi alternativi Requisito 11: corretto utilizzo dei fogli di stile CSS: disattiva/attiva i CSS Requisito 12: dimensionamento carattere/fluidità layout ridimensiona: 800 x 600 (impostando carattere molto grande dal menu visualizza carattere di Internet Explorer) Requisito 14: accessibilità dei moduli Struttura: elementi fieldset/labels Requisito 19:testi significativi per i link e meccanismi di salto Informazioni Meta: elenco dei collegamenti ipertestuali, visualizza attributo title,visualizza link interni
Per ulteriori informazioni www.pubbliaccesso.gov.it adamo.liberto@cnipa.it