PILLOLE DI ACCESSIBILITÀ ISTRUZIONI PER L USO

Transcript

1 2016 PILLOLE DI ACCESSIBILITÀ ISTRUZIONI PER L USO Adolfo TASINATO Mara COCO Ufficio Comunicazione Multimediale e Internet

2 PILLOLE DI ACCESSIBILITA Istruzioni per l uso INDICE Prefazione di Roberto Scano 3 Accessibilità informatica Perché non sottovalutarla 4 Principali riferimenti normativi 4 I vantaggi di un sito accessibile 4 Decreto 20 marzo Principali strumenti di controllo 5 Struttura di un sito web 6 Sito accessibile o non accessibile? Come scoprirlo 6 Accessibilità Sito Agenzia Entrate Principali verifiche 6 Principali comandi di Jaws per leggere documenti PDF 19 Principali comandi di Jaws per interagire con IE 20 Accessibilità di documenti in formato WORD e PDF 22 Link utili 29 Bibliografia 29 2

3 Prefazione L importanza di comunicare con l accessibilità in mente di Roberto Scano 1 Quando si parla di accessibilità, spesso si nota nell interlocutore una reazione scocciata, come qualcosa di oneroso sia sotto l aspetto dei costi che del tempo da dedicarci. Tale atteggiamento però denota una mancata conoscenza del tema, in quanto avendo adeguate linee guida ed indicazioni operative lo sviluppo di contenuti e testi accessibili porta un beneficio a tutti, non solo alle persone con disabilità. Pensiamo ad un documento prodotto in amministrazione, che passa dal computer del dipendente alla stampante, alla scrivania del dirigente per la firma, per poi tornare ad altra scrivania per la protocollazione, scansione ed archiviazione. Pensiamo invece che, se applicassimo i criteri di accessibilità, lo stesso documento potrebbe evitare almeno un paio di questi passaggi analogici. Sempre in ottica di vision del futuro, pensiamo a centinaia di migliaia di documenti generati con il metodo analogico ed alla difficoltà di identificarli in un archivio digitale. Quante volte abbiamo approfittato dei benefici del sistema di ricerca di file e documenti (oltre a quello integrato in Acrobat) per identificare una parte di un documento tramite specifiche parole? Quella specifica voce che ci serve per ieri e che non riusciamo a trovare nella miriade di scansioni? Questo serve a far capire che l accessibilità è un beneficio per tutti, indipendentemente se il destinatario sia o meno persona con disabilità. La digitalizzazione prevede la revisione dei processi di pubblicazione: ciò che prima si faceva in modalità analogiche ora va fatto con strumenti digitali. Produrre documenti e contenuti digitali per la distribuzione è pertanto oramai un obbligo (non solo legislativo, ma soprattutto morale) da cui nessuna amministrazione può prescindere. Ecco perché un manuale operativo di supporto come quello di cui ho il piacere di curare la prefazione è uno strumento essenziale per chiunque, all interno dell amministrazione, si occupa delle diverse fasi di gestione dei documenti: produzione, pubblicazione ed archiviazione. 1 Roberto Scano è Presidente della Commissione UNI/CT 531 eaccessibility e di IWA Italy (International Web Association). Si occupa di accessibilità informatica da oltre dieci anni. Ispiratore della legge Stanca, coautore dei requisiti tecnici di accessibilità del 2005 e delle novità normative del decreto crescita 2.0. Autore di diverse opere in materia di accessibilità web è consulente dell Agenzia per l Italia digitale come esperto senior in materia di accessibilità. 3

4 Accessibilità informatica Perché non sottovalutarla Un sito ben realizzato, oltre ad essere esteticamente accattivante, deve essere, soprattutto, accessibile. La cura di questo aspetto pone in primo piano l individuo: consente la fruizione delle informazioni anche a persone affette da particolari disabilità che, in caso contrario, verrebbero discriminate. Principali riferimenti normativi Per quanto riguarda le amministrazioni pubbliche, la parola accessibilità acquisisce un valore ancor più rilevante in quanto supportata da una specifica normativa (Legge n 4/2004, Dpr 75/2005, DM 8 luglio 2005, DL 179/2012- art. 9, Circolare Agid 61/2013, Decreto 20 marzo 2013) e dall obbligo del rispetto delle raccomandazioni fornite dal W3C. L articolo 2 della legge n. 4/2004 (Legge Stanca) definisce: 1. 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. 2. 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 alle informazioni e ai servizi erogati dai sistemi informatici. I vantaggi di un sito accessibile Per maggiore chiarezza, riportiamo, di seguito, le principali difficoltà funzionali, minimizzabili attraverso l utilizzo di un sito accessibile: la cecità, tramite l ausilio di testi alternativi per tutte le immagini l ipovisione, mediante, ad esempio, l impiego di caratteri grandi, colori non eccessivamente intensi e un marcato contrasto tra primo piano e sfondo il daltonismo - cecità totale o parziale ai colori - per mezzo di abbinamenti di nuance in cui il contrasto tra primo piano e sfondo sia basato, principalmente, sulla differenza di luminosità la sordità, attraverso alternative equivalenti per tutti i contenuti auditivi la disfunzione agli arti superiori, con la realizzazione di pagine web navigabili anche senza l uso del mouse (per esempio, per mezzo di comandi vocali) la dislessia, privilegiando un linguaggio semplice e l utilizzo di termini in lingua italiana. Infatti, una persona dislessica legge con maggiore difficoltà pagine web caratterizzate da una terminologia troppo sofisticata se, per di più, accompagnata anche dal continuo ricorso a parole in lingua straniera l epilessia, evitando la presenza di immagini in movimento sullo schermo che potrebbero scatenare crisi epilettiche problemi di vista comuni - miopia, presbiopia, astigmatismo, ipermetropia, cataratta, ecc. Per agevolare questa categoria di utenti, è necessario non dimenticare alcuni semplici accorgimenti: impostare una dimensione base dei caratteri prossima al 100% accertarsi che il testo sia ridimensionabile per mezzo dei normali comandi presenti nei browser più diffusi evitare di vincolare alcune funzioni, esclusivamente, a pulsanti grafici contenenti scritte o icone di dimensioni ridotte, in quanto non tutti i browser sono in grado di effettuare ingrandimenti adeguati su richiesta dell utente. 4

5 Decreto 20 marzo 2013 Il decreto 20 marzo 2013 (modifiche all allegato A del decreto 8 luglio 2005 del Ministro per l innovazione e le tecnologie) contiene i requisiti tecnici e i diversi livelli per l accessibilità agli strumenti informatici. In questo documento sono definiti: a) i criteri e i metodi con i quali deve essere effettuata la verifica tecnica b) i requisiti tecnici di accessibilità e gli elementi da considerare per la verifica di conformità ai requisiti. Il decreto in argomento e le linee guida per l accessibilità dei contenuti web (WCAG 2.0) si basano su 4 principi fondamentali che costituiscono la colonna portante dell accessibilità. Un prodotto si può considerare accessibile solamente se è: percepibile: le informazioni e i componenti dell interfaccia utente devono essere presentati in modo che possano essere fruiti attraverso diversi canali sensoriali utilizzabile: gli elementi dell interfaccia utente e i comandi in essa contenuti devono essere utilizzabili senza ingiustificati disagi o vincoli per l utente comprensibile: gli utenti devono poter comprendere le modalità di funzionamento dell interfaccia e le azioni in essa contenute necessarie per ottenere servizi e informazioni robusto: il contenuto deve essere abbastanza robusto da poter essere interpretato in modo affidabile da una vasta gamma di programmi utilizzati dall utente, comprese le tecnologie assistive. Questi principi si esplicano attraverso 12 linee guida, denominate requisiti. Per ciascun requisito, sono stati individuati dei punti di controllo. L esito dei test sui vari punti di controllo delinea lo stato del sito internet analizzato. L Agenzia per l Italia Digitale può rilasciare, su richiesta dell Amministrazione interessata, un bollino che attesti la conformità del proprio sito web. Secondo le direttive AgID, la verifica, da effettuarsi a cura del richiedente, va eseguita su: home page tutte le pagine linkate dalla home page tutte le tipologie di pagine che presentano form (moduli) e relative pagine di risposta della stessa il 5% delle rimanenti pagine. Principali strumenti di controllo Per effettuare le verifiche sui vari punti di controllo, possono essere utilizzati i seguenti strumenti: Web Accessibility Toolbar 2.0 (italiano): barra per la verifica manuale dei punti di controllo della check-list per Internet Explorer 6, 7 e 8 con sistema operativo Windows 2000 e XP - versione del 20/07/2007 Web Accessibility Toolbar 2012 (inglese): barra per la verifica manuale dei punti di controllo della check-list per Internet Explorer 9 o 10 con sistema operativo Vista, Windows 7 o Windows 8 - versione del 19/07/2013 Lettore di schermo versione della durata di 40 minuti a sessione (per la successiva occorre riavviare il computer): o versione 14 di Jaws (26/11/2014) scaricabile da: &sectionid=2&lng=1 a 64 o 32 bit in relazione al pc dove va installata. o Elenco di comandi di Jaws per interagire con Internet Explorer - doc o Elenco di comandi di Jaws per interagire con documenti PDF - doc Browser (per Windows) con cui le pagine devono essere compatibili: o Internet Explorer (utilizzare quello già installato sulla postazione di lavoro) o IEtester (download da tool per visionare una pagina HTML nelle diverse versioni di Internet Explorer o Firefox (download da o Chrome (download da o Safari (download da support.apple.com) Validatori W3C con cui controllare la validità del codice HTML e CSS: o HTML Validatore HTML (link al sito del W3C) o CSS Validatore CSS (link al sito del W3C) 5

6 Struttura di un sito web Prima di cominciare a occuparci specificatamente dei controlli di accessibilità, è opportuno soffermarci un istante sulla struttura di un sito web. Una pagina web è formata dai seguenti elementi: tag HTML (es. TITLE, H1), che costituiscono la struttura delle pagine fogli di stile a cascata (CSS), che determinano la rappresentazione visiva delle pagine immagini statiche e dinamiche elementi codificati attraverso Java Script (linguaggio di programmazione utilizzato per potenziare le funzionalità dell html, come, ad esempio, il click del mouse su un pulsante). Sito accessibile o non accessibile? Come scoprirlo Occupiamoci ora delle varie fasi da seguire per l analisi dell accessibilità di un sito. 1. Il primo step è semplicemente visivo: serve a individuare gli elementi costitutivi della pagina e la loro organizzazione in aree omogenee (testata, immagini, blocchi di testo ecc.) Ad esempio, nel corso della primissima analisi, è importante cercare di capire quali tipologie di immagini si trovano all interno della pagina. Per quanto riguarda il sito dell Agenzia delle Entrate: a. testata, parte sinistra e footer - generati dal codice HTML - sono elementi sostanzialmente fissi sia per quanto riguarda la struttura che per quanto concerne i contenuti e, pertanto, la loro analisi può essere effettuata una sola volta. b. Il layout della parte centrale, definito dai fogli di stile (CSS), rimane fisso. I contenuti sono, invece, variabili e quindi devono essere controllati con più attenzione. 2. Il secondo step è l analisi dei punti di controllo: consiste nel testare singolarmente i vari punti di controllo per la verifica dei 12 requisiti di accessibilità. ACCESSIBILITA SITO AGENZIA ENTRATE - PRINCIPALI VERIFICHE - Gli strumenti per eseguire i controlli di accessibilità sono, principalmente, 4: controllo a vista controllo mediante tastiera controllo attraverso la barra di accessibilità (TAC) controllo con l ausilio di Jaws (screen reader per non vedenti). Nella tabella sottostante, verranno descritti, esclusivamente, i principali punti di controllo relativi ai 12 requisiti. Alternative testuali Devono essere fornite alternative testuali per qualsiasi contenuto non di testo in modo che lo stesso contenuto possa essere trasformato in altre forme fruibili secondo le necessità degli utenti, come ad esempio, stampa a caratteri ingranditi, braille, sintesi vocale, simboli o altra modalità di rappresentazione del contenuto. Contenuti non testuali 1. Tutte le immagini significative, cioè quelle che, nella maggior parte dei casi, sono scritte nel codice HTML. Esse devono riportare un alternativa testuale (mediante l attributo ALT ) che ne esprima l analogo contenuto commisurato alla funzione esercitata dall immagine stessa. Esempio Barra accessibilità (TAC): Menu Images Remove Images: controllare se a fronte di ogni immagine è presente un ALT e verificare se è adeguatamente descrittivo. Esempio dal link Immagine Testo alternativo torna all indice 6

7 2. Le immagini puramente decorative (quelle, cioè, che non veicolano alcuna informazione) o gli eventuali contenuti nascosti devono essere realizzati in modo che le tecnologie assistive (ad es. jaws) li possano ignorare: 1) utilizzando, ad esempio, la seguente sintassi HTML: ALT= DISPLAY:NONE 2) utilizzando i fogli di stile (CSS), rendendo di sfondo le immagini. TAC: Images Remove CSS Images: controllare che non ci siano perdite di contenuti a fronte della scomparsa delle immagini di sfondo. TAC: Images Remove Images: controllare se a fronte di immagini non significative sono presenti ALT= TAC: CSS Disable CSS: controllare se sono presenti contenuti nascosti. JAWS: controllare che i contenuti nascosti non vengano letti. 3. Per quanto riguarda eventuali contenuti non testuali (es. grafici, audio e video) deve sempre essere presente un alternativa testuale e, se necessario a rendere ancor più fruibile l informazione, può essere previsto un link che porti a una pagina esplicativa, ovviamente in formato html. TAC: Images Remove Images. Controllare se: 1) è presente un alternativa testuale (ALT) 2) l alternativa testuale risulta sufficientemente descrittiva 3) è presente una descrizione dell immagine o del video. TAC: IE Toggle ActiveX In caso di oggetti non HTML, controllare se: 4) è presente un alternativa testuale (ALT) 5) l alternativa testuale risulta sufficientemente descrittiva 6) è presente una descrizione dell oggetto ActiveX. 4. Se sono utilizzati CAPTCHA grafici e audio o semantici, compatibili con le tecnologie assistive: deve essere presente un testo alternativo che indichi, semplicemente, che ci troviamo di fronte ad un immagine contenente il codice di sicurezza (il testo alternativo non contiene il codice di sicurezza) l audio non deve interferire con i tempi di pronuncia del lettore di schermo. Tastiera: Utilizzare il tabulatore per verificare il corretto posizionamento del cursore all interno del campo riservato al CAPTCHA. JAWS: Navigare all interno del CAPTCHA e controllare che: sia possibile utilizzare il captcha facilmente non ci siano interferenze tra Jaws e il sonoro del captcha sia presente il testo alternativo dell immagine. 2. Contenuti audio, contenuti video, animazioni Devono essere fornite alternative testuali equivalenti per le informazioni veicolate da formati audio, formati video ecc. Audio - Descrizioni o trascrizioni descrittive (per contenuti registrati) 1. Tutti i contenuti multimediali registrati e in diretta devono prevedere un titolo e un'etichetta (testo alternativo) che ne descrivano il contenuto. Controllo a vista: controllare la presenza del titolo del contenuto registrato. TAC: IE Toggle ActiveX Controllare se: 1. è presente l etichetta (testo alternativo) 2. l etichetta è adeguatamente descrittiva. 7

8 Adattabile Devono essere creati contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdita di informazioni o struttura. Informazioni e correlazioni; Sequenza significativa 1. La pagina deve essere organizzata in aree ben definite, ciascuna delle quali deve contenere specifiche tipologie/blocchi di informazioni/contenuti. Controllo a vista: Controllare se: 1. i blocchi di contenuto sono disposti in modo ordinato sulla pagina 2. i blocchi di contenuto sono omogenei 3. è rispettata la sequenzialità logica. 2. Le informazioni, la struttura e le correlazioni fra distinti blocchi di contenuto, visibili sulla pagina, devono poter essere visualizzabili in modalità differente, senza perdita di informazioni, di struttura o delle esistenti correlazioni (sia per impaginazione con CSS che con tabelle). TAC: 1. Per il sito dell AGE, realizzato, prevalentemente, con i fogli di stile: CSS Disable CSS Esempio porzione Home Page con CSS attivo 8

9 Esempio porzione Home page con CSS disattivato 2. Per siti dove è predominante la struttura tabellare: Tables Linearize Esempio pagina con struttura tabellare 9

10 Esempio linearizzazione Visualizzazione formato web N.B.: Un sito può essere strutturato utilizzando sia CSS che tabelle. Pertanto, potrebbe essere necessario eseguire entrambi i controlli! TAC: A prescindere dalla tipologia di struttura utilizzata, devono essere sempre controllate le intestazioni che caratterizzano i gruppi di contenuti (titoli): Structure Headings: sulla pagina linearizzata, controllare se tutti i gruppi di contenuti sono adeguatamente titolati e se la sequenza logica viene mantenuta. Se necessario usare, per una migliore comprensione, anche: Structure Heading Structure. 3. Deve essere evitato di frammentare le informazioni, la struttura e le correlazioni fra distinti blocchi di contenuto con un numero eccessivo di titoli (ad es. troppi <H1>). Tale verifica viene effettuata, sulla pagina utilizzando i seguenti comandi: Visualizzazione struttura linearizzata TAC: Structure Headings 10

11 oppure Structure Heading Structure). 4. Utilizzando browser e piattaforme diversi, la visualizzazione della pagina deve conservare fedelmente informazioni, struttura e correlazioni fra distinti blocchi. Caratteristiche sensoriali 1. Le istruzioni operative devono essere presentate in un formato comprensibile attraverso diversi canali sensoriali e, almeno, tramite la vista e l udito. Controllo a vista: Visualizzare le pagine con diversi browser/piattaforme/sistemi operativi (IE, Firefox, Chrome e Safari su Windows, Mac Os, Linux, Android, tablet, smartphone) e controllare che le informazioni, l organizzazione e la sequenza logica dei contenuti siano mantenute. Controllo a vista: Controllare che eventuali istruzioni o avvisi siano percepibili attraverso vista e udito. Distinguibile Gli utenti devono essere agevolati nella visione e nell ascolto dei contenuti attraverso la separazione del testo in primo piano dallo sfondo. Uso del colore 1. Occorre evitare di usare il colore come unica forma di comunicazione: gli elementi della pagina devono essere distinguibili anche attraverso la visualizzazione in bianco e nero. TAC: La barra contiene la funzione Colour Greyscale. Controllare che: 1. le varie tipologie di contenuto siano distinguibili anche utilizzando la visualizzazione in scale di grigio 2. le varie tipologie di contenuto siano riconoscibili anche senza posizionarvi sopra il cursore del mouse (ad es. i link). In alternativa a TAC, può essere scaricato il programma ColorDoctor. 2. Almeno nell area dei contenuti, i link devono avere un aspetto grafico standard. Controllo a vista: Controllare che i link siano sottolineati. Controllo del sonoro 1. I contenuti sonori presenti nella pagina devono essere dotati di funzionalità per: avviarli metterli in pausa interromperli regolarne il volume. Tali funzionalità devono essere compatibili con le tecnologie assistive. Tastiera: Controllare che i contenuti sonori si possano avviare, mettere in pausa, arrestare o regolarne il volume con il solo uso della tastiera. JAWS: 1. navigare sulla pagina 2. arrivare al contenuto sonoro 3. controllare che sia possibile operare facilmente con i pulsanti (avvio, stop, pausa, regolazione del volume) e che non ci siano interferenze tra il lettore e il sonoro. 11

12 2. Nel caso in cui siano presenti contenuti sonori che si avviano automaticamente al caricamento della pagina, non è consentita una durata superiore ai 3 secondi. Contrasto (minimo) 1. I contenuti testuali e i testi in formato immagine devono avere un adeguato contrasto testo/fondo. I loghi aziendali, eccezionalmente, possono avere anche un contrasto limitato. Ridimensionamento del testo 1. Ingrandendo il testo della pagina fino al 200%, senza utilizzare lo zoom, si devono evitare sovrapposizioni o perdita di informazioni tali da rendere incomprensibile il contenuto e impedire all utente di operare. Controllo a orecchio: Controllare che all avvio della pagina, eventuali contenuti sonori che partono automaticamente non permangano per più di 3 secondi. TAC: Colour Contrast Analyser: controllare che i colori utilizzati per i testi e le immagini in formato testo che veicolano contenuti essenziali abbiano un adeguato contrasto testo/sfondo, anche in relazione alla dimensione del testo. Descrizione Fasi Controllo TAC: Comando Resize 1024x768: controllare che: non ci siano sovrapposizioni di contenuto non compaia la barra di scorrimento orizzontale. I controlli devono essere eseguiti con IE, Firefox, Chrome e Safari. Di seguito, la procedura da seguire con IE o Firefox: Mantenendo la risoluzione a 1024x768, effettuare le seguenti verifiche: A. Browser IE: Menù: Visualizza -> Dimensione del testo -> impostare a: Molto grande e controllare che non ci siano perdite o sovrapposizioni di contenuti. B. Browser Firefox: Menù: Visualizza -> Zoom ->Zoom solo del testo-> tasto CTRL + (3 volte) e controllare che non ci siano perdite o sovrapposizioni di contenuti. Testo rappresentato come immagine 1. E necessario evitare testi in formato immagine a favore di testi normali, tranne quei casi in cui il testo in formato immagine è essenziale per il tipo di informazione veicolata (es. logotipi con scritta). TAC: Images Show Images: Controllare se: nella pagina ci sono testi in formato immagine che potevano essere evitati in presenza di testo essenziale in formato immagine, è fornita un alternativa testuale (ALT) l alternativa testuale è adeguatamente descrittiva. Esempio di testo significativo in formato immagine 12

13 Tastiera Tutte le funzionalità del contenuto devono essere utilizzabili tramite tastiera senza obbligare a tempi specifici per le singole battute, salvo il caso in cui la funzione sottostante richieda un input dipendente dai movimenti dell utente che non possa essere ottenuto in modo equivalente con input da tastiera. Nessun impedimento all uso della tastiera 1. Tutti gli elementi interattivi (link, campi, pulsanti, video, ecc.), compresi quelli realizzati con tecnologie diverse da X-HTML, devono essere accessibili, oltre che con il mouse, anche con la tastiera. Tastiera: Navigare tutti gli elementi interattivi e controllare se sono attivabili da tastiera. 2. Se sono previsti metodi di interazione tramite tastiera diversi da quelli usuali, l utente deve essere avvisato. Verificare con il progettista del sito la possibilità di modalità non convenzionali di interazione con la tastiera (ad esempio, avvisi sonori). E' necessario, quindi, controllare l accessibilità e la presenza di adeguate istruzioni all utente. Adeguata disponibilità di tempo E necessario fornire all utente tempo sufficiente per leggere e utilizzare i contenuti. Regolazione tempi di esecuzione 1. Se la durata della sessione di lavoro è limitata, è necessario informarne preventivamente l utente. Verificare con il progettista del sito la presenza di sessioni temporali a scadenza e controllare che l utente sia avvisato esplicitamente. 2. In caso di funzionalità particolarmente delicate, l utente deve: essere avvisato che il tempo a disposizione sta per scadere essere indicata un azione da compiere al fine di estendere la sessione di lavoro. Verificare con il progettista del sito l eventuale modalità adottata per l estensione della sessione di lavoro. Pausa, stop, nascondi 1. E necessario evitare testi od oggetti in movimento, che: lampeggiano scorrono si attivano automaticamente alla visualizzazione della pagina durano più di 5 secondi. Nel caso, i testi o gli oggetti in movimento devono essere corredati di meccanismi per mettere in pausa, interrompere o nascondere. Tali dispositivi devono essere accessibili da tastiera. Controllo a vista: controllare la presenza di oggetti in movimento che partono automaticamente all apertura della pagina e che durano più di 5 secondi. In caso positivo, verificare la disponibilità di meccanismi di interruzione. Crisi epilettiche Deve essere evitato lo sviluppo di contenuti che possano causare crisi epilettiche. Lampeggiamenti 1. Deve essere evitato qualsiasi tipo di elemento che lampeggi con una frequenza superiore a 3 volte al secondo. Controllo a vista: Controllare la presenza di oggetti che lampeggiano con una frequenza superiore a 3 volte al secondo. 13

14 Navigabile E necessario fornire all'utente funzionalità di supporto per navigare, trovare contenuti e determinare la propria posizione nel sito e nelle pagine. Salto di blocchi 1. Devono essere previsti skip link per saltare sequenze ripetitive di contenuti. Essi devono essere leggibili dal lettore di schermo. Titolo della pagina TAC: CSS Disable CSS: controllare la presenza di skip link e il corretto funzionamento. JAWS: Controllare che gli skip link nascosti vengano letti. 1. La pagina deve presentare un titolo Controllo a vista: Controllare: (<TITLE>) significativo nel formato Nome 1. - la presenza del titolo sulla barra superiore del browser sito/titolo pagina visualizzata. Esempio: Agenzia delle Entrate - Servizi online - IVA mini One Esempio: Stop Shop (Moss) <title>agenzia delle Entrate - Servizi online - IVA mini One Stop Shop (Moss)</title> 2. - la sua adeguatezza rispetto al titolo principale dei contenuti. Esempio: IVA mini One Stop Shop (Moss) Ordine del focus 1. Il focus è visivamente rappresentato dal cursore lampeggiante Il movimento del cursore all interno della pagina è ottenuto attraverso l utilizzo del tasto TAB. La navigazione, attraverso il tab, tra tutti gli elementi interattivi della pagina (link ed elementi delle form), deve avere una sequenza logica e coerente. Scopo del collegamento (nel contesto) Tastiera: Navigare tutti gli elementi interattivi e controllare la corretta sequenza logica. 1. I titoli dei link devono essere sintetici e significativi e, se letti fuori dal contesto, devono far capire all utente cosa troverà nella pagina, prima ancora di accedervi. In caso il titolo del link non fosse esaustivo, il suo significato deve essere chiarito dal contenuto circostante. TAC: Doc Info List Links: controllare se i link sono significativi letti fuori dal contesto e, per quelli non significativi, controllare sulla pagina se i contenuti adiacenti ne chiariscono il significato. In alternativa alla TAC, si può usare JAWS: con Ins + F7 viene visualizzato l elenco dei link. 2. Se durante la navigazione vengono aperte nuove finestre o vi sono link che aprono documenti non HTML, l utente deve essere avvisato nel testo del link. Esempio: indicazioni fornite in sede OCSE - pdf TAC: Doc Info Javascript / New Window Links: controllare se sono presenti link che aprono nuove finestre tramite javascript o tramite l attributo TARGET. 1. Nel caso tali link siano presenti, controllare se l utente è avvisato, disabilitando: i CSS (CSS Disable CSS) o le immagini in caso di link grafici (Images Remove Images). TAC: Doc Info List Links: controllare se i link che aprono documenti non HTML contengono l indicazione del tipo di documento (esempio pdf). In alternativa alla TAC, si può usare JAWS: con Ins + F7 viene visualizzato l elenco dei link e si può controllare se è specificato il tipo di documento. 3. La denominazione dei link deve essere coerente: i link che portano alle stesse pagine devono avere la stessa denominazione. JAWS: Ins + F7: Disporre i link in ordine alfabetico e controllare se ci sono stessi link che portano a pagine differenti. 14

15 Differenti modalità 1. Per consentire all utente di orientarsi nel sito e capire dove si trova, devono essere disponibili almeno due delle funzionalità sotto indicate, riportate nelle linee guida: 1. - menù di navigazione 2. - lista di link 3. - sommario 4. - mappa del sito 5. - funzione di ricerca. Titoli ed etichette 1. I blocchi di contenuto devono presentare un titolo leggibile dal lettore di schermo. N.B.: Poiché per aiutare il non vedente possono essere presenti titoli nascosti, è necessario verificarne la presenza e la leggibilità da parte della tecnologia assistiva. Focus visibile 1. L indicatore del FOCUS (cursore lampeggiante) deve essere chiaramente visibile nei diversi browser. Controllo a vista: Controllare la presenza di almeno due metodi di orientamento indicati nelle linee guida. TAC: Structure Heading Structure: per controllare che i titoli presenti nella pagina siano leggibili. Disable CSS: per visualizzare eventuali titoli nascosti. JAWS: Ins + F6: Scorrere la lista dei titoli e controllare se quelli nascosti vengono letti correttamente. Controllo a vista: Usare il tabulatore e navigare tra i componenti interattivi, per controllare la visibilità del focus sui diversi browser (IE, Firefox, Chrome e Safari). Leggibile Rendere leggibile e comprensibile il contenuto testuale Lingua della pagina 1. La lingua prevalente della pagina deve essere correttamente definita (es. con il comando LANG). Controllo a vista: Su Explorer, visualizzare l HTML della pagina (tasto destro del mouse + HTML) e controllare la presenza di Lang:it (dopo il comando DOCTYPE). ESEMPIO: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="it"> Parti in lingua diversa da quella definita per la pagina 1. Deve essere definita la lingua di ogni passaggio o frase nel contenuto. I cambi di lingua devono essere impostati solo per pezzi di contenuto adeguatamente lunghi e non per singole parole perché il lettore di schermo, in caso di cambio lingua, deve caricare un nuovo vocabolario. TAC: Doc Info Show Lang Attributes: controllare l uso adeguato di cambi di lingua. Deve essere verificata la presenza del TAG <SPAN> con attributo LANG. N.B: Il TAG <SPAN> produce i suoi effetti solo su singole porzioni di testo. Pertanto, si differenzia dal TAG <DIV> che agisce, invece, su porzioni più grandi. Prevedibile E indispensabile creare pagine web che appaiano e che si comportino in maniera prevedibile Al focus; All input 1. La modifica dell impostazione di qualsiasi componente nell interfaccia utente non deve provocare automaticamente un cambiamento di contesto - es. la visualizzazione di una pagina diversa da quella in cui si sta operando - a meno che l utente ne sia stato preventivamente informato. Tastiera e mouse: verificare con il mouse la presenza di elementi interattivi dinamici (es. menù a tendina, ecc.) controllare che, usando solo la tastiera, non ci siano cambiamenti automatici di contesto. 15

16 Navigazione costante 1. I meccanismi di navigazione ripetuti su più pagine web, ogni volta che si ripetono, devono apparire nello stesso ordine. Controllo a vista: Controllare la consistenza dei meccanismi di navigazione (ad esempio, il tasto home deve sempre essere posizionato in alto a sinistra) 2. In caso di navigazione tramite mappe immagini, devono essere presenti: - testi alternativi sia sull immagine della mappa che sulle aree sensibili; - link duplicati visibili sulla pagina, in modo da consentire la navigazione anche se le mappe immagini sono disabilitate. TAC: Images Show Image Maps: controllare la presenza della mappa sulla pagina. TAC: Images Remove Images: controllare che sia presente l ALT sulla mappa-immagine. Controllo a vista e con il mouse: Passare con il mouse sulla mappa e controllare che le aree sensibili siano dotate di testo alternativo (ALT) e che sulla pagina siano duplicati gli stessi link. Esempio: ali/ Identificazione coerente 1. I componenti che hanno la stessa funzionalità devono essere identificati in modo coerente: occorre usare le stesse parole per identificare le stesse azioni (es. se decidiamo di parlare di aree del sito non dobbiamo poi cambiare la denominazione in sezioni del sito ) devono essere utilizzate le stesse etichette dei campi e dei pulsanti per identificare il medesimo controllo è necessario impiegare lo stesso layout all interno dell intero sito. Controllo a vista: Controllare la consistenza dei vari elementi tra le varie pagine. Assistenza nell'inserimento di dati e informazioni L utente deve essere aiutato a evitare errori e agevolato nella loro correzione Identificazione di errori Suggerimenti per gli errori Prevenzione degli errori 1. In caso di errore d inserimento da parte dell utente: l elemento errato deve essere evidenziato chiaramente (Es.: Non è stato inserito il codice fiscale! anziché il campo codice fiscale non è valorizzato! ) devono essere illustrate con chiarezza le azioni necessarie per rettificare la parte imprecisa. 2. In caso di funzionalità critiche di gestione dati da parte dell utente, devono essere previste modalità di prevenzione dell errore in termini di reversibilità, controllo o conferma. Ad esempio, per quanto concerne l invio Controllo a vista: Compilare una form inserendo alcuni errori e verificare le casistiche dei messaggi forniti accertandone la visibilità e la comprensibilità. Controllo a vista: Compilare una form e verificare quale meccanismo di prevenzione degli errori è stato implementato e se implementato correttamente. 16

17 telematico dei dati, l utente deve: a) essere avvisato che sta per essere effettuato l invio definitivo dei dati b) avere la possibilità di confermare l operazione c) avere l opportunità, in caso di errore, di tornare allo stato antecedente all invio, al fine di potere effettuare le opportune modifiche. Etichette o istruzioni 1. Nelle form: lo spostamento del focus tra i vari campi della pagina non deve prevedere salti la sequenza logica dello scorrimento del focus deve essere significativa i pulsanti devono essere tutti in formato standard e accessibili da tastiera i campi devono presentare etichette, codificate correttamente, chiare e descrittive, poste vicino ai campi stessi Tastiera: Spostarsi all interno della form solo con la tastiera e controllare che il tabulatore si muova correttamente su tutti i campi, rispettando la sequenza logica prestabilita. Verificare, inoltre, che all interno dei campi sia possibile inserire dati e che i pulsanti funzionino in maniera adeguata. Attenzione: non cliccare con il mouse sul primo elemento della form, ma posizionarsi su di esso direttamente con la tastiera. TAC: Structure - Fieldset / Label: controllare che ci sia la corretta associazione tra campi (ID) ed etichette (LABEL FOR). Esempio Il <FIELDSET> - Macro area contenente campi correlati, identificata da un tag <LEGEND> - va utilizzato solamente se utile a raggruppare campi e controlli che fanno parte di una stessa categoria e che letti separatamente possono risultare ambigui. Non vanno usati per: a) creare effetti di formattazione b) per incorniciare la form. JAWS: Ins + F5: controllare: l effettiva associazione tra campi ed etichette la presenza del pulsante di azione. JAWS: Premere il tasto F ed entrare nella form, navigare con la tastiera tra i campi per controllare l operatività con il lettore di schermo. Esempio Fieldset 2. Le eventuali istruzioni aggiuntive devono essere riportate in maniera che anche il lettore di schermo possa leggerle. JAWS: Ins + freccia giù: fare una lettura generale dei contenuti e controllare che le istruzioni aggiuntive vengano lette. 17

18 Compatibile Deve essere garantita la massima compatibilità con i programmi utente e con le tecnologie assistive. Analisi sintattica Name, Role, Value 1. Eventuali contenuti e documenti realizzati con tecnologie non di base (es. PDF, Flash, ecc.) devono essere compatibili con le tecnologie assistive. 2. Se sono presenti documenti realizzati con tecnologie non compatibili con l'accessibilità, devono essere fornite delle alternative compatibili con le tecnologie assistive (ad esempio, descrizione del contenuto nel caso di un video). 3. Deve essere possibile interagire con tutti gli elementi presenti nelle pagine (titoli, label, form, fieldset, frame, script, documenti, ecc.) attraverso le tecnologie assistive. Verificare con il progettista del sito quali tecnologie non di base (PDF, Flash, ecc.) sono state utilizzate e se sono state seguite le linee guida del fornitore. JAWS: Ins + freccia giù: procedere alla lettura sequenziale dei contenuti e controllarne la correttezza; provare ad interagire con eventuali elementi interattivi e verificare la possibilità di operare. Verificare con il progettista del sito quali contenuti non sono compatibili con l accessibilità e controllare se: sono stati forniti sommario e descrizione sono presenti le alternative accessibili. JAWS: Ins + freccia giù: fare una lettura generale della pagina e controllare che le informazioni, in qualunque formato vengano fornite, siano tutte leggibili e comprensibili, senza inutili ridondanze. In presenza di tabelle dati, premere il tasto T, entrare nella tabella e controllare la presenza e l adeguatezza del CAPTION e/o del SUMMARY. (N.B: In una tabella il contenuto di summary e il contenuto di caption devono essere diversi: caption identifica titolo e didascalia della tabella, mentre summary fornisce indicazioni sul contenuto). Verificare la corretta lettura dei dati muovendosi tra le celle con i tasti frecce. Posizionarsi su una cella, premere ctrl + alt + 5 e controllare la corretta associazione e comprensibilità tra titoli e dati contenuti all interno della cella stessa. In presenza di script, verificare che la pagina sia correttamente utilizzabile e operabile. 18

19 Principali comandi di Jaws per leggere documenti PDF Lettura di riga in riga Passaggio da elemento a elemento (riga o link) Passaggio da elemento a elemento all indietro (riga o link) Posizionarsi sull elemento successivo (precedente) e selezionarlo CLIC sull elemento Torna da dove è venuto (equivalente back browser) Interrompe lettura Legge dal punto in cui si trova senza interrompersi Si posiziona sulla prima pagina Va avanti (indietro) di una pagina Frecce su e giù Tab Shift + Tab Shift + freccia su (giù) Shift + Invio Alt + freccia sx Ctrl Ins + freccia giù Ctrl + Home Ctrl + pag giù (su) 19

20 Principali comandi di Jaws per interagire con IE IN GENERALE Avanti/Indietro di una pagina Spostarsi nella barra degli indirizzi per scrivere Leggere la barra degli indirizzi Leggere link selezionato Seleziona tutto l elemento Alt + freccia destra/sinistra Alt + I Insert + A Insert + Tab F8 LETTURA TESTI Per fermare la lettura Leggere il titolo della finestra Leggere dall inizio pagina Leggere da dove si trova il cursore Leggere la riga corrente Leggere la riga precedente/successiva Alt + freccia destra/sinistra Alt + D Insert + A Insert + Tab Insert + Freccia Su Freccia su / giù Leggere la frase corrente Alt + Num Pad 5 Leggere la frase precedente Leggere la frase successiva Alt + Freccia Su Alt + Freccia giù INTESTAZIONI (Titoli delle Pagine) Elenco intestazioni Insert + F6 LINK Elenco link Link successivo / precedente Aprire link Insert + F7 Tab / Shift + Tab Invio 20

21 FORM Posizionarsi sulla form Interagire con i controlli della form e verificare la corretta associazione etichette/controlli Elenco controlli Focus sul primo campo Focus sul campo successivo/precedente Focus sull ultimo campo Selezione elementi Tasto F Tab Insert + F5 Ctrl + Insert + Home Tab/Shift + Tab Ctrl + Insert + Fine Frecce su e giù FRAME Elenco frame Frame successivo Frame precedente Insert + F9 Ctrl + Tab Ctrl + Shift + Tab LETTURA TABELLE Elenco di tutte le tabelle della pagina Posizionarsi nella tabella Tornare alla tabella precedente CTRL +INS+T T Shift T Leggere cella attuale Alt + Ctrl + Num Pad 5 Spostarsi in qualsiasi direzione tra le celle Spostarsi avanti e indietro tra le celle Leggere prima cella Leggere ultima cella Alt + Ctrl + freccie Freccia giu / su Alt + Ctrl + Home Alt + Ctrl + Fine 21

22 Accessibilità di documenti in formato WORD e PDF Come sappiamo, il PDF (Portable Document Format), ideato da Adobe, è un formato di file usato per presentare e scambiare documenti in modo affidabile, indipendentemente dal software, dall'hardware o dal sistema operativo. Nonostante la sua grande versatilità, per quanto concerne i siti web, questo tipo di formato non rappresenta però la scelta migliore in tema di accessibilità e, pertanto, ove possibile, è sempre preferibile utilizzare altre tipologie di file. Attualmente, il formato doc è, senza dubbio, la tipologia di file maggiormente diffusa sia in ambito domestico che lavorativo e, laddove vengano rispettati i criteri di strutturazione del documento, risponde in modo significativo agli standard di accessibilità informatica. Nella nota esplicativa del 12 dicembre 2014, a cura del Responsabile dell accessibilità informatica dell Agenzia delle Entrate Accessibilità dei documenti pubblicati sui siti Internet e Intranet vengono riportate, tra le altre cose, le modalità di redazione per rendere un file word accessibile: a) fornire alternative testuali per qualsiasi contenuto non testuale (immagini, tabelle, ecc.) b) utilizzare gli stili e assicurarsi che tutti gli stili del titolo siano correttamente ordinati c) impiegare strutture semplici per le tabelle e specificare le intestazioni delle colonne d) evitare l'utilizzo di caratteri vuoti ripetuti (spazi superflui, tabulazioni e paragrafi vuoti) e) usare testo significativo per i collegamenti ipertestuali. 22

23 Qualora il documento word debba essere salvato in formato pdf, occorre seguire alcuni step fondamentali. Primo passaggio: File salva con nome Opzioni 23

24 Secondo passaggio: 1. Tag per la struttura del documento per l accessibilità 24

25 Qualora il documento pervenga in formato PDF, prima della pubblicazione, occorre verificare che siano stati rispettati tutti i criteri di accessibilità. Perché è così importante che il PDF sia accessibile? Perché: i contenuti possono essere letti con uno screen reader il file può essere sottoposto a ingrandimenti senza perdita di informazioni o dover ricorrere alla barra di scorrimento orizzontale del reader permette di cambiare i colori di testo e sfondo liberamente è provvisto di segnalibri e di un corretto ordine di lettura consente la consultazione del documento attraverso l utilizzo del tasto TAB. Di seguito, riportiamo gli step fondamentali per verificare che un file in formato PDF sia accessibile. Primo passaggio Dal menù Avanzate, selezionare la voce Accessibilità. Iniziare con le verifiche e scegliere tra le seguenti opzioni: 1. verifica rapida 2. controllo completo. 25

26 1. Selezionando la Verifica Rapida di Accessibilità, il sistema fornirà un report simile a quello sottostante, dove verranno indicate le eventuali problematiche riscontrate. 26

27 2. Selezionando, invece, l opzione Controllo Completo dovranno essere seguiti alcuni step. a) Scegliere dalla lista Opzioni di controllo il Nome: W3C Web Content Accessibility Guidelines 2.0 (Linee guida sull accessibilità del contenuto del Web, bozza di lavoro del 27 aprile 2006), mostrata nell immagine sottostante. b) Avviare il controllo 27

28 Il controllo produrrà 2 differenti tipologie di Report: a) Il primo report, riportato nell immagine sottostante, riassumerà sinteticamente, per ciascun livello di verifica, le tipologie di problemi riscontrate. b) Il secondo report, rappresentato nell immagine sottostante, consentirà di individuare gli elementi che sono in conflitto con le direttive per l'accesso facilitato ai contenuti Web. I problemi rilevati verranno visualizzati in un elenco in modo che possano essere analizzati singolarmente, stampati o salvati per un'analisi successiva. 28

29 Link utili Pagina sull accessibilità del sito dell AgID Sito World Wide Web Consortium (W3C) Accessibilità Guida Completa Guida di Jaws e Magic Sito webaccessibile.org Sito usabile.it Bibliografia Patrizia Bertini, Accessibilità & Tecnologie, Pearson Ed., Milano, 2003 Maurizio Boscarol, Ecologia dei siti web, Hops Libri, Milano, 2003 Michele Diodati, Accessibilità. Guida completa, Apogeo,Milano, 2007 Roberto Scano, Accessibilità: dalla teoria alla realtà, IWA Italy, Venezia, 2004 Roberto Scano, Legge 04/2004 dalla teoria alla realtà, IWA Italy, Venezia, 2005 Roberto Scano, Accessibilità delle applicazioni Web, Pearson Ed., Milano, 2008 Roberto Scano, Accessibilità dei siti web della PA, Requisiti e best practice per garantire a tutti informazioni e servizi, Apogeo, Milano, 2014 Lorenzo Spallino, L'Internet delle Pubbliche amministrazioni: la legge 9 gennaio 2004 n. 4, Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici, in «Rivista Amministrativa della Regione Lombardia», n. 2, 2004 Paciello, Michael J. Web Accessibility for People with disabilities, CPM Books,