Regole tecniche analisi ed esempi modalità di valutazione OBIETTIVO FINALE: Comprendere ed applicare le tecniche di sviluppo per garantire il diritto di accesso alle tecnologie informatiche da parte di tutti i cittadini. 1 Accessibilità: dalla teoria alla realtà (ISBN: 88-7633-000-3) Uno strumento indispensabile per comprendere l’accessibilità del web. Con i contributi dei migliori esperti di accessibilità ed usabilità del world wide web. Acquistabile esclusivamente su www.lulu.com Messaggio promozionale 2 “Requisiti tecnici e i diversi livelli per l'accessibilità agli strumenti informatici” http://www. pubbliaccesso.it/ normative/ DM080705.htm Decreto Ministeriale emanato dal Ministro per l’Innovazione e le Tecnologie Nato il: 8 luglio 2005 G.U.: n. 183 (8 agosto 2005) In vigore: 23 agosto 2005 3 Contenuto del decreto http://www. pubbliaccesso.it/ normative/ DM080705.htm Definizioni e ambito d'applicazione Requisiti tecnici e livelli di accessibilità per i siti INTERNET Accessibilità per i personal computer, l'ambiente operativo, le applicazioni e i prodotti a scaffale Specifiche tecniche per la sussistenza dei requisiti dei soggetti valutatori 4 Contenuto del decreto http://www. pubbliaccesso.it/ normative/ DM080705.htm Svolgimento delle verifiche e determinazione degli importi massimi dovuti dai soggetti privati Logo attestante il possesso del requisito di accessibilità Utilizzo del logo Rimborso delle spese amministrative sostenute dalla Presidenza del Consiglio dei Ministri per le attività inerenti l’utilizzo del logo e le funzioni ispettive) 5 a) http://www. b) pubbliaccesso.it/ normative/ c) DM080705.htm d) Art. 1 e) f) accessibilità: 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; ambiente operativo: insieme di programmi e di interfacce utente che consentono l'utilizzo delle risorse hardware e software disponibili sul computer; applet: programma autonomo, in genere scritto in linguaggio Java, che può essere inserito in una pagina Web per fornire informazioni o funzionalità; applicazione: programma informatico che consente all'utente di svolgere specifici compiti; applicazione Internet: programma sviluppato adottando tecnologie Internet, in particolare utilizzando il protocollo HTTP (HyperText Transfer Protocol) per il trasferimento dei dati e il linguaggio a marcatori (X)HTML (eXtensible HyperText Markup Language) per la presentazione e la struttura dell'informazione; browser: programma informatico che consente di accedere alle risorse presenti su un sito Web; 6 g) h) http://www. i) pubbliaccesso.it/ normative/ DM080705.htm l) Art. 1 m) n) CD-ROM (Compact Disc - Read Only Memory) e DVD (Digital Versatile Disc): particolari tipi di supporto ottico di memorizzazione; em: unità di misura tipografica che prende a riferimento la larghezza del carattere M; esperto di fattori umani: soggetto in possesso di diploma di laurea, anche triennale, comprendente un anno di formazione in discipline ergonomiche, quali ergonomia dell'ambiente, ergonomia dell'hardware, ergonomia cognitiva, macroergonomia, che abbia svolto un tirocinio documentato di almeno un anno; esperto di interazione con persone disabili: soggetto in possesso di diploma di laurea, anche triennale, esperto di problematiche di comunicazione e di utilizzo delle tecnologie dell'informazione e della comunicazione, che abbia maturato un'esperienza professionale biennale nel settore; esperto tecnico: soggetto esperto in tecnologie Web e problematiche dell'accessibilità; focus: elemento attivo in un'interfaccia utente; 7 o) p) q) http://www. pubbliaccesso.it/ normative/ r) DM080705.htm s) Art. 1 t) u) fogli di stile: strumento per mezzo del quale è possibile separare i contenuti di una pagina Web dalle modalità tipografiche con le quali essi vengono presentati; frame: struttura di una pagina Web costituita da due o più parti indipendenti; fruibilità: 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; gestore di evento: parte di programma informatico che si attiva al verificarsi di un evento logico o dipendente dal dispositivo di input; gruppo di valutazione: gruppo di utenti, anche disabili, che svolgono compiti assegnati dall'esperto di fattori umani per l'effettuazione della verifica soggettiva; homepage: prima pagina che viene resa disponibile all'utente quando si accede a un indirizzo corrispondente a un sito Web; interattività: caratteristica del programma informatico che richiede l'intervento dell'utente per espletare le sue funzionalità; 8 v) interfaccia utente: programma informatico che gestisce l'output e l'input dell'utente da e verso un computer in modo interattivo, realizzato attraverso una rappresentazione basata su metafore grafiche (interfaccia grafica) oppure attraverso comandi impartiti in modo testuale (interfaccia testuale); http://www. z) interfaccia di programmazione (API, Application Program Interface): insieme di pubbliaccesso.it/ programmi che consentono ad applicazioni diverse di comunicare tra loro; normative/ aa) Internet: rete mondiale di computer basata sulla famiglia di protocolli di DM080705.htm comunicazione TCP/IP (Transmission Control Protocol/Internet Protocol); bb) Intranet: rete di computer basata sugli stessi protocolli di Internet, riservata all'uso esclusivo di una organizzazione, o gruppo di utenti; Art. 1 cc) legge: legge 9 gennaio 2004, n. 4, pubblicata nella Gazzetta Ufficiale n. 13 del 17 gennaio 2004, recante disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici; dd) linguaggio a marcatori: modalità di rappresentazione delle informazioni che utilizza indicatori (marcatori) per qualificare l'informazione stessa; 9 ee) moduli di interazione o form: strumenti mediante i quali l'utente interagisce con il sito Web fornendo e ricevendo specifiche informazioni; ff) pagina Web: elemento informativo di base di un sito Web, realizzato mediante un linguaggio a marcatori che può contenere oggetti testuali e multimediali ed http://www. immagini; pubbliaccesso.it/ gg) prodotti a scaffale: applicazioni preconfezionate da utilizzarsi anche senza normative/ sviluppare appositi programmi di adattamento; DM080705.htm hh) regolamento: decreto del Presidente della Repubblica 1° marzo 2005, n. 75, pubblicato nella Gazzetta Ufficiale n. 101 del 3 maggio 2005; ii) script: sequenza di istruzioni in linguaggio di programmazione che può essere Art. 1 inserita in una pagina Web per fornire funzionalità aggiuntive; ll) sito Web: insieme strutturato di pagine Web utilizzato per veicolare informazioni o erogare servizi, comunemente definito anche sito Internet; mm) task: compito specifico che l'esperto di fattori umani assegna ad un componente del gruppo di valutazione per simulare situazioni concrete di interazione con il sistema informatico; 10 nn) tecnologie assistive: strumenti e 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 http://www. informatici; pubbliaccesso.it/ oo) tecnologie Web: insieme degli standard definiti dall'ISO e delle normative/ «Recommendation» del Consorzio W3C finalizzato a veicolare informazioni o DM080705.htm erogare servizi su reti che utilizzano il protocollo HTTP, comunemente definite anche tecnologie Internet; pp) verifica tecnica: valutazione condotta da esperti, anche con strumenti Art. 1 informatici, sulla base di parametri tecnici; qq) verifica soggettiva: valutazione del livello di qualità dei servizi, già giudicati accessibili tramite la verifica tecnica, effettuata con l'intervento del destinatario, anche disabile, sulla base di considerazioni empiriche. 11 1. 2. http://www. pubbliaccesso.it/ normative/ 3. DM080705.htm Art. 2 4. Il presente decreto definisce negli allegati A, B, C e D, che ne costituiscono parte integrante, le linee guida recanti i requisiti tecnici e i diversi livelli per l’accessibilità, ai sensi degli articoli 11 e 12 della legge e nel rispetto dei criteri e dei principi indicati dal regolamento. Il primo livello di accessibilità dei siti Web è accertato previo esito positivo della verifica tecnica che riscontra la conformità delle pagine dei medesimi siti ai requisiti tecnici elencati nell’allegato A, applicando la metodologia ivi indicata. I requisiti tecnici si applicano anche nei casi in cui i soggetti di cui all’articolo 3, comma 1 della legge forniscono informazioni o erogano servizi mediante applicazioni Internet rese disponibili su reti Intranet o su supporti, come CDROM, DVD, utilizzabili anche in caso di personal computer non collegato alla rete. Il secondo livello di accessibilità riguarda la qualità delle informazioni fornite e dei servizi erogati dal sito Web e si articola in primo, secondo e terzo livello di qualità; tali livelli di qualità sono accertati con la verifica soggettiva attraverso i criteri di valutazione di cui all’allegato B, applicando la metodologia ivi indicata. 12 1. I requisiti di accessibilità per i personal computer sono indicati nell’allegato C. 2. I requisiti di accessibilità per l’ambiente operativo, http://www. pubbliaccesso.it/ le applicazioni ed i prodotti a scaffale sono indicati normative/ nell’allegato D. DM080705.htm 3. Il soggetto produttore o fornitore dichiara il Art. 3 livello di conformità del prodotto o servizio ai requisiti di cui al presente articolo. 13 1. http://www. pubbliaccesso.it/ 2. normative/ DM080705.htm Art. 4 Le persone giuridiche interessate alla iscrizione nell’elenco dei valutatori di cui all’articolo 3, comma 1 del regolamento presentano documentazione idonea a comprovare la disponibilità di risorse strumentali tali da consentire l’effettuazione delle verifiche tecnica e soggettiva. Le persone giuridiche di cui al comma 1 forniscono altresì elementi idonei a comprovare la disponibilità delle seguenti risorse professionali, anche se non legate alle medesime da rapporto di lavoro dipendente: a) b) c) d) esperto di fattori umani, esperto tecnico, esperto di interazione con i soggetti disabili, gruppo di valutazione. 14 1. http://www. pubbliaccesso.it/ normative/ DM080705.htm 2. Gli importi dovuti dai soggetti privati come corrispettivo per l’attività svolta dai valutatori, sono determinati sulla base dei costi sostenuti per lo svolgimento della verifica tecnica e della verifica soggettiva. Nella verifica tecnica l’esperto tecnico, applicando la metodologia di cui all’allegato A, paragrafo 2: a) b) Art. 5 c) svolge le attività previste alla lettera a) del medesimo paragrafo 2 su tutte le pagine del sito; svolge le attività previste alle lettere b), c) e d) del medesimo paragrafo 2 sulla home page, su tutte le pagine del sito direttamente raggiungibili dalla home page, su tutte le tipologie di pagine che presentano form e di pagine di risposta, nonché su un campione statistico di pagine, non rientranti in quelle esaminate precedentemente, pari al 5% delle stesse; redige il rapporto di cui alla lettera e) del medesimo paragrafo 2. 15 3. http://www. pubbliaccesso.it/ normative/ DM080705.htm Art. 5 4. La verifica soggettiva consta delle attività, previste dalla metodologia di cui all’allegato B, svolte dall’esperto in fattori umani, dall’esperto di interazione con le persone disabili e dal gruppo di valutazione; il costo complessivo della verifica tiene anche conto dei tempi di utilizzo delle tecnologie assistive impiegate. Ai sensi dell’articolo 3, comma 5, lettera b) del regolamento, gli importi massimi dovuti dai soggetti privati come corrispettivo per l’attività svolta dai valutatori sono riportati nell’Allegato F che costituisce parte integrante del presente decreto. 16 1. http://www. pubbliaccesso.it/ normative/ DM080705.htm Il modello del logo e la corrispondenza tra il logo stesso, eventualmente corredato da asterischi, ed il diverso livello di qualità del servizio sono indicati nell’Allegato E che costituisce parte integrante del presente decreto. Art. 6 17 1. http://www. pubbliaccesso.it/ 2. normative/ DM080705.htm Art. 7 3. La richiesta di autorizzazione ad esporre il logo viene presentata alla Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie per via telematica tramite il sito del Centro nazionale per l’informatica nella pubblica amministrazione (Cnipa), ai sensi dell’articolo 4, comma 3 del regolamento. Ai fini del comma 1, i soggetti di cui all’art. 3, comma 1 della legge ed i soggetti privati che intendono esporre il logo attestante il possesso del requisito di accessibilità sul proprio sito Web si registrano preventivamente nell’apposita sezione del sito Web del Cnipa. La richiesta di autorizzazione di cui al comma 1 è corredata dall’attestato di accessibilità, in formato elettronico, relativo ad ogni pagina del sito esaminata, nonché da copia statica, riferita al momento della valutazione, di tutte le pagine analizzate indicate all’articolo 5, comma 2; il modello di attestato di accessibilità è disponibile, per i soggetti registrati, nella citata sezione del sito Web del Cnipa. 18 4. Ai fini del rilascio o del rinnovo dell’autorizzazione ad esporre il logo, il Cnipa provvede a: a) http://www. pubbliaccesso.it/ normative/ DM080705.htm b) c) Art. 7 d) 5. predisporre una sezione del proprio sito Web per ricevere le richieste di registrazione; acquisire la richiesta di autorizzazione di cui al comma 1 e la documentazione di cui al comma 3; costituire e tenere aggiornata la banca dati dei soggetti autorizzati ad esporre il logo, dei codici elettronici di riconoscimento rilasciati agli stessi soggetti ai fini della registrazione e della documentazione inerente a ciascuna richiesta di autorizzazione; riferire gli esiti dell’istruttoria alla Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie. La Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie, sulla base dei risultati dell’istruttoria di cui al presente articolo, rilascia l’autorizzazione all’utilizzo del logo, dandone comunicazione al soggetto richiedente. 19 1. http://www. pubbliaccesso.it/ 2. normative/ DM080705.htm Art. 7 3. I soggetti privati che richiedono l’autorizzazione all’utilizzo del logo allegano alla richiesta la ricevuta del versamento effettuato, anche in via telematica, quale rimborso delle spese amministrative sostenute dalla Presidenza del Consiglio dei Ministri per le attività inerenti il rilascio dell’autorizzazione; l’importo del versamento è indicato nell’Allegato F. Ai sensi dell’articolo 7 del regolamento, in caso di riscontro di un livello di accessibilità inferiore a quello del logo utilizzato sono a carico del soggetto privato i costi effettivi dell’avvenuta ispezione, nonché una quota di partecipazione ai costi per l’espletamento delle funzioni ispettive complessivamente svolte dal Cnipa sui soggetti privati; l’importo della quota, comunque non superiore al doppio del costo effettivo dell’ispezione, è indicato nell’Allegato F. Con decreto del Ministro per l’innovazione e le tecnologie di natura non regolamentare, gli importi di cui ai commi 1 e 2 sono aggiornati annualmente. 20 http://www. pubbliaccesso.it/ normative/ DM080705.htm Allegato A: Verifica tecnica e requisiti di accessibilità delle applicazioni basate su tecnologie internet. Allegato B: Metodologia e criteri di valutazione per la verifica soggettiva dell’accessibilità delle applicazioni basate su tecnologie internet. Allegato C: Requisiti tecnici di accessibilità per i personal computer di tipo desktop e portatili. 21 http://www. pubbliaccesso.it/ normative/ DM080705.htm Allegato D: Requisiti tecnici di accessibilità per l’ambiente operativo, le applicazioni e i prodotti a scaffale. Allegato E: Logo di accessibilità dei siti Web e delle applicazioni realizzate con tecnologie Internet. Allegato F: Importi massimi dovuti dai soggetti privati come corrispettivo per l’attività svolta dai valutatori. 22 a) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm b) Paragrafo 1 d) c) La definizione dei requisiti tecnici di accessibilità nonché l’articolazione delle attività previste per la verifica tecnica sono stabilite sulla base di: quanto indicato nelle Recommendation del World Wide Web Consortium (W3C) ed in particolare in quelle del progetto Web Accessibility Initiative (WAI); standard definiti nel paragrafo 1194.22 della Sezione 508 del Rehabilitation Act degli USA; standard e specifiche tecniche definite in materia di accessibilità dalla International Organization for Standardization (ISO); esperienze acquisite nell’ambito della Pubblica Amministrazione ed in particolare, tra quelle già maturate, quelle relative all’attuazione della Circolare AIPA del 6 settembre 2001 recante “Criteri e strumenti per migliorare l'accessibilità dei siti Web e delle applicazioni informatiche a persone disabili” e della Direttiva del Presidente del Consiglio dei Ministri 30 maggio 2002 per la conoscenza e l'uso del dominio internet ".gov.it" e l'efficace interazione del portale nazionale "italia.gov.it" con le pubbliche amministrazioni e le loro diramazioni territoriali. 23 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Paragrafo 2 La verifica tecnica si articola nelle seguenti attività: a) riscontro, con sistemi di validazione automatica, della rispondenza alla sua definizione formale del linguaggio a marcatori utilizzato; b) verifica dell’esperto tecnico sul corretto utilizzo semantico degli elementi e degli attributi secondo le specifiche del linguaggio a marcatori impiegato, anche mediante l’uso di strumenti semiautomatici di valutazione allo scopo di evidenziare problemi non riscontrabili dalle verifiche automatiche; 24 c) esame della pagina con varie versioni di diversi browser grafici in vari sistemi operativi allo scopo di verificare che: 1) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 2) 3) 4) 5) Paragrafo 2 6) 7) 8) il contenuto informativo e le funzionalità presenti in una pagina siano gli stessi nei vari browser; la presentazione della pagina sia simile nei browser che supportano le tecnologie indicate al requisito n. 1 di cui al paragrafo 4 del presente allegato; il contenuto informativo e le funzionalità della pagina siano ancora fruibili in caso di disattivazione del caricamento delle immagini; i contenuti informativi di eventuali file audio siano fruibili anche in forma testuale; i contenuti della pagina siano fruibili in caso di utilizzo delle funzioni previste dai browser per definire la grandezza dei caratteri; la pagina sia navigabile con il solo uso della tastiera e l’impiego di una normale abilità; i contenuti e le funzionalità della pagina siano ancora fruibili, anche in modalità diverse, in caso di disattivazione di fogli di stile, script e applet ed altri oggetti di programmazione; i contenuti e le funzionalità continuino a essere disponibili con un browser testuale e i medesimi contenuti mantengano il proprio significato d’insieme e la corretta struttura semantica; 25 d) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verifica delle differenze di luminosità e di colore tra il testo e lo sfondo secondo i seguenti algoritmi: 1) 2) Paragrafo 2 e) differenza di luminosità: calcolo della luminosità dei colori di testo e di sfondo con la formula: ((Rosso X 299) + (Verde X 587) + (Blu X 114)) / 1000, in cui Rosso, Verde e Blu sono i valori decimali dei colori; il risultato deve essere non inferiore a 125. differenza di colore: calcolo della differenza di colore con la formula[Max (Rosso1, Rosso2) - Min (Rosso1, Rosso2)] + [Max (Verde1, Verde2) - Min (Verde1, Verde2)] + [Max (Blu1, Blu2) — Min (Blu1, Blu2)], in cui Rosso, Verde e Blu sono i valori decimali dei colori e Max e Min il valore massimo e minimo tra i due presi in considerazione; il risultato deve essere non inferiore a 500; redazione di un rapporto nel quale l’esperto tecnico indica la conformità, la non conformità o l’eventuale non applicabilità di ogni singolo requisito della pagina esaminata. 26 Sul mercato sono disponibili numerosi programmi in grado agevolare l’attività di verifica tecnica dell’accessibilità dei siti Web. Tali programmi, in particolare, devono essere in grado di garantire idonee prestazioni a supporto dell’attività dell’esperto tecnico. Degli stessi non viene fornito un puntuale elenco nel presente Allegato; si segnalano, comunque, ai sensi dell’articolo 11, comma 1, lettera b) della legge n. 4 del 2004, il programma automatico fornito dal W3C e i programmi indicati nella lista degli strumenti più diffusi presente nella pagina Evaluation, Repair, and Transformation Tools for Web Content Accessibility dello stesso sito del W3C http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Paragrafo 3 http://www.w3.org/WAI/ER/existingtools.html#Evaluation 27 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Paragrafo 4 Per ciascun requisito viene indicato il numero d’ordine, l’enunciato, il riferimento ai punti di controllo delle Web Content Accessibility Guidelines - versione 1.0 (WCAG 1.0) del W3C-WAI, nonché il riferimento agli standard definiti nella Sezione 508 del “Rehabilitation Act”. I punti di controllo del W3C-WAI e gli standard della Sezione 508 eventualmente richiamati nei singoli requisiti, sono da intendersi soltanto come elementi di riferimento, al fine di consentire un più facile riscontro con gli standard già impiegati e per facilitare l’utilizzo degli strumenti informatici di valutazione della accessibilità attualmente disponibili sul mercato. L’espressione “In sede di prima applicazione”, presente nell’enunciato di alcuni requisiti, consente di effettuare un percorso alternativo di adeguamento di siti pubblici particolarmente complessi. 28 Requisito numero 1 di 22 Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico. Riferimenti WCAG 1.0: 3.1, 3.2, 3.5, 3.6, 3.7, 11.1, 11.2 Riferimenti Sec. 508: Non presente http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 29 Requisito numero 1 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm In particolare, per i linguaggi a marcatori HTML (HypertText Markup Language) e XHTML (eXtensible HyperText Markup Language): a) Per tutti i siti di nuova realizzazione, utilizzare almeno la versione 4.01 dell'HTML o preferibilmente la versione 1.0 dell'XHTML , in ogni caso con DTD (Document Type Definition - Definizione del Tipo di Documento) di tipo Strict; 30 Requisito numero 1 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm b) Per i siti esistenti, in sede di prima applicazione, nel caso in cui non sia possibile ottemperare al punto a) è consentito utilizzare la versione dei linguaggi sopra indicati con DTD Transitional, ma con le seguenti avvertenze: 31 Per i siti esistenti 1. http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 2. 3. evitare di utilizzare, all'interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche presentazionali (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico; evitare la generazione di nuove finestre; ove ciò non fosse possibile, avvisare esplicitamente l'utente del cambiamento del focus; pianificare la transizione dell’intero sito alla versione con DTD Strict del linguaggio utilizzato, dandone comunicazione alla Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie e al Centro nazionale per l’informatica nella pubblica amministrazione. 32 WCAG 1.0: Punto di controllo 3.1 http://www. w3.org/tr/wcag10 Quando esiste un linguaggio di marcatura adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. 33 WCAG 1.0: Punto di controllo 3.1 http://www. w3.org/tr/wcag10 “Quando esiste un linguaggio di marcatura adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.” Le equazioni matematiche e/o scientifiche, i simboli e le note musicali vengono spesso rappresentate come delle immagini all’interno di una pagina web. In questo modo non sono accessibili. 34 WCAG 1.0: Punto di controllo 3.1 Vi sono gruppi di lavoro nel W3C che stanno definendo una serie di linguaggi di marcatura (es: MathML) e stanno http://www. nascendo diversi linguaggi di marcatura basati su XML per w3.org/tr/wcag10 la chimica (ChemML) e per le altre scienze. “Quando esiste un Utilizzando XML le formule sono di facile interpretazione linguaggio di sia per le tecnologie assistive che per le applicazioni marcatura adatto, matematiche (esempio: MathML Player) per veicolare informazione usare E' comunque necessaria la presenza di plug-in per la corretta visualizzazione. un marcatore piuttosto che le immagini.” 35 WCAG 1.0: Punto di controllo 3.1 http://www. w3.org/tr/wcag10 “Quando esiste un linguaggio di marcatura adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.” <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msubsup> <mo>∫</mo> <mn>0</mn> <mi>t</mi> </msubsup> <mfrac> <mrow> <mo>d</mo> <mi>x</mi> </mrow> <mi>x</mi> </mfrac> </mrow> </math> 36 WCAG 1.0: Punto di controllo 3.2 http://www. w3.org/tr/wcag10 Creare documenti che rispettino le grammatiche formali. 37 WCAG 1.0: Punto di controllo 3.2 http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” In ogni pagina web deve essere specificato il DOCTYPE della DTD (Document Type Definition) per garantire che tutti gli elementi e attributi utilizzati nella pagina siano parte della grammatica definita nella DTD. Questo consente al programma di visualizzazione della pagina ("user agent") di poter valutare la semantica da utilizzare. 38 WCAG 1.0: Punto di controllo 3.2 http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” Al fine di controllare la validità delle grammatiche, è possibile utilizzare il validatore del W3C. (http://validator.w3.org) Grammatiche fornite dal W3C: HTML 4.01 Transitional, Frameset, Strict XHTML 1.0 Transitional, Frameset, Strict XHTML 1.1 MathML SMIL ecc. 39 WCAG 1.0: Punto di controllo 3.2 http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” Transitional: mantiene la compatibilità con le precedente versioni, consentendo l'utilizzo di elementi ed attributi di presentazione all'interno del contenuto. Frameset: definisce le grammatiche per l'utilizzo di frame. Strict: è la versione "rigorosa", nella quale sono eliminate tutte le impostazioni di formattazione che possono essere gestite tramite i fogli di stile. 40 WCAG 1.0: Punto di controllo 3.2 http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> TopElement: html Il tipo di documento SGML. Availability: PUBLIC Dichiara se il tipo di documento referenziato è pubblico o meno (il valore alternativo è SYSTEM). Formal public identifier: "-//W3C//DTD XHTML 1.0 Strict//EN". Registration: - Indica se l'organizzazione che ha definito la DTD è registrata all'ISO o meno (il W3C non lo è). Il valore alternativo è +. Organization: W3C L'organizzazione che ha creato e mantiene la DTD. Type: DTD Specifica a cosa si riferisce la dichiarazione (una DTD, nel nostro caso). Label: XHTML 1.0 Il nome descrittivo della DTD referenziata, che può contenere la versione del documento. Definition: Strict Il tipo di DTD, se ne esiste più di un tipo per il linguaggio referenziato. Language: EN La lingua in cui è scritta la DTD. URI: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" L'indirizzo dove fisicamente risiede il documento referenziato. 41 Legge 04/2004 http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” l primo requisito richiede di utilizzare, per i nuovi siti, la DTD Strict per HTML 4.01 oppure XHTML 1.0: questo comporta la mancanza, ad esempio, dell’attributo target per i collegamenti esterni. È possibile quindi utilizzare del codice javascript conforme ai requisiti in modo da garantire l’apertura della nuova finestra informando allo stesso tempo l’utente di tale funzionalità (Requisito 19). 42 Esempio di DOM injection http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” function TargetBlank() { if(document.getElementsByTagName){ var msg = " (collegamento in nuova finestra)"; var links = document.getElementsByTagName("a"); for (i = 0; i < links.length; i++) { var link = links[i]; if (link.className.indexOf("targetblank") != -1) { link.title += msg; var fn = function () { window.open(this.href); return false; } link.onclick = link.onkeypress = fn; } } } } <a href="destinazione.html" class="targetblank" title="Descrizione">Prova</a> 43 Legge 04/2004 http://www. w3.org/tr/wcag10 “Creare documenti che rispettino le grammatiche formali.” L’apertura di nuove finestre andrebbe evitata in quanto non consente di evitarne l’apertura ad un utente dotato di tecnologia assistiva. Inoltre oggi la maggior parte dei browser contiene delle funzionalità per impedire l’apertura di nuove finestre. Se un utente desidera aprire una pagina in una nuova finestra, esistono delle funzionalità idonee all’interno del browser: evitiamo quindi di limitare la libertà dell’utente obbligandolo ad azioni non gradite o non consentite dal browser utilizzato. 44 WCAG 1.0: Punto di controllo 3.5 http://www. w3.org/tr/wcag10 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche. 45 WCAG 1.0: Punto di controllo 3.5 http://www. w3.org/tr/wcag10 “Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.” Gli elementi di titolazione (<h1> - <h6>) devono essere utilizzati in modo corretto al fine di garantire una corretta visualizzazione e rispetto della semantica dei contenuti. Alcuni programmi di navigazione utilizzano gli elementi di titolazione per ottimizzare la navigazione della pagina da parte degli utenti (ad esempio: lettori dello schermo). È verificabile con il Markup Validator del W3C, con opzione “outline” 46 WCAG 1.0: Punto di controllo 3.5 http://www. w3.org/tr/wcag10 “Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.” L’ordine di posizionamento dei titoli deve esser rispettato. Esempio: uno o più elementi <h2> devono seguire un elemento <h1>, mentre uno o più elementi <h3> devono seguire elementi <h2>. È quindi scorretto saltare un titolo. Esempio: è errato passare da <h1> a <h3> senza valorizzare l’elemento <h2>. 47 WCAG 1.0: Punto di controllo 3.5 http://www. w3.org/tr/wcag10 “Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.” Non bisogna mai utilizzare gli elementi di titolazione a scopo decorativo. È scorretto utilizzare elementi <hx> per incrementare la dimensione del testo. In questo modo si danneggia la semantica del documento, creando difficoltà di accesso tramite tecnologie assistive. I fogli di stile sono la migliore soluzione per definire le modifiche agli attributi dei testi. 48 WCAG 1.0: Punto di controllo 3.5 http://www. w3.org/tr/wcag10 “Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.” <h1>Titolo</h1> <p>...</p> <h2>Titolo argomento</h2> <h3>Capitolo informativo</h3> <p>... testo di esempio ..... </p> <h2>Titolo argomento</h2> <h3>Capitolo informativo</h3> <p>... testo di esempio ..... </p> <p>... testo di esempio ..... </p> <h3>Capitolo informativo</h3> <p>... testo di esempio ..... </p> <h1>Titolo</h1> <p>...</p> 49 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 Marcare le liste ed elencare le voci della lista in modo appropriato. 50 WCAG 1.0: Punto di controllo 3.6 Gli elementi di lista <dl>, <ul> e <ol> http://www. w3.org/tr/wcag10 devono essere utilizzati solo per la “Marcare le liste definizione delle liste. ed elencare le voci della lista in modo Non devono servire per la appropriato.” formattazione (esempio: rientro del testo) ma per elencare. Per modificare la formattazione delle liste, utilizzare i fogli di stile. 51 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 “Marcare le liste ed elencare le voci della lista in modo appropriato.” ul { color: #036; list-style: url(/immagini/pallino.gif) disc; } <ul> <li>Prima voce di lista</li> <li>Seconda voce di lista</li> <li>Terza voce di lista</li> </ul> 52 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 “Marcare le liste ed elencare le voci della lista in modo appropriato.” Gli utenti non vedenti possono perdersi nella navigazione di liste non definite in modo corretto oppure troppo “profonde”. Bisogna fornire a questi utenti delle indicazioni riepilogative per la navigazione dei vari livelli di lista raggiunti Per esempio, si dovrebbero aiutare gli utenti non vedenti provvedendo un "appunto" per ricordare all’utente l’argomento principale della lista che sta navigando. Questo finché i CSS2 non saranno supportati in modo uniforme da tutti i programmi utente oppure finché non ci sarà la possibilità di ottimizzare la navigazione delle liste tramite CSS. 53 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 “Marcare le liste ed elencare le voci della lista in modo appropriato.” .fine { width:0; position:absolute; height:0; overflow:hidden; top:-200em; } <ul> <li>Veneto: <ul> <li>Belluno</li> <li>Padova</li> <li>Rovigo</li> […] </ul> <span class="fine">(Fine Veneto)</span></li> <li>Liguria: <ul> <li>Genova</li> <li>Imperia</li> […] </ul> <span class="fine">(Fine Liguria)</span></li> </ul> 54 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 “Marcare le liste ed elencare le voci della lista in modo appropriato.” Se invece necessitiamo di dare una certa importanza all’ordine degli elementi, è necessario utilizzare le liste ordinate (ordered list, elemento <ol>): <ol> <li>Scaricare il modulo</li> <li>Compilare il modulo</li> <li>Inviare il modulo</li> </ol> 55 WCAG 1.0: Punto di controllo 3.6 Considerando che per le liste ordinate http://www. w3.org/tr/wcag10 l'utilizzo degli attributi compact, start “Marcare le liste ed e type è stato deprecato, è possibile elencare le voci della aggirare il problema usando CSS2, che lista in modo appropriato.” permette di definire il formato di auto numerazione delle liste (1, 1.1, 1.1.1, ecc.). 56 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 ul { counter-reset: item; } “Marcare le liste ed elencare le voci della lista in modo appropriato.” li { display: block; } li:before { content: counters(item, "."); counter-increment: item; } Questa specifica contenuta nella raccomandazione CSS 2.0 attualmente non risulta supportata dai browser, ad eccezione di Opera. 57 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 “Marcare le liste ed elencare le voci della lista in modo appropriato.” Liste di definizione (Definition List). Le liste di definizione sono formate da elementi contenenti il termine (definition term, ovvero l’elemento <dt>) e la sua descrizione (definition description, ovvero l’elemento <dd>) 58 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 <dl> <dt>SEO</dt> <dd><span xml:lang="en">Search Engine Optimizers</span>, ovvero gli esperti di posizionamento nei motori di ricerca.</dd> “Marcare le liste ed elencare le voci della lista in modo appropriato.” </dl> 59 WCAG 1.0: Punto di controllo 3.6 http://www. w3.org/tr/wcag10 “Marcare le liste ed elencare le voci della lista in modo appropriato.” <dl> <dt><abbr title="Consigliere">Cons.</abbr> Rossi</dt> <dd>Signor Presidente, chiedo di poter esporre il progetto.<dd> <dt>Presidente Consiglio Comunale</dt> <dd>Ne ha facoltà.<dd> </dl> Un’altra possibile applicazione delle liste di definizione, consentita dalla specifica HTML 4.x, è la possibilità di utilizzare tali elementi per riportare dei dialoghi, indicando con l’elemento <dt> il nome della persona e con l’elemento <dd> il testo del discorso. un esempio pratico può essere un verbale di una seduta del Consiglio Comunale. Utilizzando i fogli di stile sarà quindi possibile rappresentare i contenuti in modo gradevole, affiancando ad esempio l’elemento <dt> all’elemento <dd>. 60 Legge 04/2004 Evitare la creazione di lunghi elenchi con le liste, in quanto http://www. rendono il sito di difficile utilizzo danneggiandone inoltre w3.org/tr/wcag10 l'usabilità seguendo l’indicazione per cui un utente non riesce a memorizzare contemporaneamente più di 7±2 “Marcare le liste collegamenti oppure fornire soluzioni per saltare i ed elencare le voci collegamenti (requisito 19). della lista in modo appropriato.” Evitare la creazione di menu utilizzando elementi differenti dalle liste (ad esempio, utilizzando elementi specifici di tabelle) è un errore che porta alla violazione del primo requisito in quanto i menu sono di natura delle liste di elementi. 61 WCAG 1.0: Punto di controllo 3.7 http://www. w3.org/tr/wcag10 Marcare le citazioni. 62 WCAG 1.0: Punto di controllo 3.7 http://www. w3.org/tr/wcag10 “Marcare le citazioni.” Le citazioni devono essere marcate utilizzando gli elementi <q> e <blockquote> che non devono essere usati invece per puri effetti estetici (esempio: rientri del testo), per i quali vanno utilizzati i fogli di stile. 63 http://www. w3.org/tr/wcag10 “Marcare le citazioni.” WCAG 1.0: Punto di controllo 3.7 L’utilizzo dell’elemento <q> invece dei caratteri ASCII o dell’entità " consente al browser di visualizzare le virgolette nella codifica locale. L’utilizzo delle virgolette ed i vari stili di virgolette variano da lingua a lingua. 64 http://www. w3.org/tr/wcag10 “Marcare le citazioni.” WCAG 1.0: Punto di controllo 3.7 L’elemento <q> non risulta ancora supportato dalla maggior parte dei browser e richiede la presenza dell’attributo "lang" (oppure xml:lang nel caso di XHTML) al fine di una corretta lettura ed adeguamento allo stile locale delle virgolette. <q lang="en">What a wonderful web!</q> 65 WCAG 1.0: Punto di controllo 3.7 http://www. w3.org/tr/wcag10 “Marcare le citazioni.” L’elemento <blockquote> serve ad identificare un blocco di testo che necessita di maggior visibilità, per separarlo e distinguerlo dal corpo del testo. Molti sviluppatori però hanno iniziato ad utilizzare l’elemento <blockquote> per impaginare i contenuti anziché usare i fogli di stile. 66 WCAG 1.0: Punto di controllo 3.7 <blockquote cite="http://www.w3.org/TR/WCAG10-HTMLTECHS/#text-quotes"> <p> Do not use quotation markup for formatting effects such as indentation. [Priority 2] </p> </blockquote> http://www. w3.org/tr/wcag10 “Marcare le citazioni.” Nell’esempio è stato utilizzato l’attributo "cite" che riporta l’URI ad un documento dal quale si è riportata la citazione. Se il documento principale non è in lingua inglese, va utilizzato l’attributo “lang” (oppure “xml:lang” per XHTML). 67 WCAG 1.0: Punto di controllo 3.7 <blockquote cite="urn:isbn:88-7633-000-3"> <p> Al termine della lettura di questo libro si auspica che al lettore sia maggiormente comprensibile la necessità di puntare sull'accessibilità reale, rispettando le raccomandazioni internazionali senza abusare di loghi o bollini. </p> </blockquote> http://www. w3.org/tr/wcag10 “Marcare le citazioni.” L’attributo cite può essere utilizzato per identificare anche un URN (Uniform Resource Name) per marcare citazioni che non sono direttamente riferite al web quale ad esempio un codice ISBN per un libro. 68 WCAG 1.0: Punto di controllo 11.1 http://www. w3.org/tr/wcag10 Utilizzare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito usando le versioni più recenti quando sono supportate dai programmi utente. 69 WCAG 1.0: Punto di controllo 11.1 http://www. w3.org/tr/wcag10 “Utilizzare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito usando le versioni più recenti quando sono supportate dai programmi utente.” Bisogna cercare di sviluppare ed adeguare le pagine web esistenti secondo le specifiche del W3C, preferibilmente secondo le ultime versioni considerate "stabili" (Recommandation). L'elenco completo e costantemente aggiornato è disponibile nella pagina "W3C Technical Reports and Publications" (http://www.w3.org/TR/). 70 WCAG 1.0: Punto di controllo 11.2 http://www. w3.org/tr/wcag10 Evitare l’utilizzo di tecnologie disapprovate dal W3C. 71 WCAG 1.0: Punto di controllo 11.2 http://www. w3.org/tr/wcag10 “Evitare l’utilizzo di tecnologie disapprovate dal W3C.” Con la definizione di nuove raccomandazioni e con l'avvento di nuove tecnologie alcuni elementi e attributi possono essere "eliminati" a favore di nuove raccomandazioni che ne migliorano l'utilizzo. Un esempio concreto è dato dagli elementi <font> e <center> che sono stati disapprovati ("deprecated") dal W3C a favore dei fogli di stile che consentono di separare il contenuto dalla presentazione. 72 WCAG 1.0: Punto di controllo 11.2 http://www. w3.org/tr/wcag10 “Evitare l’utilizzo di tecnologie disapprovate dal W3C.” Gli elementi e gli attributi disapprovati vengono solitamente mantenuti solo nelle grammatiche dei DOCTYPE di tipo "Transitional" (ossia grammatiche di "transizione") mentre vengono rimossi nelle grammatiche dei DOCTYPE di tipo "Strict ". Seguendo le indicazioni del W3C, già dal 1998 era possibile ottenere la separazione tra contenuto e presentazione, tramite DTD HTML 4.01 Strict. 73 Compiti del valutatore verificare che la DTD dichiarata sia conforme al requisito 1, ovvero per tutti i nuovi siti internet sia utilizzata la DTD HTML 4.01 Strict, XHTML 1.0 Strict o successive; verificare il corretto utilizzo degli elementi di intestazione, delle citazioni e delle liste; verificare la presenza di immagini che sostituiscono oggetti rappresentabili tramite linguaggi di marcatura; verificare l’utilizzo e il corretto utilizzo di elementi ed attributi secondo le specifiche del linguaggio di marcatura utilizzato. http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 74 Valutazione (rif. WCAG) Utilizzare il W3C Markup Validator per controllare il rispetto delle grammatiche formali (3.2), e dei linguaggi di marcatura utilizzati (3.1) utilizzando l’opzione “outline” per visualizzare il corretto utilizzo degli elementi <hx> (3.5). Controllare che la DTD dichiarata sia HTML 4.01 Strict oppure XHTML 1.0 Strict oppure XHTML 1.1 (11.1). Con l’uso di tali DTD di fatto vengono segnalati dal W3C Markup Validator errori causati dall’uso di attributi deprecati (11.2). http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 75 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Controllare la presenza di immagini che sostituiscono oggetti rappresentabili tramite linguaggi di marcatura (3.1) Utilizzare la barra per l’accessibilità, menu “Struttura”: Intestazioni: Visualizza tutti gli elementi d'intestazione sulla pagina corrente (3.5). Struttura delle intestazioni (Nuova finestra): Visualizza il titolo del documento e le sue intestazioni (da <h1> ad <h6> compreso il contenuto) in una nuova finestra. (3.5). Elementi List: Visualizza le liste ordinate, non ordinate, di intestazioni presenti sulla pagina corrente (3.6). Visualizza altri elementi: Attiva una micro applicazione in Javascript che identifica le istanze sulla pagina corrente dell'elemento inserito (3.7). 76 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Sorgente”: Visualizza codice generato. Consente di visionare il codice generato per verificare l’eventuale modifica di elementi ed attributi tramite DOM (3.2). Visualizza parte del codice. Consente di visionare il codice generato per il contenuto selezionato al fine di consentire l’identificazione di utilizzo scorretto di elementi ed attributi, modificati tramite DOM (3.2). Evidenzia nel sorgente. Contiene una serie di sottovoci che consentono di evidenziare elementi ed attributi specifici all’interno del sorgente generato. DOM Inspector. Consente di verificare con dei programmi esterni le eventuali modifiche al codice tramite DOM injection (3.2). 77 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Codice” (11.2): Elementi HTML deprecati: Visualizza gli elementi deprecati nell'HTML 4.0. 78 Requisito numero 2 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Non è consentito l'uso dei frame nella realizzazione di nuovi siti. Riferimenti WCAG 1.0: 12.1, 12.2 Riferimenti Sec. 508: 1194.22 (i) 79 Requisito numero 2 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm In sede di prima applicazione, per i siti esistenti già realizzati con frame è consentito l'uso di HTML 4.01 o XHTML 1.0 con DTD frameset, ma con le seguenti avvertenze: 80 Requisito numero 2 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm a) evitare di utilizzare, all'interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche presentazionali (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo, ecc.), ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico; b) fare in modo che ogni frame abbia un titolo significativo per facilitarne l'identificazione e la navigazione. Se necessario, descrivere anche lo scopo dei frame e la loro relazione; c) pianificare la transizione a XHTML almeno nella versione 1.0 con DTD Strict dell’intero sito dandone comunicazione alla Presidenza del Consiglio dei Ministri – Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie e alCentro nazionale per l’informatica nella pubblica amministrazione. 81 WCAG 1.0: Punto di controllo 12.1 http://www. w3.org/tr/wcag10 Assegnare un titolo a ogni frame per facilitarne l'identificazione e la navigazione. 82 WCAG 1.0: Punto di controllo 12.1 Alcuni programmi utente non possono http://www. w3.org/tr/wcag10 accedere a più frame “Assegnare un contemporaneamente o possono titolo a ogni frame essere configurati esclusivamente per per facilitarne l'identificazione e visualizzare un solo frame la navigazione.” Esempio: le applicazioni software di supporto per gli utenti non vedenti, alcuni modelli di palmare, chioschi informativi, ecc. 83 WCAG 1.0: Punto di controllo 12.1 http://www. w3.org/tr/wcag10 “Assegnare un titolo a ogni frame per facilitarne l'identificazione e la navigazione.” Utilizzando l'attributo “title” per i frame è possibile fornire informazioni al visitatore sul contenuto di quella particolare pagina web, consentendo all'utente di selezionare il frame desiderato. 84 WCAG 1.0: Punto di controllo 12.1 http://www. w3.org/tr/wcag10 “Assegnare un titolo a ogni frame per facilitarne l'identificazione e la navigazione.” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <title>Esempio di frameset</html> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <frameset cols="20%, 80%" title="Esempio di frameset" > <frame src="menu.html" title="Menu di navigazione" /> <frame src="main.html" title="Pagina iniziale" /> </frameset> </html> 85 WCAG 1.0: Punto di controllo 12.2 http://www. w3.org/tr/wcag10 Descrivere lo scopo dei frame e il modo in cui questi interagiscono se non è evidente solo tramite i titoli dei frame. 86 WCAG 1.0: Punto di controllo 12.2 http://www. w3.org/tr/wcag10 “Descrivere lo scopo dei frame e il modo in cui questi interagiscono se non è evidente solo tramite i titoli dei frame.” In alcuni casi l'attributo “title” può non essere sufficiente per spiegare la struttura o lo scopo dell'elemento <frame> o dell'elemento <frameset> In questi casi è consigliabile utilizzare l'attributo “longdesc” per l'elemento frame In questo modo si rende disponibile un collegamento ad un documento (pagina senza frame) che contiene una descrizione completa per una pagina con una struttura complessa di frame. 87 WCAG 1.0: Punto di controllo 12.2 http://www. w3.org/tr/wcag10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> “Descrivere lo scopo dei frame e il modo in cui questi interagiscono se non è evidente solo tramite i titoli dei frame.” <head> <title>Esempio di frameset</html> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <frameset cols="20%, 80%" title="Esempio di frameset" longdesc="descr-frameset.html" > <frame src="menu.html" title="Menu di navigazione" /> <frame src="main.html" title="Pagina iniziale" longdesc="descr-main.html" /> </frameset> </html> 88 Compiti del valutatore verificare che la DTD dichiarata sia conforme al requisito, ovvero per i siti esistenti utilizzo di DTD Frameset e DTD Transitional per i singoli frame; verificare l’utilizzo di elementi ed attributi del linguaggio di marcatura utilizzati a scopo presentazionale; verificare la presenza di titoli ed eventuali descrizioni per i frame. http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 89 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Struttura”: Bordi dei frame: Evidenzia i bordi di ciascun elemento frame sulla pagina corrente. Name / Title dei frame: Mostra (in una nuova finestra) una lista delle pagine contenute nei frame insieme ai rispettivi attributi “name” ed al contenuto dell'attributo “title”. Controllare i testi degli attributi “title” e valutare se siano comprensibili e significativi per garantire informazioni. Immaginare di trovarsi al telefono e di dover operare delle scelte (premi 1 per xxx, premi 2 per yyy). 90 Requisito numero 3 di 22 Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti; l’alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall’oggetto originale nello specifico contesto. Riferimenti WCAG 1.0: 1.1, 6.2 Riferimenti Sec. 508: 1194.22 (a) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 91 WCAG 1.0: Punto di controllo 1.1 http://www. w3.org/tr/wcag10 Fornire un equivalente testuale per ogni elemento non di testo. 92 WCAG 1.0: Punto di controllo 1.1 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” È indispensabile provvedere degli equivalenti testuali per immagini, o aree di immagini sensibili (mappe), rappresentazioni grafiche di testo (compresi i simboli), animazioni (ad es. GIF animate), applet e oggetti, ASCII-art, frame, script, suoni (azionati con o senza l'intervento dell'utente), file di solo audio, tracce audio di video (multimedia) e video. 93 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (IMMAGINI) Si usa l’attributo "alt" Il testo "alt" è destinato a fornire un testo alternativo, da usare principalmente quando l'immagine non viene visualizzata. 94 WCAG 1.0: Punto di controllo 1.1 (IMMAGINI) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” <img src="grafico.jpg" alt=“Grafico vendite per area" /> L’attributo “alt” è obbligatorio per le immagini se si utilizza il DTD HTML 4.01 e successive. Il W3C Markup Validator non può valutarne la corretta attribuzione. Se l’immagine è di tipo decorativo, è possibile valorizzare l’attributo alt vuoto, ovvero alt=“” 95 WCAG 1.0: Punto di controllo 1.1 (IMMAGINI) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” Talvolta è necessario fornire una descrizione più estesa dell’immagine. È necessario utilizzare l’attributo "longdesc": fornisce la possibilità di accedere ad una descrizione estesa dell’immagine specificando l’URI del documento che contiene tale descrizione. 96 WCAG 1.0: Punto di controllo 1.1 (IMMAGINI) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” <img src="grafico.jpg" alt="Grafico vendite per area" longdesc="grafico-vendite-area.html" /> L’attributo “longdesc” non è obbligatorio. Non tutte le tecnologie assistive supportano l’attributo “longdesc” definito dal W3C e pertanto spesso si affianca il cosiddetto "D-Link" un collegamento al file contenente la descrizione estesa accanto all’immagine, evidenziandolo con i caratteri "[D]" 97 WCAG 1.0: Punto di controllo 1.1 (IMMAGINI) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” <img src="grafico.jpg" alt="Grafico vendite per area" longdesc="grafico-vendite-area.html" /> <a href="grafico-vendite-area.html" title="Descrizione estesa">[D]</a> L’uso di [D] Link è stato deprecato nelle attuali tecniche di applicazione per le WCAG 2.0. 98 http://www. w3.org/tr/wcag 10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (IMMAGINI DECORATIVE) È necessario inserire l’attributo "alt" ma non valorizzarlo. L’utente con lettore vocale risentirebbe della lettura di descrizioni che non rientrano nel contesto. 99 WCAG 1.0: Punto di controllo 1.1 (IMMAGINI DECORATIVE) http://www. w3.org/tr/wcag10 <img src="pallino.jpg" alt="Pallino decorativo" />... <img src="pallino.jpg" alt="Pallino decorativo" />... <img src="pallino.jpg" alt="Pallino decorativo" />... “Fornire un equivalente testuale per ogni elemento non di testo.” Il lettore di schermo leggerebbe tre volte di seguito “Pallino decorativo”… 100 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (IMMAGINI DECORATIVE) Esempi di “alt” vuoto: Immagini "spaziatrici" (usate per la creazione di layout specifici) Immagini che hanno già un alternativa testuale all’interno della pagina (fotografie con titolo e descrizione presenti sotto in formato testo o di collegamento) Immagini decorative (cornici, ...) 101 WCAG 1.0: Punto di controllo 1.1 (MAPPE IMMAGINE) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” Le mappe immagine hanno spesso una funzione non sostituibile (le cartine geografiche, per esempio) Strumenti alternativi di navigazione, quali un indice A-Z o una casella di ricerca, possono risultare utili per qualsiasi tipo di utente. Ma come strumento di navigazione, una riga di elementi <img> con testi "alt" può svolgere egregiamente lo stesso compito. 102 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (MAPPE IMMAGINE) Le più supportate oggi sono le mappe lato client (tutte le informazioni nel codice HTML). Esse sono le più adatte all'uso da parte dei lettori di schermo, a patto di fornirle di testi "alt" all'interno dei loro elementi <area>. 103 WCAG 1.0: Punto di controllo 1.1 (MAPPE IMMAGINE) http://www. w3.org/tr/wcag10 <img alt="Italia suddivisa per regioni" src="italia.gif" usemap="#csmap" /> <map id="csmap" name="csmap"> <area shape="rect" alt="Sardegna" coords="114,238,160,31" href="1.htm" /> <area shape="poly" alt="Sicilia" coords="304,330,292,354" href="2.htm" /> <area shape="poly" alt="Calabria" coords="304,283,319,12" href="3.htm" /> </map> “Fornire un equivalente testuale per ogni elemento non di testo.” Secondo le raccomandazioni di HTML 4.0 e successive l’attributo "alt" è obbligatorio, in quanto deve provvedere una valida alternativa testuale per gli utenti con tecnologie assistive. 104 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (APPLET ED OGGETTI) Quando si utilizzano oggetti, è necessario fornire un equivalente testuale per: Tutti gli utenti che non posseggono i plug-in necessari alla loro visualizzazione. Gli utenti che a causa di disabilità non possono interagire con tali contenuti. 105 WCAG 1.0: Punto di controllo 1.1 (APPLET ED OGGETTI) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” Il W3C incentiva l’utilizzo dell’elemento <object> mentre considera deprecato l’uso di <applet>. <embed> (utilizzato spesso per compatibilità con vecchie versioni di Netscape) non è mai stato inserito in nessuna delle raccomandazioni del W3C. 106 http://www. w3.org/tr/wcag10 WCAG 1.0: Punto di controllo 1.1 (APPLET ED OGGETTI) <applet code="meteo.class" width="500" height="500" alt="Le previsioni del tempo"> <p>Le previsioni del tempo per oggi per Venezia: Nuvoloso …</p> </applet> “Fornire un equivalente testuale per ogni elemento non di testo.” Esempio di codice deprecato. 107 WCAG 1.0: Punto di controllo 1.1 (APPLET ED OGGETTI) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-44553540000" codebase="http://download.macromedia.com /pub/shockwave/cabs/flash/ swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align=""> <param name="movie" value="movie.swf"> <embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash" plug inspage="http://www.macromedia.com/ go/getflashplayer"> </object> Esempio di codice non valido. 108 WCAG 1.0: Punto di controllo 1.1 (APPLET ED OGGETTI) http://www. w3.org/tr/wcag10 <object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300"> <param name="movie" value="movie.swf" /> <img src="noflash.gif" alt= "Oggetto Macromedia Flash non disponibile" /> <ul title="opzioni alternative"> <li><a href="pagina1.htm">Pagina 1</a> <li><a href="pagina2.htm">Pagina 2</a> </ul> </object> “Fornire un equivalente testuale per ogni elemento non di testo.” Esempio di codice accessibile Per l’uso cross-browser sono necessari i commenti IE (vediamo in seguito). 109 WCAG 1.0: Punto di controllo 1.1 (FRAME) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” I frame sono supportati dalle raccomandazioni W3C, anche se il loro uso è generalmente sconsigliato. Se proprio li si deve usare, sarà necessario utilizzare l’attributo "title" e "longdesc" per ottenere una descrizione esaustiva dei contenuti dei frame. Seguire le indicazioni previste per il requisito 2. 110 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (PULSANTI) Spesso si utilizzano delle immagini in sostituzione dell’elemento <input type="image" />. Anche tali elementi, essendo di fatto delle immagini, necessitano dell’attributo "alt". 111 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (PULSANTI) <form action="submit" method="post"> <input type="image" src="cerca.gif" name="ricerca" id="ricerca" alt="Cerca" /> </form> 112 WCAG 1.0: Punto di controllo 1.1 (SCRIPT) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” Comunemente, ci si riferisce a JavaScript. Il computer che legge codice JavaScript deve possedere ed avere attivato un interprete in grado di comprenderne le istruzioni e di eseguirle. Non tutti gli utenti possono fruire di questa possibilità di interazione. Si devono predisporre gli script all’utilizzo anche di tali utenti, grazie all’elemento <noscript> che consente di rendere disponibile una versione alternativa. 113 WCAG 1.0: Punto di controllo 1.1 (SCRIPT) http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” <script type="text/javascript" src="sceltasiti.js"> </script> <noscript> <ul> <li><a href="/">Pagina Iniziale</a></li> <li><a href="http://www.google.com/">Google</a></li> <li><a href="http://www.w3.org/">W3C</a></li> </ul> </noscript> <noscript> è utilizzato dai programmi utente che NON supportano gli script: un utente con tecnologia assistiva potrebbe non fruire di questo contenuto equivalente. 114 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (ARTE ASCII) "The use of text characters to build images and pictures. For example, ":-)" (smiley face emoticon) and using [ ] around links can be considered to be ASCII art. Avoid using text characters as substitute graphics, icons or glyphs." RNIB (Royal National Institute of Blind) 115 http://www. w3.org/tr/wcag10 “Fornire un equivalente testuale per ogni elemento non di testo.” WCAG 1.0: Punto di controllo 1.1 (ARTE ASCII) <p><a href="#post-art">Salta l'arte ASCII</a></p> <pre> .-._.-. ( O O ) / . . \ .`._______.'. /( )\ _/ \ \ / / \_ .~ ` \ \ / / ' ~. { -. \ V / .} _ _`. \ | | | / .'_ _ >_ _} | | | {_ _< /. - ~ ,_-' .^. `-_, ~ - .\ '-'|/ \|`-` </pre> <p><a name="post-art">Immagine di una rana (Arte ASCII)</a></p> 116 WCAG 1.0: Punto di controllo 6.2 http://www. w3.org/tr/wcag10 Garantire che all'aggiornamento dei contenuti dinamici vengano aggiornati anche i contenuti equivalenti. 117 WCAG 1.0: Punto di controllo 6.2 http://www. w3.org/tr/wcag10 “Garantire che all'aggiornamento dei contenuti dinamici vengano aggiornati anche i contenuti equivalenti.” Esempio: in un sito di un ente le ultime notizie spesso scorrono all'interno di applet java e, al click del mouse, viene aperta una nuova finestra con il contenuto della notizia. I visitatori con problemi di mobilità oppure utenti con le funzionalità java disattivate non potranno mai accedere o accederanno con difficoltà ai contenuti delle notizie. 118 WCAG 1.0: Punto di controllo 6.2 È quindi necessario fornire una versione alternativa in http://www. HTML che consenta a queste categorie di utenti di w3.org/tr/wcag10 accedere ai contenuti. “Garantire che Questa versione dovrebbe restare nascosta per utenti all'aggiornamento che invece dispongono delle tecnologie per la dei contenuti corretta visualizzazione dei contenuti. dinamici vengano aggiornati anche i Utilizzando l'elemento <object> nel caso non sia disponibile il supporto a tale oggetto sarà reso contenuti equivalenti.” disponibile il contenuto alternativo, il tutto configurabile a cascata. 119 WCAG 1.0: Punto di controllo 6.2 <object classid="java:News.class" width="468" height="60"> <object data="news.mpeg" type="video/mpeg"> <ul> <li><a href="news1.html">Notizia 1</a></li> <li><a href="news2.html">Notizia 2</a></li> <li><a href="news3.html">Notizia 3</a></li> </ul> </object> </object> http://www. w3.org/tr/wcag10 “Garantire che all'aggiornamento dei contenuti dinamici vengano aggiornati anche i contenuti equivalenti.” Se la classe java non è visualizzabile, il browser tenterà di caricare il filmato multimediale. Se il filmato multimediale non è disponibile o non supportato, verrà visualizzato il codice HTML (formattabile tramite CSS). 120 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di testi alternativi per le immagini (comprese le mappe immagine ed i pulsanti); verificare la presenza di contenuti equivalenti per script ed oggetti; verificare che i contenuti equivalenti di contenuti dinamici siano aggiornati con la stessa frequenza dei contenuti principali. 121 Valutazione (rif. WCAG) Utilizzare il W3C Markup Validator per controllare la mancanza dei testi “alt” (1.1) Utilizzare la barra per l’accessibilità, menu “Immagini” (1.1): http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Elenco delle immagini utilizzate: Visualizza (in una nuova finestra) una lista delle immagini insieme al corrispondente elemento <img>. Alterna immagini/testi alternativi: Rimpiazza tutti gli elementi <img> sulla pagina corrente con il contenuto dei corrispondenti attributi alt. Se un'immagine è priva di attributo alt, essa verrà rimpiazzata con il testo NoAlt!. Visualizza le immagini: Visualizza un elemento <img> affianco a ciascuna immagine (insieme all'attributo alt o NoAlt! se l'immagine ne è priva) e crea un margine rosso intorno a ciascuna immagine. Visualizza le mappe immagine: Visualizza gli elementi <map> e il contenuto delle aree sensibili. 122 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Struttura” (1.1 e 6.2): Name / Title dei frame: Mostra (in una nuova finestra) una lista delle pagine contenute nei frames insieme ai rispettivi attributi “name” ed al contenuto dell'attributo “title”. Javascript: Elenca su nuova finestra i javascript presenti nella pagina. 123 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Informazioni Documento” (1.1): Elenco dei frame: Visualizza (in una nuova finestra) un elenco degli URL delle pagine inserite nei frame, con il nome dei rispettivi elementi <frame>, contenuti nella pagina corrente. Identifica Applet / Script: visualizza l’elenco delle applet e degli script presenti all’interno della pagina. 124 Requisito numero 4 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina. Riferimenti WCAG 1.0: 2.1 Riferimenti Sec. 508: 1194.22 (c) 125 WCAG 1.0: Punto di controllo 2.1 http://www. w3.org/tr/wcag10 Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori. 126 WCAG 1.0: Punto di controllo 2.1 http://www. w3.org/tr/wcag10 “Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori” Il colore non deve essere usato per identificare in modo univoco informazioni o funzionalità. Ad esempio, se si utilizzano i fogli di stile (CSS) per cambiare il colore ai collegamenti ipertestuali o rimuovendone la sottolineatura predefinita, gli utenti con le suddette problematiche potrebbero riscontrare difficoltà nella navigazione del sito. 127 http://www. w3.org/tr/wcag10 “Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori” WCAG 1.0: Punto di controllo 2.1 Sarà indispensabile rendere chiaramente identificabili le parti di testo che richiedono attenzione da parte dell’utente. È necessario controllare che tutte le informazioni disponibili nel sito sono indipendenti dalla scelta dell’uso dei colori. 128 WCAG 1.0: Punto di controllo 2.1 http://www. w3.org/tr/wcag10 “Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori” In un sito di un ente se si evidenzia con una tonalità di rosso un bando in scadenza, gli utenti con disabilità visive e utenti con tecnologie assistive potrebbero non ottenere tale importante informazione. In questo caso, è consigliato usare elementi di marcatura, come ad esempio <strong>. 129 WCAG 1.0: Punto di controllo 2.1 http://www. w3.org/tr/wcag10 “Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori” <ul> <li><a href="m1.asp">Menu 1</a></li> <li><a href="m2.asp" class="attivo" title="(attivo)">Menu 2</a></li> <li><a href="m3.asp">Menu 3</a></li> </ul> Per ogni informazione legata al colore (es. area attiva / menu selezionato) è necessario dare anche informazioni testuali equivalenti, usando ad esempio l’attributo title. 130 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di informazioni legate a specifici colori. 131 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “CSS” (2.1): Attiva/Disattiva i CSS: Attiva/disattiva i fogli di stile esterni. Disattiva i CSS inline: Rimuove l'attributo style (se presente) da tutti gli elementi della pagina. Utilizzare la barra per l’accessibilità, menu “Colori” (2.1): Scala di grigi: Visualizza il contenuto della pagina corrente in bianco e nero (livelli di grigio). 132 Requisito numero 5 di 22 Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano causare il malfunzionamento delle tecnologie assistive utilizzate; qualora esigenze informative richiedano comunque il loro utilizzo, avvertire l’utente del possibile rischio prima di presentarli e predisporre metodi che consentano di evitare tali elementi. Riferimenti WCAG 1.0: 7.1, 7.2, 7.3 Riferimenti Sec. 508: 1194.22 (j) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 133 WCAG 1.0: Punto di controllo 7.1 http://www. w3.org/tr/wcag10 Fino a quando i programmi utente non permetteranno agli utenti di controllare lo sfarfallio, evitare di far sfarfallare lo schermo. 134 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non permetteranno agli utenti di controllare lo sfarfallio, evitare di far sfarfallare lo schermo.” WCAG 1.0: Punto di controllo 7.1 Uno schermo guizzante o lampeggiante può causare delle crisi epilettiche agli utilizzatori che soffrono di epilessia fotosensitiva. Un attacco epilettico può essere provocato da: guizzi o lampeggiamenti nella fascia di valori che va da 4 a 59 Hertz con un picco di sensibilità a 20 Hz; passaggi veloci dall'oscurità alla luce. 135 WCAG 1.0: Punto di controllo 7.2 http://www. w3.org/tr/wcag10 Fino a quando i programmi utente non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto. 136 WCAG 1.0: Punto di controllo 7.2 Alcune tecnologie assistive, come ad http://www. w3.org/tr/wcag10 esempio i lettori di schermo, hanno “Fino a quando i difficoltà di interazione con i testi programmi utente lampeggianti. non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto.” In alcuni casi alcuni si bloccano sul campo di testo, altri lo leggono a ripetizione e in alcuni casi addirittura il sistema va diventa instabile. http://ncam.wgbh.org/richmedia/examples/127.html 137 WCAG 1.0: Punto di controllo 7.2 L'utilizzo dell’elemento <blink> non consente una validazione del codice secondo le raccomandazioni W3C HTML 4.0x / XHTML 1.x. “Fino a quando i programmi utente A livello di raccomandazioni W3C, è disponibile un non permetteranno attributo CSS: agli utenti di "text-tecoration: blink" (deprecato nelle controllare il lampeggiamento, techniques). evitare di far http://www. w3.org/tr/wcag10 lampeggiare il contenuto.” 138 WCAG 1.0: Punto di controllo 7.3 http://www. w3.org/tr/wcag10 Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. 139 WCAG 1.0: Punto di controllo 7.3 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.” Come per i testi lampeggianti, anche i testi scorrevoli possono creare dei problemi alle tecnologie assistive, in particolare ai lettori dello schermo. In presenza di una scritta scorrevole, un utente con disabilità visiva o cognitiva può riscontrare dei problemi di lettura di testi scorrevoli e quindi problemi di fruibilità dei contenuti. 140 WCAG 1.0: Punto di controllo 7.3 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.” Per la stessa motivazione è necessario utilizzare con parsimonia le GIF animate ed animazioni in generale (filmati flash, ecc.) Un uso gratuito di animazioni oltre a distrarre i visitatori del sito in alcuni casi (vedi punto di controllo 7.1) possono causare problemi di epilessia fotosensitiva. 141 WCAG 1.0: Punto di controllo 7.3 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.” Spesso l'effetto di movimento dei testi viene generato da script o applet: È necessario fornire un meccanismo all'interno di uno script o applet per permettere agli utenti di bloccare il movimento o gli aggiornamenti. 142 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di scritte animate o lampeggianti. verificare la presenza immagini animate (gif) misurandone la frequenza. 143 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Immagini” GIF Flicker Test. Analizza le immagini .gif presenti nella pagina generando un report di conformità al requisito (7.1). Struttura Visualizza altri elementi. Attiva una micro applicazione in Javascript che identifica le istanze sulla pagina corrente dell'elemento inserito, come ad esempio <blink> (7.2) e <marquee> (7.3). 144 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra per l’accessibilità, menu “Informazioni documento” Informazioni metadata. Visualizza (in una nuova finestra) l'elenco di tutti gli elementi meta ed il relativo contenuto della pagina corrente. (7.1). Identifica Applet / Script. Visualizza l’elenco delle applet e degli script presenti all’interno della pagina. (1.1) L’esperto dovrà quindi verificare la presenza di contenuti equivalenti per tali oggetti (Punti di controllo 7.1, 7.2 e 7.3). 145 Requisito numero 6 di 22 Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori (in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini; ove non sia possibile, ricorrere agli stessi criteri di distinguibilità indicati in precedenza. Riferimenti WCAG 1.0: 2.2 Riferimenti Sec. 508: non presente http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 146 WCAG 1.0: Punto di controllo 2.2 Garantire che le combinazioni di colori tra il primo piano e lo sfondo forniscano un sufficiente contrasto se osservati da qualcuno Per le immagini con deficit percettivi del colore o quando visualizzati su un monitor in bianco e nero. http://www. w3.org/tr/wcag10 Per i testi 147 WCAG 1.0: Punto di controllo 2.2 http://www. w3.org/tr/wcag10 “Garantire che le combinazioni di colori tra il primo piano e lo sfondo forniscano un sufficiente contrasto se osservati da qualcuno con deficit percettivi del colore o quando visualizzati su un monitor in bianco e nero.” È evidente che colori chiari su fondo chiaro oppure colori scuri su fondo scuro non sono la scelta adatta. TESTO TESTO 148 WCAG 1.0: Punto di controllo 2.2 Due colori sono in grado di fornire una buona visibilità di http://www. colore se la differenza di luminosità e la differenza di w3.org/tr/wcag10 colore è maggiore di una soglia stabilita. “Garantire che le Il livello minimo stabilito dal W3C è 125 per la differenza fra le luminosità e 500 per quella fra i colori. combinazioni di colori tra il primo Hewlett Packard (HP) fornisce uno strumento di verifica piano e lo sfondo del contrasto fra colori che utilizza gli algoritmi del W3C, forniscano un sufficiente contrasto ma fissa il livello minimo di differenza di colore a 400, il che aumenta il numero di combinazioni sfondo/primo se osservati da qualcuno con deficit piano considerate accettabili. percettivi del colore o quando visualizzati su un monitor in bianco e nero.” 149 WCAG 1.0: Punto di controllo 2.2 http://www. w3.org/tr/wcag10 “Garantire che le combinazioni di colori tra il primo piano e lo sfondo forniscano un sufficiente contrasto se osservati da qualcuno con deficit percettivi del colore o quando visualizzati su un monitor in bianco e nero.” Formula della Luminosità dei Colori La luminosità dei colori è determinata dalla seguente formula: ((Valore Rosso X 299) + (Valore Verde X 587) + (Valore Blu X 114)) / 1000 La differenza fra la luminosità dello sfondo e quella del colore di primo piano dovrebbe essere maggiore di 125. 150 WCAG 1.0: Punto di controllo 2.2 Formula della differenza dei Colori La differenza di colore è determinata dalla seguente formula: “Garantire che le combinazioni di colori tra il primo piano e lo sfondo forniscano un sufficiente contrasto se osservati da qualcuno con deficit percettivi del colore o quando visualizzati su un monitor in bianco e nero.” (massimo (Valore rosso 1, Valore rosso 2) - minimo (Valore rosso 1, Valore rosso 2)) + (massimo (Valore Verde 1, Valore Verde 2) - minimo (Valore Verde 1, Valore Verde 2)) + (massimo (valore blu 1, valore blu 2) - minimo (valore blu 1, valore blu 2)) http://www. w3.org/tr/wcag10 La differenza fra il colore di sfondo e quello di primo piano deve risultare maggiore di 500. 151 WCAG 1.0: Punto di controllo 2.2 http://www. w3.org/tr/wcag10 “Garantire che le combinazioni di colori tra il primo piano e lo sfondo forniscano un sufficiente contrasto se osservati da qualcuno con deficit percettivi del colore o quando visualizzati su un monitor in bianco e nero.” Esistono moltissime varianti di disabilità legate al colore Normale Deficit colore blue Deficit colore verde Deficit colore rosso 152 WCAG 1.0: Punto di controllo 2.2 http://www. w3.org/tr/wcag10 “Garantire che le combinazioni di colori tra il primo piano e lo sfondo forniscano un sufficiente contrasto se osservati da qualcuno con deficit percettivi del colore o quando visualizzati su un monitor in bianco e nero.” È quindi impossibile rendere un sito adatto a tutti gli utenti Si potrebbero creare dei fogli di stile (CSS) alternativi in modo che l’utente del sito possa adattare i colori alle sue problematiche <link href="main.css" rel="stylesheet" type="text/css" title="Standard" /> <link href="1.css" rel="alternate stylesheet" type="text/css" title="Alto contrasto" /> <link href="2.css" rel="alternate stylesheet" type="text/css" title="Psicadelico" /> 153 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare il contrasto dei colori nel foglio di stile; verificare il contrasto dei colori per le immagini e gli oggetti presenti nella pagina. 154 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Colori: Colour Contrast Analyzer. Esegue un’applicazione che consente di verificare il rispetto degli algoritmi per qualsiasi contenuto presente nella pagina, immagini comprese. (2.2). Strumenti: Juicy Studio Tools / CSS Accessibility Analyzer. Consente di analizzare gli elementi all’interno di un foglio di stile per verificare il rispetto degli algoritmi (2.2). Simulazioni. Consente di accedere a una serie di funzionalità per emulare la visualizzazione della pagina secondo diverse disabilità visive (2.2). 155 Requisito numero 7 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche predefinite indicate nella DTD adottata. Riferimenti WCAG 1.0: 9.1 Riferimenti Sec. 508: 1194.22 (f) 156 WCAG 1.0: Punto di controllo 9.1 http://www. w3.org/tr/wcag10 Fornire mappe immagine sul lato client invece di mappe immagine sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida. 157 WCAG 1.0: Punto di controllo 9.1 http://www. w3.org/tr/wcag10 “Fornire mappe immagine sul lato client invece di mappe immagine sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida.” Le immagini sensibili (mappe) sul lato server inviano le coordinate del mouse al server al fine di processarne la posizione e quindi rispondere ad eventuali aree sensibili. Con questo sistema l'immagine sensibile sul lato server non sarà accessibile agli utenti che utilizzano browser testuali o che possono operare esclusivamente tramite tastiera o con tecnologie assistive che non emulano il movimento e le funzionalità del mouse. 158 WCAG 1.0: Punto di controllo 9.1 http://www. w3.org/tr/wcag10 “Fornire mappe immagine sul lato client invece di mappe immagine sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida.” Le forme geometriche supportate dall'elemento <area> in un’immagine sensibile: Default: specifica l'intera immagine sensibile. Rect: definisce un'area rettangolare. Circle: definisce un'area circolare. Poly: definisce un'area poligonare. 159 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di mappe immagine sensibili lato server. 160 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità per visualizzare le mappe disponibili nella pagina corrente (Immagini – Visualizza Mappe Immagine) e controllare che siano mappe immagine di tipo client (9.1) Verificare la presenza degli elementi <area> e dei testi alternativi. Controllare la corrispondenza dei testi alternativi con l’area di appartenenza. 161 Requisito numero 8 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa. Riferimenti WCAG 1.0: 1.2 Riferimenti Sec. 508: 1194.22 (e) 162 WCAG 1.0: Punto di controllo 1.2 http://www. w3.org/tr/wcag10 Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server. 163 WCAG 1.0: Punto di controllo 1.2 http://www. w3.org/tr/wcag10 “Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.” Per creare una mappa immagine sul lato server sono necessari i seguenti requisiti: Un’immagine in qualunque formato supportato (preferibilmente formati non proprietari). Il codice HTML/XHTML valido. Un file di mappa immagine che definisce l’azione delle aree sensibili. In questo caso non sono presenti testi alternativi “alt”. 164 WCAG 1.0: Punto di controllo 1.2 http://www. w3.org/tr/wcag10 “Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.” Le immagini sensibili lato server risultano molto utili nel caso di mappe con informazioni di tipo geografico dove ogni punto è attivo e quindi raggiungibile da un evento tramite mouse. Fornire lo stesso risultato con una immagine sensibile lato client risulterebbe molto complicato e di fatto ingestibile da parte degli sviluppatori. 165 WCAG 1.0: Punto di controllo 1.2 http://www. w3.org/tr/wcag10 “Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.” Nel caso sia necessario utilizzare una immagine sensibile lato server, è necessario utilizzare dei collegamenti testuali che forniscano informazioni equivalenti. Questi consentono la fruibilità anche agli utenti che utilizzano la tastiera o tecnologie di input alternative che non rendono utilizzabili le destinazioni dei collegamenti. 166 WCAG 1.0: Punto di controllo 1.2 <p> <a href="http://www.miodominio.com/mappa.asp"> <img src="map.gif" alt="Mappa con il percorso della maratona" ismap="ismap" /> </a> </p> <p> [<a href="partenza.html">Partenza</a>] [<a href="ristoro.html">Posto di ristoro</a>] [<a href="arrivo.html">Arrivo</a>] </p> http://www. w3.org/tr/wcag10 “Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.” In questo caso, se viene utilizzato un browser testuale i testi mostrati saranno i seguenti: Mappa con il percorso della maratona [Partenza][Posto di ristoro][Arrivo] 167 WCAG 1.0: Punto di controllo 1.2 http://www. w3.org/tr/wcag10 “Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.” Gli utenti non dotati di mouse o impossibilitati ad utilizzarlo potranno fruire dei contenuti grazie a una versione alternativa in questo caso con dei collegamenti ipertestuali che consentono di aprire la pagina relativa al punto di partenza, al posto di ristoro e al punto di arrivo della mappa. 168 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Verificare la presenza di mappe immagine sensibili lato server. Verificare la presenza di collegamenti ipertestuali equivalenti alle zone sensibili della mappa immagine sensibile lato server. 169 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità per visualizzare le mappe disponibili nella pagina corrente (Immagini – Visualizza Mappe Immagine) e controllare che siano mappe immagine di tipo server (1.2) Verificare la presenza di collegamenti ridondanti (testi corrispondenti alle zone sensibili della mappa). 170 Requisito numero 9 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne. Riferimenti WCAG 1.0: 5.1, 5.5, 5.6 Riferimenti Sec. 508: 1194.22 (g) 171 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 Per le TABELLE DATI, identificare le intestazioni per righe e colonne. 172 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” Per le tabelle dati è necessario utilizzare gli elementi <tr> <td> <th> <caption> con i loro relativi attributi 173 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” L’elemento <caption> identifica il titolo della tabella. È posizionato solitamente all’inizio della tabella ed è personalizzabile graficamente tramite fogli di stile. L’elemento <tr> (table row) identifica una riga di una tabella e può contenere elementi <th> ed elementi <td>. La sua modalità di visualizzazione può essere personalizzata tramite fogli di stile. 174 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” L’elemento <th> (table header) identifica una cella di intestazione, ovvero un punto di riferimento per la lettura dei contenuti dei dati tabellari ed è contenuto all’interno dell’elemento <tr>. Solitamente tali celle vengono evidenziate dal browser con testo in grassetto rispetto all’impostazione predefinita del carattere (ove tale impostazione non viene modificata tramite fogli di stile). 175 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” L’elemento <td> (table data) identifica una cella contenente dati ed è contenuto all’interno dell’elemento <tr>. La sua modalità di visualizzazione può essere personalizzata tramite fogli di stile. 176 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” <table border="1" summary="Sommario tabella…"> <caption>Esempio di tabella dati</caption> <tr> <td></td> <th>Intestazione Colonna 1</th> <th>Intestazione Colonna 2</th> </tr> <tr> <th>Intestazione Riga 1</th> <td>Col. 1 Riga 1</td> <td>Col. 1 Riga 2</td> </tr> <tr> <th>Intestazione Riga 2</th> <td>Col. 2 Riga 1</td> <td>Col. 2 Riga 2</td> </tr> </table> 177 WCAG 1.0: Punto di controllo 5.1 Per istruire il lettore dello schermo alla http://www. w3.org/tr/wcag10 corretta lettura dei contenuti “Per le TABELLE utilizzare: DATI, identificare le intestazioni per righe e colonne.” l’attributo “id” per ogni cella di intestazione. l’attributo“headers”, che specifica l'elenco delle intestazioni collegate ad una cella contenente dati. 178 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” <table border="1" summary="Rappresentazione del numero di caffè consumati da ogni onorevole, con il tipo di caffè e se consumato con zucchero."> <caption>Caffé consumato da ogni onorevole</caption> <tr> <th id="nome">Nome</th> <th id="tazze">Tazze</th> <th id="tipo" abbr="Tipo">Tipo di caffè</th> <th id="zucchero">Zucchero?</th> </tr> <tr> <td headers="nome">A. Palmieri</td> <td headers="tazze">10</td> <td headers="tipo">Espresso</td> <td headers="zucchero">No</td> </tr> <tr> <td headers="nome">C. Campa</td> <td headers="tazze">5</td> <td headers="tipo">Decaffeinato</td> <td headers="zucchero">Sì</td> </tr> </table> 179 WCAG 1.0: Punto di controllo 5.1 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI, identificare le intestazioni per righe e colonne.” Il lettore dello schermo (screen reader) leggerà il testo come segue: Caption: Caffè consumato da ogni onorevole Summary: Rappresentazione del numero di caffè consumati da ogni onorevole, con il tipo di caffè e se consumato con zucchero. Nome: A. Palmieri, Tazze: 10, Tipo: Espresso, Zucchero: No Nome: C. Campa, Tazze: 5, Tipo: Decaffeinato, Zucchero: Sì 180 WCAG 1.0: Punto di controllo 5.5 http://www. w3.org/tr/wcag10 Per ogni tabella definire un sommario dei contenuti. 181 WCAG 1.0: Punto di controllo 5.5 http://www. w3.org/tr/wcag10 “Per ogni tabella definire un sommario dei contenuti.” Qualsiasi tabella di dati dovrà contenere delle informazioni preventive alla lettura. L'utilizzo del sommario per le tabelle (tramite l'attributo "summary") è particolarmente utile per le tecnologie assistive utilizzate dagli utenti non vedenti. Gli utenti non vedenti ricevendo informazioni grazie al contenuto dell'attributo "summary" potranno quindi valutare se fruire del contenuto o se passare al paragrafo successivo. 182 WCAG 1.0: Punto di controllo 5.5 http://www. w3.org/tr/wcag10 “Per ogni tabella definire un sommario dei contenuti.” Mentre l'elemento <caption> e l'attributo title rappresentano un "titolo" della tabella, l'attributo summary è di fatto una guida all'utente sul contenuto e sull'organizzazione della tabella dati. <table border="1" summary="Rappresentazione del numero di caffè consumati da ogni onorevole, con il tipo di caffè e se consumato con zucchero."> <caption>Caffè consumato da ogni onorevole</caption> 183 WCAG 1.0: Punto di controllo 5.6 http://www. w3.org/tr/wcag10 Fornire abbreviazioni per le etichette di intestazione. 184 http://www. w3.org/tr/wcag10 “Fornire abbreviazioni per le etichette di intestazione.” WCAG 1.0: Punto di controllo 5.6 Per l'elemento <th> spesso si usa "abbr" per definire un'abbreviazione dell'etichetta. Uno screen-reader leggerà il valore contenuto in "abbr" in sostituzione del contenuto della cella in modo da eliminare pesanti ripetizioni. <th id="tipo" abbr="Tipo">Tipo di caffè</th> 185 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di tabelle dati; verificare l’uso corretto degli elementi <caption>, <tr>, <th> e <td> secondo le specifiche; verificare la presenza dell’attributo summary. 186 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità alla voce “Struttura” Tabelle dati semplici: Visualizza gli elementi <table>, <th>, <td> sulla pagina corrente insieme agli attributi raccomandati per il markup di semplici tabelle di dati (summary, scope). Un attributo vuoto indica che l'attributo non è stato utilizzato pur essendone raccomandato l'uso. 187 Requisito numero 10 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti nella DTD adottata per associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne. Riferimenti WCAG 1.0: 5.2 Riferimenti Sec. 508: 1194.22 (h) 188 WCAG 1.0: Punto di controllo 5.2 http://www. w3.org/tr/wcag10 Per le TABELLE DATI che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione. 189 WCAG 1.0: Punto di controllo 5.2 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione.” Per tabelle più complesse si utilizza: l’elemento <thead> raggruppa le righe di intestazione (elementi <tr>, <th> e <td>); l’elemento <tbody> raggruppa le righe interne alla tabella (elementi <tr> e <td>); l’elemento <tfoot> raggruppa le righe di chiusura della tabella (elementi <tr> e <td>); gli elementi <col> e <colgroup> raggruppano le colonne; gli attributi “axis”, “scope” ed “headers” descrivono relazioni più complesse fra i dati. 190 <table summary="Questa tabella contiene le spese generali suddivise per affiliazione (nominativo ed ufficio di competenza e per descrizione (Tipologia di spesa ed importo“ border="1"> <caption>Spese generali anno 2005</caption> <colgroup span="2" /> <colgroup span="2" /> <thead> <tr> <th colspan="2" id="affiliazione">Affiliazione</th> <th colspan="2" id="descrizione">Descrizione</th> </tr> <tr> <th id="nominativo">Nominativo</th> <th id="ufficio">Ufficio</th> <th id="tipologia" abbr="Tipo">Tipologia di spesa</th> <th id="importo">Importo</th> </tr> </thead> WCAG 1.0: Punto di controllo 5.2 http://www. w3.org/tr/wcag10 “Per le TABELLE DATI che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione.” <tfoot> <tr> <td colspan="4">Aggiornata al 27 maggio 2005</td> </tr> </tfoot> <tbody> <tr> <td <td <td <td </tr> headers="affiliazione nominativo">Bianchi Michele</td> headers="affiliazione ufficio">Amministrazione</td> headers="descrizione tipologia">Carburante</td> headers="descrizione importo">250,00</td> <tr> <td headers="affiliazione nominativo">Rossi Mario</td> <td headers="affiliazione ufficio">Acquisti</td> <td headers="descrizione tipologia">Cancelleria</td> <td headers="descrizione importo">112,15</td> </tr> <tr> <td headers="affiliazione nominativo">Scano Roberto</td> <td headers="affiliazione ufficio">Vendite</td> <td headers="descrizione tipologia">Consumabili</td> <td headers="descrizione anno">400,00</td> </tr> </tbody> </table> 191 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di tabelle dati complesse; verificare la presenza degli elementi ed attributi previsti dalle specifiche per le tabelle dati semplici; verificare l’uso corretto degli elementi <thead>, <tbody>, <tfoot>, <col>, <colgroup> e degli attributi “axis”, “scope”, “headers” secondo le specifiche. 192 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità alla voce “Struttura” Tabelle dati complesse. Visualizza gli elementi <table>, <th>, <td>, <thead>, <tbody>, <tfoot>, <col>, <colgroup> sulla pagina corrente insieme agli attributi raccomandati per il linguaggio di marcatura di tabelle di dati complesse (summary, scope, id, headers). Un attributo vuoto indica che l'attributo non è stato utilizzato pur essendone raccomandato l'uso (5.2). Ordinamento delle celle in tabella. Visualizza l'ordine (numerico) di tabulazione ed i bordi delle celle delle tabelle sulla pagina corrente (5.2). Grazie a tale funzionalità l’esperto può verificare il corretto ordine di lettura. 193 Requisito numero 11 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati. Riferimenti WCAG 1.0: 3.3, 6.1 Riferimenti Sec. 508: 1194.22 (d) 194 WCAG 1.0: Punto di controllo 3.3 http://www. w3.org/tr/wcag10 Usare i fogli di stile per controllare l'impaginazione e la presentazione. 195 WCAG 1.0: Punto di controllo 3.3 http://www. w3.org/tr/wcag10 “Usare i fogli di stile per controllare l'impaginazione e la presentazione.” L’allineamento, i margini e il posizionamento degli elementi nella presentazione di una pagina vanno quindi gestiti tramite fogli di stile. Lo sviluppatore deve comunque garantire la lettura dei contenuti della pagina anche senza l’utilizzo dei fogli di stile, per garantirne l’accesso e la fruibilità agli utenti che usano lettori solo testo (o lettori vocali). 196 WCAG 1.0: Punto di controllo 3.3 http://www. w3.org/tr/wcag10 “Usare i fogli di stile per controllare l'impaginazione e la presentazione.” Allineamento: utilizzando gli attributi text-indent, text-align, word-spacing, font-stretch è possibile formattare il testo aumentando/diminuendo gli spazi, definendo l'allineamento, ecc. Con l'attributo text-align: center sarà possibile eliminare l'elemento <center>, oramai obsoleto. Margini: margin, margin-top, margin-right, margin-bottom, margin-left consentono di definire i margini dell’elemento (<div>, …) all'interno del quale verranno forniti i contenuti. Posizionamento: float, position, top, right, bottom, left consentono di posizionare l'oggetto nella pagina. 197 WCAG 1.0: Punto di controllo 3.3 http://www. w3.org/tr/wcag10 “Usare i fogli di stile per controllare l'impaginazione e la presentazione.” 198 WCAG 1.0: Punto di controllo 6.1 http://www. w3.org/tr/wcag10 Organizzare i documenti in modo che possano essere letti anche in assenza dei fogli di stile. 199 http://www. w3.org/tr/wcag10 “Organizzare i documenti in modo che possano essere letti anche in assenza dei fogli di stile.” WCAG 1.0: Punto di controllo 6.1 E’ necessario sviluppare siti web in modo che siano fruibili anche se il browser utilizzato non supporta i fogli di stile. La finalità dello sviluppatore deve essere quella di garantire la piena fruibilità dei contenuti del proprio sito web. 200 WCAG 1.0: Punto di controllo 6.1 http://www. w3.org/tr/wcag10 “Organizzare i documenti in modo che possano essere letti anche in assenza dei fogli di stile.” Il testo è stato generato e posizionato con i fogli di stile, definendo quattro blocchi di testo tramite l’elemento <div>: <div <div <div <div class="parte1">The quick</div> class="parte2">brown fox</div> class="parte3">jumped over</div> class="parte4">the lazy dogs.</div> 201 WCAG 1.0: Punto di controllo 6.1 http://www. w3.org/tr/wcag10 “Organizzare i documenti in modo che possano essere letti anche in assenza dei fogli di stile.” The quick brown fox jumped over the lazy dogs. .parte1 /* The quick */ { color: red; font-size: 14pt; padding-left: 0; margin-top: 40px; font-family: copperplate gothic bold, fantasy, sans-serif } .parte2 /* brown fox */ { color: brown; font-size: 10pt; padding-left: 100px; margin-top: 30px; font-family: times new roman, desdemona, serif } .parte3 /* jumped over */ { color: purple; font-size: 18pt; padding-left: 200px; margin-top: -60px; font-family: desdemona, times new roman, serif } .parte4 /* the lazy dogs */ { color: blue; font-size: 24pt; padding-left: 350px; margin-top: -80px; margin-bottom: 100px; font-family: fantasy, copperplate gothic bold, sans-serif } 202 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare l’uso di elementi e/o attributi deprecati a favore dei fogli di stile; verificare, disabilitando i fogli di stile, che i contenuti siano ancora fruibili e comprensibili secondo il loro ordine di presentazione. 203 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm CSS Attiva/Disattiva i CSS: Attiva/disattiva i fogli di stile esterni (Punti di controllo 3.3 e 6.1). Disattiva i CSS inline: Rimuove l'attributo style (se presente) da tutti gli elementi della pagina (Punti di controllo 3.3 e 6.1). Sorgente Elementi e attributi deprecati (Nuova finestra). Visualizza gli elementi e gli attributi deprecati. (Punto di controllo 3.3). 204 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Struttura Bordi delle tabelle. Evidenzia tutti i bordi delle tabelle/celle sulla pagina corrente (Punto di controllo 3.3). Ordine di tabulazione. Visualizza per ogni elemento attivo il numero corrispondente al suo ordine di tabulazione, al fine di poter consentire all’esperto di verificare la correttezza dell’ordine di navigazione anche senza disabilitare i fogli di stile (Punto di controllo 6.1). Visualizza i Div. Mostra l'ordine (numerico) di tabulazione ed i bordi degli elementi <div> presenti sulla pagina corrente (Punto di controllo 6.1). 205 Requisito numero 12 di 22 La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri. Riferimenti WCAG 1.0: 3.4 Riferimenti Sec. 508: non presente http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 206 WCAG 1.0: Punto di controllo 3.4 http://www. w3.org/tr/wcag10 Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile. 207 WCAG 1.0: Punto di controllo 3.4 http://www. w3.org/tr/wcag10 “Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile.” Non soddisfare il punto di controllo implica che un utente con ipovisione avrà grosse difficoltà nell’accedere ai contenuti delle vostre pagine. Considerando che in tale categoria di utenti ricadono anche le persone anziane, non rispettare questo punto di controllo causa una info-esclusione di parecchi visitatori del vostro sito web. Attenzione pure all’uso di nuove tecnologie di navigazione (PDA, WebTV, ecc.) 208 WCAG 1.0: Punto di controllo 3.4 http://www. w3.org/tr/wcag10 “Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile.” Unità di misura di tipo assoluto: Pica (pc) Punti (pt) Inches (in) Centimetri (cm) Millimetri (mm) Mantengono sempre la stessa dimensione. 209 WCAG 1.0: Punto di controllo 3.4 Unità di misura di tipo relativo: "em" (altezza del carattere "m") Percentuale I visitatori del sito web potranno facilmente adattare il carattere alle proprie esigenze. Caso particolare: pixel che il W3C definisce dimensione relativa ma che in IE non viene ridimensionato (il pixel è unità relativa alla dimensione dello schermo: le opzioni di ingrandimento carattere non modificano la dimensione dello schermo) http://www. w3.org/tr/wcag10 “Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile.” 210 WCAG 1.0: Punto di controllo 3.4 http://www. w3.org/tr/wcag10 “Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile.” body { font-family: Georgia, "Times New Roman", Times, serif; color: #000; background-color: #369; font-size: .9em; width: 80%; } .codice { font-family: "Courier New", Courier, serif; background-color: transparent; color: #666; font-size: 0.9em; } 211 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Verificare la presenza di dimensioni assolute e/o dimensioni in pixel all’interno del foglio di stile o degli stili in linea; Verificare che al ridimensionamento dei caratteri il contenuto rimanga leggibile e comprensibile; Verificare che al ridimensionamento della finestra il contenuto rimanga leggibile e comprensibile. 212 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Ridimensiona 800 x 600. Ridimensiona l'attuale finestra del browser ad una larghezza di 800 pixel e ad un'altezza di 600 pixel. CSS Visualizza gli stili applicati (Nuova finestra). Visualizza gli stili (in una nuova finestra) associate col contenuto posizionato al di sotto del puntatore del mouse. L’esperto potrà quindi verificare la presenza di caratteri o di elementi in cui non sono state utilizzate dimensioni di tipo relativo e/o dimensioni in pixel (Punto di controllo 3.4). Visualizza il foglio di stile (Nuova finestra). Visualizza il contenuto dei fogli di stile richiamati dalla pagina corrente (in una nuova finestra). L’esperto potrà quindi verificare la presenza di caratteri o di elementi in cui non sono state utilizzate dimensioni di tipo relativo e/o dimensioni in pixel (Punto di controllo 3.4). 213 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Strumenti Juicy Studio Tools / CSS Accessibility Analyzer (Nuova finestra). Invia al sistema di valutazione di JuicyStudio il foglio di stile della pagina corrente. CSS Accessibility Analyzer verificherà la conformità del foglio di stile (segnalando errori o avvisi) nonché la presenza del contrasto dei colori (Requisito 6) e segnalando l’eventuale presenza di caratteri o elementi in dimensioni assolute oppure l’uso di dimensioni tramite pixel (Punto di controllo 3.4). 214 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare http://www.browsercam.com/ oppure http://browsershots.org/ per testare la visualizzazione dei contenuti per: tipo di browser sistema operativo risoluzione video 215 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Il requisito non richiede comunque di praticare l’impossibile ma di garantire una certa visibilità dei contenuti anche a risoluzioni video 800 x 600 a caratteri molto grandi considerando che tale risoluzione è ormai un’impostazione minima consigliata per ogni configurazione hardware. 216 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Nelle tecniche di applicazione dei CSS per le WCAG 2.0 è chiarito definitivamente il problema [http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20CSS-TECHS/#syntax-data-types]: Utilizzare "em" o dimensioni percentuali per le proprietà che necessitano di essere modificate. Tali dimensioni sono "font-size" e "line-height". Utilizzare "px" per le proprietà che non necessitano di essere modificate. Tali dimensioni sono "height" e "width" per le immagini raster, "margin" e "border". 217 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Relativamente ai layout a dimensioni fisse i valori per padding, margin, top, left, width e height possono essere espressi in px, ma - al fine di rispettare il requisito - non devono provocare sovrapposizioni tra i contenuti. 218 Requisito numero 13 di 22 In caso di utilizzo di tabelle a scopo di impaginazione, garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato e utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato. Riferimenti WCAG 1.0: 5.3, 5.4 Riferimenti Sec. 508: non presente http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 219 WCAG 1.0: Punto di controllo 5.3 http://www. w3.org/tr/wcag10 Non usare le TABELLE PER IMPAGINAZIONE a meno che la tabella non sia comprensibile se linearizzata. 220 WCAG 1.0: Punto di controllo 5.3 http://www. w3.org/tr/wcag10 “Non usare le TABELLE PER IMPAGINAZIONE a meno che la tabella non sia comprensibile se linearizzata.” Con la linearizzazione, il contenuto delle celle diventa una serie di paragrafi, uno successivo all'altro. È necessario che la lettura dei contenuti (che avviene riga per riga) abbia un senso. Utilizzando le tabelle di layout (se annidate), si possono riscontrare dei problemi con le tecnologie assistive. 221 WCAG 1.0: Punto di controllo 5.3 http://www. w3.org/tr/wcag10 “Non usare le TABELLE PER IMPAGINAZIONE a meno che la tabella non sia comprensibile se linearizzata.” Con questa tabella i lettori di schermo (screen reader) leggeranno cella dopo cella, e quindi nel nostro esempio prima tutto il contenuto della prima colonna e poi il contenuto della seconda. <table summary="Struttura della tabella"> <tr> <td>Colonna 1</td> <td>Colonna 2</td> </tr> </table> 222 WCAG 1.0: Punto di controllo 5.4 http://www. w3.org/tr/wcag10 Se si utilizza una TABELLA DI IMPAGINAZIONE non utilizzare alcun marcatore di struttura a scopo di formattazione. 223 WCAG 1.0: Punto di controllo 5.4 http://www. w3.org/tr/wcag10 “Se si utilizza una TABELLA DI IMPAGINAZIONE non utilizzare alcun marcatore di struttura a scopo di formattazione.” Per una tabella di impaginazione non va utilizzato alcun elemento strutturale (<th>, <thead>, <tfoot>, <tbody>, <colgroup>, <col>) in quanto confonderebbe i tool assistivi ne linearizzano e leggono i contenuti. 224 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di tabelle di impaginazione; verificare l’eventuale errata presenza degli elementi ed attributi previsti dalle specifiche per le tabelle dati; verificare che il contenuto della tabella sia linearizzabile. 225 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità alla voce “Struttura” Bordi delle tabelle. Evidenzia tutti I bordi delle tabelle/celle sulla pagina corrente al fine di identificare la struttura della pagina (5.4). Tabelle dati complesse. Visualizza gli elementi <table>, <th>, <td>, <thead>, <tbody>, <tfoot>, <col>, <colgroup> sulla pagina corrente insieme agli attributi raccomandati per il linguaggio di marcatura di tabelle di dati complesse (summary, scope, id, headers). Un attributo vuoto indica che l'attributo non è stato utilizzato. L’esperto potrà quindi verificare l’errato utilizzo di tali elementi per le tabelle di impaginazione (5.4). Ordinamento delle celle in tabella. Visualizza l'ordine (numerico) di tabulazione ed i bordi delle celle delle tabelle sulla pagina corrente (Punto di controllo 5.3). Grazie a tale funzionalità l’esperto può verificare il corretto ordine di lettura. 226 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Struttura Linearizza (Rimuovi le tabelle). Rimuove tutti gli elementi <table>, <th>,<tr>, <td> e <div> dalla pagina corrente per controllare la linearizzazione dei contenuti (Punto di controllo 5.3). 227 Requisito numero 14 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Nei moduli (form), associare in maniera esplicita le etichette ai rispettivi controlli, posizionandole in modo che sia agevolata la compilazione dei campi da parte di chi utilizza le tecnologie assistive. Riferimenti WCAG 1.0: 10.2, 12.4 Riferimenti Sec. 508: 1194.22 (n) 228 WCAG 1.0: Punto di controllo 10.2 http://www. w3.org/tr/wcag10 Fino a quando i programmi utente non supporteranno esplicite associazioni fra etichette e controlli dei moduli, garantire che l'etichetta sia posizionata correttamente per tutti i controlli dei moduli che hanno etichette associate implicitamente. 229 WCAG 1.0: Punto di controllo 10.2 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non supporteranno esplicite associazioni fra etichette e controlli dei moduli, garantire che l'etichetta sia posizionata correttamente per tutti i controlli dei moduli che hanno etichette associate implicitamente.” All'interno dei moduli è quasi sempre presente un testo che accompagna, ad esempio, un campo di inserimento testo. Questo ci permette di ottenere informazioni chiare su quali dati sono richiesti e di consentire il posizionamento da parte di utenti con disabilità motorie. È possibile utilizzare gli elementi <label> in modo implicito (10.2) ed in modo esplicito (12.4). 230 WCAG 1.0: Punto di controllo 10.2 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non supporteranno esplicite associazioni fra etichette e controlli dei moduli, garantire che l'etichetta sia posizionata correttamente per tutti i controlli dei moduli che hanno etichette associate implicitamente.” Implicito <label> Nome Utente: <input type="text" size="20" value="Nominativo..." name="utente" id="utente" </label> /> 231 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 Associare esplicitamente le etichette ai loro controlli. 232 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” Esplicito (tramite attributo “for”) <label for="utente">Nome Utente:</label> <input type="text" size="20" value="Nominativo..." name="utente" id="utente" /> <label for="utente"> Nome Utente: <input type="text" size="20" value="Nominativo..." name="utente" id="utente" /> </label> 233 WCAG 1.0: Punto di controllo 12.4 L'attributo "for" permette di associare un elemento <label> in modo esplicito ad un determinato elemento interno al modulo. Il valore dell'attributo "for" dell'elemento <label> deve corrispondere al valore dell'attributo "id" dell'elemento interno al modulo (“id” ha valore unico in tutta la pagina). In questo modo la tecnologia assistiva riesce ad “agganciare” l’etichetta anche se posizionata, ad esempio, diverse celle di una tabella. Alcuni browser consentono il posizionamento al campo del modulo alla selezione dell’elemento <label>. http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” 234 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” <tr> <td><label for="nome">Nome:</label></td> <td><input type="text" size="20" id="nome" name="nome" /> </td> </tr> <tr> <td><label for="cliente">Cliente XYZ:</label></td> <td><input type="checkbox" size="20" id="cliente" name="cliente" /> </td> </tr> 235 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” <fieldset> <legend>Sesso</legend> <label for="sessoM">Maschio</label> <input type="radio" size="20" id="sessoM" name="sesso" /> <br /> <label for="sessoF">Femmina</label> <input type="radio" size="20" id="sessoF" name="sesso" /> </fieldset> 236 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” <tr> <td><label for="citta">Città</label></td> <td><select name="citta" id="citta"> <optgroup label="Lombardia"> <option value="Brescia">Brescia</option> </optgroup> <optgroup label="Veneto"> <option value="Venezia">Venezia</option> </optgroup> </td> </tr> 237 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” <tr> <td><label for="note">Annotazioni:</label></td> <td> <textarea rows="2" cols="70" name="note" id="note"></textarea> </td> </tr> 238 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” C’è da ricordare che l'attributo "for" non è implementato correttamente nei vecchi browser. Nei browser di ultima generazione e in parecchie tecnologie assistive tale affiliazione tra <label> ed elemento interno al modulo è garantita proprio grazie alla presenza dell'attributo "for". 239 WCAG 1.0: Punto di controllo 12.4 http://www. w3.org/tr/wcag10 “Associare esplicitamente le etichette ai loro controlli.” È necessario utilizzare l'elemento <label> in modo esplicito tramite l'attributo for che deve corrispondere all'attributo "id" dell'elemento interno al modulo. 240 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di moduli (form); verificare l’eventuale presenza di campi che necessitano dell’attributo <label>: elemento <input>, ad esclusione degli elementi con type=”button”; elemento <textarea>; elemento <select>. verificare la corretta affiliazione degli elementi <label>. 241 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità alla voce “Struttura” Elementi Fieldset / Label: Visualizza gli elementi <fieldset>, <legend> e <label> sulla pagina corrente, e l'attributo “for” dell'elemento <label> (se presente), altrimenti visualizza il testo 'NoFor!'. Inoltre, visualizza l'attributo id [id=""], sui controlli dei form, se presente (Punto di controllo 12.4). 242 Requisito numero 15 di 22 Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione testuale della funzionalità svolta e garantire una alternativa testuale equivalente, in modo analogo a quanto indicato nel requisito n. 3. Riferimenti WCAG 1.0: 6.3 Riferimenti Sec. 508: 1194.22 (l), 1194.22 (m) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 243 http://www. w3.org/tr/wcag10 WCAG 1.0: Punto di controllo 6.3 Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa. 244 WCAG 1.0: Punto di controllo 6.3 http://www. w3.org/tr/wcag10 “Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa.” Un’istruzione come la seguente che consente di tornare alla pagina precedente non sarà fruibile dagli utenti che hanno disabilitato gli script o che utilizzano browser che non li supportano: <a href="javascript:history.go(-1)"> Pagina Precedente </a> 245 WCAG 1.0: Punto di controllo 6.3 http://www. w3.org/tr/wcag10 Per ottenere particolari risultati spesso si ricorre a DHTML (combinando JavaScript, CSS e HTML). “Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa.” Immaginiamo un menu realizzato con JavaScript e CSS: come potrà essere fruito da tutti gli utenti? usando l'elemento <noscript> si potrà fornire una versione alternativa e il menu JavaScript verrà riprodotto anche in HTML. 246 WCAG 1.0: Punto di controllo 6.3 http://www. w3.org/tr/wcag10 <script type="text/javascript" src="menu.js"></script> <noscript> <ul> <li><a href="pagina1.html">Menu 1</a></li> <li><a href="pagina2.html">Menu 2</a></li> <li><a href="pagina3.html">Menu 3</a></li> </ul> </noscript> “Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo Per le applet e gli altri oggetti di programmazione, rispettare le regole di sviluppo previste per il requisito 3. non è possibile, fornire informazione Nel caso non sia possibile rendere accessibile il contenuto, creare una pagina accessibile equivalente nelle equivalente in una funzionalità e nelle informazioni fornite all’utente (req. 22). pagina accessibile alternativa.” 247 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di script, applet e oggetti di programmazione; verificare il funzionamento della pagina disabilitando l’uso di script, applet ed oggetti di programmazione; verificare la presenza di contenuti alternativi per script, applet ed oggetti di programmazione. 248 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità alla voce “Informazioni”: Identifica Applet/Script: apre una nuova finestra elencando le applet e gli script presenti all’interno della pagina. (6.3) Opzioni IE Attiva/Disattiva Javascript. Attiva/Disattiva Javascript col comando di IE Strumenti>Opzioni Internet>Protezione>Livello personalizzato>Abilita/disabilita Esecuzione Script (6.3). Attiva/Disattiva ActiveX. Attiva/Disattiva ActiveX col comando di IE Strumenti>Opzioni Internet>Protezione>Livello personalizzato>Abilita/disabilita Controlli e Plug-in ActiveX (6.3). 249 Requisito numero 16 di 22 Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input. Riferimenti WCAG 1.0: 6.4, 9.2, 9.3 Riferimenti Sec. 508: 1194.22 (l), 1194.22 (m) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 250 WCAG 1.0: Punto di controllo 6.4 http://www. w3.org/tr/wcag10 Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input. 251 WCAG 1.0: Punto di controllo 6.4 http://www. w3.org/tr/wcag10 “Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.” Un gestore di eventi (event handler) è un insieme di istruzioni che vengono richiamate quando un particolare "evento" viene soddisfatto. onload onunload onclick ondblclick onfocus onmousedow n onmouseup onmouseover onmousemov e 252 WCAG 1.0: Punto di controllo 6.4 http://www. w3.org/tr/wcag10 “Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.” Nel caso siano previsti degli eventi che richiedono l'iterazione da parte dell'utente, è necessario garantire la loro esecuzione a qualsiasi utente, sia che egli utilizzi una periferica di puntamento o una tastiera (o un emulatore di tastiera). 253 WCAG 1.0: Punto di controllo 6.4 http://www. w3.org/tr/wcag10 “Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.” Bisogna definire un comando tastiera per ogni comando che richieda l’uso del mouse. I comandi tastiera possono essere attivati anche tramite comandi vocali. Le tecnologie assistive per non vedenti utilizzano i comandi tastiera per “muoversi” attraverso i contenuti. 254 WCAG 1.0: Punto di controllo 6.4 Possiamo quindi accoppiare alcuni eventi nel modo seguente: "onmousedown" e "onkeydown" "onmouseup" e "onkeyup" "onclick" e "onkeypress" "onmouseover" e "onfocus" … Nota: non esiste un comando tastiera equivalente al doppio clic ("ondblclick") in HTML 4.01 e XHTML. http://www. w3.org/tr/wcag10 “Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.” 255 WCAG 1.0: Punto di controllo 6.4 http://www. w3.org/tr/wcag10 “Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.” <a href="nuova.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"> Nuova Pagina </a> Se JavaScript non è abilitato, selezionando il collegamento la nuova pagina sarà aperta nella stessa finestra mentre se è attivo il click sul collegamento ipertestuale o l'uso di qualsiasi tasto (con il focus sul collegamento ipertestuale) aprirà una nuova finestra. 256 WCAG 1.0: Punto di controllo 9.2 http://www. w3.org/tr/wcag10 Garantire che ogni elemento dotato di una sua specifica interfaccia possa essere gestito in una modalità indipendente dal dispositivo. 257 WCAG 1.0: Punto di controllo 9.2 http://www. w3.org/tr/wcag10 “Garantire che ogni elemento dotato di una sua specifica interfaccia possa essere gestito in una modalità indipendente dal dispositivo.” Non tutti gli utenti navigano il web tramite interfaccia grafica, utilizzando il mouse come periferica di input. Molti utenti utilizzano la tastiera, tastiere alternative o comandi vocali per accedere a collegamenti ipertestuali, per accedere o inviare dati da un modulo, ecc. L’accesso alle interfacce deve essere quindi garantito indipendentemente dalla periferica di input utilizzata (mouse o comandi tastiera). 258 WCAG 1.0: Punto di controllo 9.3 http://www. w3.org/tr/wcag10 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti dal dispositivo. 259 WCAG 1.0: Punto di controllo 9.3 Questo punto di controllo può definirsi una accentuazione di quanto richiesto dal punto di controllo 6.4. “Negli script, specificare gestori Ricordiamo che i comandi tastiera vengono spesso di evento logici utilizzati per le tecnologie assistive e possono piuttosto che gestori di evento essere attivati anche tramite comandi vocali. http://www. w3.org/tr/wcag10 dipendenti dal dispositivo.” 260 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza di script, applet e oggetti di programmazione; verificare la presenza di eventi dipendenti dal dispositivo di input. 261 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzare la barra dell’accessibilità alla voce “Struttura” Gestione eventi: Visualizza la presenza o meno di eventi indipendenti dal dispositivo di input (6.4, 9.2, 9.3). 262 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Visualizza un simbolo di avvertimento accanto ad un elemento, se l'elemento: Visualizza un simbolo di informazione accanto ad un elemento, se: ha un attributo onmouseover senza il corrispondente onfocus; ha un attributo onclick senza il corrispondente onkeypress; è un elemento <select> ed ha un attributo onchange; ha un attributo onfocus ma non è in grado di ricevere il focus. ha un attributo onmouseover con un onfocus corrispondente; ha un attributo onclick con un onkeypress corrispondente. Ciascun simbolo (avvertimento o informazione) contiene sempre un testo alternativo. 263 Requisito numero 17 di 22 Garantire che le funzionalità e le informazioni veicolate per mezzo di oggetti di programmazione, oggetti che utilizzano tecnologie non definite da grammatiche formali pubblicate, script e applet siano direttamente accessibili. Riferimenti WCAG 1.0: 8.1 Riferimenti Sec. 508: 1194.22 (l), 1194.22 (m) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 264 WCAG 1.0: Punto di controllo 8.1 http://www. w3.org/tr/wcag10 se importante Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive. 265 WCAG 1.0: Punto di controllo 8.1 http://www. w3.org/tr/wcag10 “Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.” Gli script, le applet e qualsiasi altro oggetto fornito di propria interfaccia deve esser reso compatibile con le tecnologie assistive (lettori di schermo, periferiche di input particolari, ecc.). 266 WCAG 1.0: Punto di controllo 8.1 Se una applet (creata con l'elemento <object> in quanto http://www. l'elemento <applet> non fa parte delle raccomandazioni w3.org/tr/wcag10 del W3C) richiede l'iterazione con l'utente (per esempio la facoltà di inserire delle informazioni per effettuare dei “Fare in modo calcoli) e queste funzionalità non possono esser rese che elementi di programmi come disponibili in una versione alternativa è necessario script e applet rendere l'applet accessibile. siano direttamente Se l'interfaccia (navigazione ed interazione con gli accessibili o elementi) non può esser resa accessibile, è necessario compatibili con le tecnologie predisporre una versione alternativa accessibile. assistive.” 267 WCAG 1.0: Punto di controllo 8.1 http://www. w3.org/tr/wcag10 “Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.” Tutti i programmatori dovrebbero garantire l'accessibilità dei loro programmi, specialmente se fruibili dal grande pubblico tramite un canale di comunicazione come Internet. Consultare i siti web dei produttori di applet/oggetti per verificarne l’accessibilità: Ad esempio, indicazioni su come rendere maggiormente accessibile il contenuto di Macromedia Flash sono disponibili sul sito di Macromedia. 268 WCAG 1.0: Punto di controllo 8.1 http://www. w3.org/tr/wcag10 “Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.” Nel caso di Java, invece, è disponibile un pacchetto per la piattaforma Java 2: javax.accessibility che rende disponibile una serie di funzionalità per ottimizzare l'accessibilità dell'applicazione. AccessibleContext context = email.getAccessibleContext(); context.setAccessibleName("Email"); context.setAccessibleDescription("Indirizzo e-mail"); Spesso questi oggetti si basano sulle API definite dai diversi sistemi operativi. Ad esempio, Macromedia Flash risulta “accessibile” solamente su piattaforma Microsoft Windows con Microsoft Internet Explorer. 269 WCAG 1.0: Punto di controllo 8.1 http://www. w3.org/tr/wcag10 “Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.” In Java è possibile utilizzare dei valori mnemonici e degli acceleratori tramite tastiera che consentono l'utilizzo di funzionalità come per esempio l'accesso ad un menu con qualsiasi periferica di input. ' Associa una etichetta ad un componente JLabel label = new JLabel("Nome Utente:"); label.setDisplayedMnemonic('U'); label.setLabelFor(username); ' Valore mnemonico per un menu JMenu menu = new JMenu("File"); menu.setMnemonic('F'); ' Tasto di scelta rapida per una voce di menu JMenuItem item = new JMenuItem("Apri"); item.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_ O, KeyEvent.SHIFT_MASK)); 270 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare l’accessibilità dell’oggetto. 271 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm L’unico modo per testare gli oggetti è utilizzando una tastiera verificando che le funzionalità e le informazioni siano accessibili. È altresì necessario valutare l’oggetto con un lettore dello schermo per verificare la presenza di informazioni non visibili (es: identificazione elementi/oggetti, testi alternativi, ecc.). 272 Requisito numero 18 di 22 Nel caso in cui un filmato o una presentazione multimediale siano indispensabili per la completezza dell’informazione fornita o del servizio erogato, predisporre una alternativa testuale equivalente, sincronizzata in forma di sottotitolazione o di descrizione vocale, oppure fornire un riassunto o una semplice etichetta per ciascun elemento video o multimediale tenendo conto del livello di importanza e delle difficoltà di realizzazione nel caso di trasmissioni in tempo reale. Riferimenti WCAG 1.0: 1.3, 1.4 Riferimenti Sec. 508: 1194.22 (b) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 273 WCAG 1.0: Punto di controllo 1.3 http://www. w3.org/tr/wcag10 Fino a quando i programmi utente non potranno leggere automaticamente l'equivalente testuale del filmato di una presentazione multimediale fornire una descrizione audio delle informazioni essenziali. 274 WCAG 1.0: Punto di controllo 1.3 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non potranno leggere automaticamente l'equivalente testuale del filmato di una presentazione multimediale fornire una descrizione audio delle informazioni essenziali.” Sempre più facilmente si trovano filmati e presentazioni multimediali che devono essere resi accessibili. Gli utenti che per la loro disabilità (visiva o tecnologica) non possono visualizzare i contenuti della presentazione multimediale hanno necessità di ottenere una descrizione audio alternativa. 275 WCAG 1.0: Punto di controllo 1.3 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non potranno leggere automaticamente l'equivalente testuale del filmato di una presentazione multimediale fornire una descrizione audio delle informazioni essenziali.” Qualsiasi azione di interesse per l’utente all’interno della presentazione multimediale (immagini in movimento, localizzazione della scena, dettagli tecnici, ecc.) deve prevedere una descrizione di tipo audio. Per i dialoghi sono consigliati i testi (per gli utenti non udenti). Nel caso non sia possibile predisporre una versione audio di supporto, è necessario fornire una versione testuale direttamente nella pagina. 276 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione. 277 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” Stiamo parlando dei "sottotitoli", ovvero delle trascrizioni testuali dei dialoghi. Tale funzionalità risulta inoltre utile nel caso il filmato sia in lingua straniera e l’utente non abbia una buona dimestichezza nell’ascoltare i dialoghi in tale lingua. Tra i contenuti equivalenti rientrano anche i contenuti audio descrittivi per le azioni video (Punto di controllo 1.3). Il punto di controllo 1.4 richiede la loro sincronizzazione. 278 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” Vengono generati in diverse modalità: QuickTime (Apple) SMIL – Syncronized Multimedia Integration Language (W3C) Microsoft SAMI (Synchronized Accessible Media Interchange) Linguaggi come SMIL consentono di creare i sottotitoli in differenti lingue e quindi rendono accessibile in modo potenzialmente universale i contenuti. 279 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” [Suona il telefono] Pina: Siiii? Casa Pupazzi. Chi parla? [persona al telefono]: PINAAA! So… sono Ugo! Cari Amici! Benvenuti a questo seminario tecnico… Paolo: Com'è possibile che anche oggi sei arrivata tardi! Carla: Scusami caro, è colpa dello sciopero dei bus. 280 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” È quindi necessario fornire: versione equivalente testuale per i dialoghi, dedicata a utenti non udenti o utenti con disabilità linguistiche; versione equivalente audio per i contenuti video, dedicata agli utenti non vedenti; 281 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” “Ingredienti”: Il documento multimediale in un formato supportato dall’utente (.avi, .mpg) Il documento RealText, QuickTimeText o SAMI. È possibile utilizzare dei programmi che consentono la generazione dei documenti di supporto, come MagPie. 282 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” 283 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” 284 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” Esempio con Real Player Codice SMIL 1.0 Codice RealText Codice pagina HTML 285 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <?xml version="1.0" encoding="UTF-8"?> <smil xmlns="http://www.w3.org/TR/REC-smil"> <head> <meta content="Ministro per L’Innovazione…" name="title"/> <meta content="Roberto Scano" name="author"/> <meta content="IWA/HWG" name="copyright"/> <layout> <root-layout width="330" height="295" background-color="black"/> <region top="5" width="320" height="200" left="5" background-color="black" id="videoregion"/> <region top="205" width="320" height="80" left="5" background-color="black" id="textregion"/> </layout> </head> <body> <par> <video region="videoregion" src="stanca.avi"/> <textstream region="textregion" src="stanca.it_IT.real.rt"/> </par> </body> </smil> 286 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <window bgcolor="#000000" wordwrap="true" duration="0:00:45.67" width="80" type="generic" extraspaces="use" > <font size="2" face="Arial" color="#FFFFFF" bgcolor="#000000"> <center> <time begin="00:00:04.68"/><clear/>Allora innanzitutto voglio rivolgere un saluto a tutti i partecipanti a questo importante convegno. <time begin="00:00:10.11"/><clear/> <time begin="00:00:10.12"/><clear/>Esprimere anche il mio rammarico per non essere con Voi a celebrare questa data cosi’ importante. <time begin="00:00:18.56"/><clear/> <time begin="00:00:18.57"/><clear/>Un anno fa, questo disegno di legge che oggi e' Legge dello Stato concludeva il suo percorso <time begin="00:00:28.40"/><clear/> ... </center> </font> </window> 287 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <object id="RM" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="320" height="200"> <param name="src" value="stanca.real.smil" /> <param name="controls" value="ImageWindow" /> <param name="console" value="Clip1" /> <param name="autostart" value="true" /> </object> <br /> <object id="RM" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="320" height="80"> <param name="src" value="stanca.real.smil" /> <param name="console" value="Clip1" /> <param name="controls" value="All" /> <param name="AutoStart" value="true" /> </object> Per garantire la gestione dell'esecuzione del contenuto i lettori multimediali di Real necessitano della creazione di due oggetti: • un oggetto contenente il video; • almeno un oggetto contenente i controlli di navigazione. Al fine della sincronizzazione, è necessario che gli oggetti abbiano lo stesso valore per l'attributo “id” dell'oggetto e per l'attributo “value” del parametro console. 288 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” Esempio con QuickTime Codice SMIL 1.0 Codice QTText Codice pagina HTML 289 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <?xml version="1.0" encoding="UTF-8"?> <smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions" xmlns="http://www.w3.org/TR/REC-smil" qt:time-slider="true"> <head> <meta content="Ministro per L’Innovazione e Tecnologie" name="title"/> <meta content="Roberto Scano" name="author"/> <meta content="IWA/HWG" name="copyright"/> <layout> <root-layout width="330" height="295" background-color="black"/> <region top="5" width="320" height="200" left="5" background-color="black" id="videoregion"/> <region top="205" width="320" height="80" left="5" background-color="black" id="textregion"/> </layout> </head> <body> <par> <video region="videoregion" src="stanca.avi"/> <textstream region="textregion" src="stanca.it_IT.qt.txt"/> </par> </body> </smil> 290 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” {QTtext}{timescale:100}{font:Arial}{size:18}{backColor:0,0,0} {textColor:65535,65535,65535}{width:320}{justify:center} [00:00:04.68] Allora innanzitutto voglio rivolgere un saluto a tutti i partecipanti a questo importante convegno. [00:00:10.11] [00:00:10.12] Esprimere anche il mio rammarico per non essere con Voi a celebrare questa data cosi' importante. [00:00:18.56] [00:00:18.57] Un anno fa, questo disegno di legge che oggi e' Legge dello Stato concludeva il suo percorso [00:00:28.40] 291 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <object id="QT" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="280"> <param name="src" value="stanca.qt.smil" /> <param name="autoplay" value="true" /> <param name="controller" value="true" /> <!--[if !IE]> <--> <object id="QT" data="stanca.qt.smil" type="video/quicktime" width="320" height="280"> <param name="autoplay" value="-1" /> <param name="controller" value="-1" /> </object> <!--> <![endif]--> </object> 292 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” Esempio con Windows Media Codice SAMI 1.0 Documento ASX Codice pagina HTML 293 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <SAMI> <HEAD> <STYLE TYPE="text/css"> <!-P { font-size: 18pt; font-family: Arial; font-weight: normal; color: #FFFFFF; background: #000000; text-align: center; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; } .Captions { Name: Captions; lang: IT_IT_CC; } #Source { font-size: 12pt; font-family: Arial; font-weight: normal; color: #FFFFFF; background: #000000; text-align: left; margin-bottom:-14pt; } --> </STYLE> </HEAD> <BODY> ... </BODY> </SAMI> 294 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <BODY> <SYNC Start="4677"> <P Class="Captions" ID="Source"> </P> <P Class="Captions">Allora innanzitutto voglio rivolgere un saluto a tutti i partecipanti a questo importante convegno.</P> </SYNC> <SYNC Start="10110"> <P Class="Captions" ID="Source"> </P> <P Class="Captions"> </P> </SYNC> <SYNC Start="10120"> <P Class="Captions" ID="Source"> </P> <P Class="Captions">Esprimere anche il mio rammarico per non essere con Voi a celebrare questa data cosi' importante.</P> </SYNC> <SYNC Start="18562"> <P Class="Captions" ID="Source"> </P> <P Class="Captions"> </P> </SYNC> <SYNC Start="18570"> <P Class="Captions" ID="Source"> </P> <P Class="Captions">Un anno fa, questo disegno di legge che oggi e' Legge dello Stato concludeva il suo percorso</P> </SYNC> <SYNC Start="28397"> <P Class="Captions" ID="Source"> </P> <P Class="Captions"> </P> </SYNC> ... </BODY> 295 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <ASX Version="3.0"> <AUTHOR>Prodotto da Roberto Scano - 14 Dicembre 2004</AUTHOR> <TITLE>Intervento del Ministro Lucio Stanca</TITLE> <PARAM name="Album" value="Ministro Innovazione e Tecnologie"/> <PARAM name="Artist" value="On. Lucio Stanca"/> <ENTRY> <REF HREF="stanca.avi?SAMI=stanca.smi" /> <AUTHOR>Prodotto da Roberto Scano - 14 Dicembre 2004</AUTHOR> <COPYRIGHT>IWA/HWG</COPYRIGHT> <TITLE>Intervento del Ministro Lucio Stanca</TITLE> <PARAM name="Album" value="Ministro Innovazione e Tecnologie"/> <PARAM name="Artist" value="On. Lucio Stanca"/> </ENTRY> </ASX> 296 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 Windows Media Player 6.4 – 7.x “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <object id="MP" width="320" height="280" classid="CLSID: 22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="URL" value="stanca.asx" /> <param name="ShowCaptioning" value="-1" /> <!--[if !IE]> <--> <object id="MP" type="application/x-mplayer2" width="320" height="280"> <param name="src" value="stanca.asx" /> <param name="showcontrols" value="-1" /> <param name="ShowCaptioning" value="-1" /> </object> <!--> <![endif]--> </object> 297 WCAG 1.0: Punto di controllo 1.4 http://www. w3.org/tr/wcag10 Windows Media Player 9 e successivi “Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.” <object id="MP" width="320" height="280" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="URL" value="stanca.asx" /> <param name="captioningID" value="cc" /> </object> <script FOR="MP" EVENT="ScriptCommand(type, param)"> if (type == "Text") { var cap = document.getElementById("cc"); cap.innerHTML = param; } </script> <div id="cc"> </div> 298 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm verificare la presenza contenuti multimediali; verificare la presenza di testi alternativi (requisito 3). verificare la presenza sottotitoli per i dialoghi e contenuti audio equivalenti per contenuti video; verificare la sincornizzazione tra il contenuto multimediale e le alternative testuali equivalenti; verificare la presenza di testi descrittivi / riassunti del contenuto. 299 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Identificati i contenuti multimediali dovrà verificare quindi la presenza dei documenti SAMI o SMIL e, ove presenti, verificarne il contenuto. Dovrà quindi verificare se il contenuto multimediale è importante per la fruibilità delle informazioni oppure se ha finalità di contorno. Nel primo caso, se i contenuti multimediali sono predisposti per l’esecuzione all’interno della pagina web è necessario verificare la conformità del codice della pagina (Requisito 1) confrontando il codice con gli esempi indicati per il punto di controllo 1.4 e controllando quindi l’effettiva sincronizzazione. 300 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzando la barra dell’accessibilità su “Informazioni”: Identifica documenti multimediali: apre una nuova finestra visualizzando i riferimenti ai documenti multimediali presenti nella pagina web. Configurare il proprio Media Player per eseguire i sottotitoli e visionare i contenuti. 301 Requisito numero 19 di 22 Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio contesto oppure associare ai collegamenti testi alternativi che possiedano analoghe caratteristiche esplicative, nonché prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine. Riferimenti WCAG 1.0: 13.1, 13.6 Riferimenti Sec. 508: 1194.22 (o) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 302 WCAG 1.0: Punto di controllo 13.1 http://www. w3.org/tr/wcag10 Identificare con chiarezza la destinazione di ogni collegamento. 303 WCAG 1.0: Punto di controllo 13.1 http://www. w3.org/tr/wcag10 “Identificare con chiarezza la destinazione di ogni collegamento.” Quando creiamo un collegamento ipertestuale (link) è necessario che il testo del collegamento abbia un senso. In una frase come la seguente: "Il testo del disegno di legge sull'accessibilità." può essere rappresentata con dei collegamenti in modalità diverse. 304 WCAG 1.0: Punto di controllo 13.1 http://www. w3.org/tr/wcag10 “Identificare con chiarezza la destinazione di ogni collegamento.” Collegamento troppo lungo "Clicca qui" è inadatto a chi usa la tastiera Soluzione accettabile 305 http://www. w3.org/tr/wcag10 WCAG 1.0: Punto di controllo 13.1 "title": descrive la pagina di destinazione Attributo “Identificare con chiarezza la destinazione di ogni collegamento.” Attributo "title": descrive la tipologia di file che si sta per scaricare Attributo "title": informa che si aprirà una nuova finestra 306 WCAG 1.0: Punto di controllo 13.6 http://www. w3.org/tr/wcag10 Raggruppare i collegamenti correlati, identificare i gruppi (per i programmi utente) e, fino a quando i programmi utente non lo consentiranno, fornire un modo per saltare il gruppo. 307 WCAG 1.0: Punto di controllo 13.6 http://www. w3.org/tr/wcag10 “Raggruppare i collegamenti correlati, identificare i gruppi (per i programmi utente) e, fino a quando i programmi utente non lo consentiranno, fornire un modo per saltare il gruppo.” Se i collegamenti sono raggruppati secondo una logica (esempio: le barre di navigazione) è possibile definire un collegamento ipertestuale che ne consenta il superamento. Così, anche gli utenti non vedenti potranno saltare la lettura di una parte del testo, proprio come qualsiasi utente vedente farebbe nel caso di ripetizione di testi. 308 WCAG 1.0: Punto di controllo 13.6 http://www. w3.org/tr/wcag10 “Raggruppare i collegamenti correlati, identificare i gruppi (per i programmi utente) e, fino a quando i programmi utente non lo consentiranno, fornire un modo per saltare il gruppo.” <map title="Barra di Navigazione" id="BarNav"> <p> <a href="#contenuto">Passa al Contenuto</a> <a href="/index.html">Pagina Iniziale</a> <a href="/prodotti.html">Prodotti</a> <a href="/about.html">Informazioni</a> <a href="/contatti.html">Contatti</a> </p> </map> <a name="contenuto" id="contenuto"></a> 309 WCAG 1.0: Punto di controllo 13.6 http://www. w3.org/tr/wcag10 “Raggruppare i collegamenti correlati, identificare i gruppi (per i programmi utente) e, fino a quando i programmi utente non lo consentiranno, fornire un modo per saltare il gruppo.” <div class="nascosto"> <a href="#contenuto">vai direttamente al contenuto</a> </div> .nascosto { width: 0; position: absolute; height: 0; overflow: hidden; top: -200em; } 310 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm identificare i collegamenti ipertestuali; verificare la leggibilità dei collegamenti ipertestuali e degli eventuali attributi “title”; verificare la presenza di aree ripetitive tra le varie pagine; verificare la presenza di codice di marcatura che consente di saltare le aree ripetitive. 311 Valutazione (rif. WCAG) Utilizzando la barra dell’accessibilità su “Informazioni”: http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Visualizza titoli. Consente di porre graficamente accanto ad ogni collegamento ipertestuale il contenuto dell’attributo title, al fine di controllarne la corretta affiliazione e la chiarezza (13.1). Elenco dei collegamenti ipertestuali (Nuova finestra). Visualizza un elenco dei collegamenti ipertestuali presenti nella pagina corrente con relativo titolo, url ed attributo title, ove presente (13.1). Seguendo le indicazioni del punto di controllo 13.6 l’esperto dovrà quindi verificare se nel codice della pagina web sono state inserite delle caratteristiche che consentono di saltare i collegamenti ipertestuali. 312 Requisito numero 20 di 22 Nel caso che per la fruizione del servizio erogato in una pagina è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare esplicitamente l’utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso. Riferimenti WCAG 1.0: 7.4, 7.5 Riferimenti Sec. 508: 1194.22 (p) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 313 WCAG 1.0: Punto di controllo 7.4 http://www. w3.org/tr/wcag10 Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente. 314 WCAG 1.0: Punto di controllo 7.4 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamen to, non creare pagine che si autoaggiornano periodicamente.” Vi sono siti web che forniscono contenuti con aggiornamento in tempo reale e che quindi richiedono un frequente aggiornamento dei contenuti (esempio: risultati elettorali, ultime notizie, ecc.). Per tale funzionalità si utilizza: <meta http-equiv="refresh" …. /> per definire automaticamente la frequenza di aggiornamento della pagina. 315 WCAG 1.0: Punto di controllo 7.4 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiorname nto, non creare pagine che si autoaggiornano periodicamente.” Il caricamento automatico a specifici intervalli di tempo (autoaggiornamento) della pagina può causare problemi a: Utenti che richiedono maggior tempo per leggere i contenuti di una pagina. Utenti che utilizzano lettori dello schermo troveranno fastidioso il caricamento automatico della pagina che li costringe a ricominciare la lettura dei contenuti. 316 WCAG 1.0: Punto di controllo 7.4 http://www. w3.org/tr/wcag10 Servirà avvisare gli utenti di questa funzionalità di autoaggiornamento della pagina in modo che almeno siano preparati all'evento. Ove non fosse possibile, è preferibile fornire un collegamento ad una versione alternativa senza autoaggiornamento. “Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornament o, non creare pagine che si autoaggiornano periodicamente.” 317 WCAG 1.0: Punto di controllo 7.4 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente.” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <title>Titolo Pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Refresh" content="60" /> </head> <body> </body> </html> 318 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente.” <% 'definisce il valore in secondi del refresh Dim aggiorna if request.form("aggiorna") = "" then aggiorna = 60 else aggiorna = request.form("aggiorna") end if %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <title>Titolo Pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Refresh" content="<%=aggiorna%>" /> </head> <body> <form action="miapagina.asp" method="post"> <label for="aggiorna">Aggiornamento:</label> <input type="text" id="aggiorna" value="<%=request.form("aggiorna")%>" /> <input type="submit" value="Conferma" /> </form> 319 http://www. w3.org/tr/wcag10 WCAG 1.0: Punto di controllo 7.5 Fino a quando i programmi utente non forniranno la capacità di bloccare l'autoreindirizzamento, non usare marcature per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti. 320 WCAG 1.0: Punto di controllo 7.5 Tale funzionalità può disorientare i navigatori del vostro sito web creando problemi di navigazione o fruizione… “Fino a quando i programmi utente …ad esempio la difficoltà di ritornare alla pagina non forniranno la precedente, o mancanza di tempo necessario a capacità di bloccare l'autoreindirizzament leggere le informazioni nella pagina “originaria”. http://www. w3.org/tr/wcag10 o, non usare marcature per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti.” 321 WCAG 1.0: Punto di controllo 7.5 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non forniranno la capacità di bloccare l'autoreindirizzamento , non usare marcature per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti.” <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <title>Titolo Pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Refresh" content="3; http://www.w3.org/" /> </head> <body> </body> </html> 322 WCAG 1.0: Punto di controllo 7.5 http://www. w3.org/tr/wcag10 “Fino a quando i programmi utente non forniranno la capacità di bloccare l'autoreindirizzamento , non usare marcature per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti.” I consigli che si possono dare agli sviluppatori sono i seguenti: configurare il server per utilizzare il codice HTTP 301 e relativi codici HTTP 30x; utilizzare dei normali collegamenti alla nuova pagina anziché delle funzionalità automatiche di redirect; evitare, ove possibile, l'utilizzo di tali tecnologie in quanto la navigazione deve essere sotto il totale controllo dell'utente. 323 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm identificare se la pagina prevede funzionalità di autoaggiornamento o autoreindirizzamento; verificare se sono presenti possibilità di configurare i tempi di autoaggiornamento e di autoreindirizzamento. 324 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzando la barra dell’accessibilità su “Informazioni”: Informazioni Metadata: Visualizza (in una nuova finestra) l'elenco di tutti gli elementi meta ed il relativo contenuto della pagina corrente. Se sono presenti, controllare che vi siano funzionalità nella pagina che consentono di variare il tempo di reindirizzamento. 325 Valutazione (rif. WCAG) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Aree riservate: controllare la disponibilità di funzioni che consentano all’utente di esser informato sulla durata della sessione utente ed eventualmente della presenza di funzionalità per personalizzare la durata della sessione. Questa ultima possibilità garantisce accessibilità ma può causare problemi di sicurezza in alcuni sistemi informatici. 326 Requisito numero 21 di 22 Rendere selezionabili e attivabili tramite comandi da tastiere o tecnologie in emulazione di tastiera o tramite sistemi di puntamento diversi dal mouse i collegamenti presenti in una pagina; per facilitare la selezione e l’attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta. Riferimenti WCAG 1.0: non presente Riferimenti Sec. 508: non presente http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 327 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Gli utenti con ridotta capacità motoria, che utilizzano comandi da tastiera, tecnologie in emulazione di tastiera o sistemi di puntamento alternativi, possono riscontrare difficoltà nella selezione e nell’attivazione dei collegamenti ipertestuali, e dei pulsanti dei moduli, quando questi sono eccessivamente ravvicinati. 328 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Questo vale anche per gli utenti con difficoltà cognitive legate alla lettura, ipovedenti, e, in generale, per tutte le categorie di utenti che sperimentano difficoltà di accesso a testi e ipertesti se non sono presenti idonee distanze tra i singoli elementi. Il requisito richiede di garantire la fruibilità dei collegamenti ipertestuali, e dei pulsanti dei moduli, impostando una distanza ragionevolmente ampia tra di essi, indicata in 0.5em. 329 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Le liste HTML (marcatori <ul>, <ol> e <li>) rappresentano il metodo corretto per codificare un elenco di collegamenti ipertestuali. L’elemento <ul> possiede un margine predefinito superiore e inferiore di 1.12em, un margine destro pari a 0 e il margine sinistro (lo spazio riservato ai glifi) pari a 40px. Queste distanze sono rispettate pressoché da tutti i browser (Mozilla Firefox non applica il margine sinistro, sostituendolo con il padding, e imposta i margini superiore e inferiore a 1em). 330 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Non sono previsti margini predefiniti tra le voci di una lista (elementi <li>), è infatti il glifo, posto a sinistra delle singole voci, ad indicarne l’inizio, mentre l’interlinea determina lo spazio verticale tra le righe del testo. 331 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Tutti i browser considerano 1.2 come il valore predefinito per l’interlinea del testo (tranne Mozilla Firefox che lo imposta, curiosamente, a 1.25). Nella sua prima stesura, il requisito indicava per le distanze il valore minimo di 1em. Questo valore era inteso dal legislatore come la misura minima dell’interlinea del testo. 1em è, però, un valore inferiore rispetto a quello predefinito dai browser per l’interlinea. Applicarlo, quindi, significherebbe ridurre la fruibilità delle liste di link verticali anziché incrementarla. l’interlinea non è evidentemente utilizzabile per distanziare le voci delle liste di link orizzontali, o i pulsanti dei moduli, e un valore minimo di 1em può risultare elevato se associato a proprietà diverse da essa, come per esempio il margine o il padding. Queste riflessioni hanno indotto il legislatore a ridurre il valore minimo a 0.5em non associandolo più all’interlinea del testo. 332 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm È il margine tra gli elementi, infatti, che va considerato come l’interpretazione corretta dei termini “distanza” e “spaziatura” presenti nell’enunciato del requisito. Il margine è applicabile sia ad entrambe le tipologie di liste di link, orizzontali e verticali, sia alle distanze tra i pulsanti di un modulo. 333 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm li { margin-top: 0.5em; margin-bottom: 0.5em; } 334 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Ricordiamo che i margini degli elementi <li> collassano. Ciò significa che due margini adiacenti non si sommano. Il valore applicato sarà quello più alto tra i due. Nell’esempio precedente i due valori sono identici quindi la misura ‘vincente’ è esattamente 0.5em. Qualora non fosse possibile utilizzare il margine per distanziare le voci delle liste di link, un risultato analogo si ottiene con la proprietà CSS padding. li { padding-top: 0.25em; padding-bottom: 0.25em; } 335 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm “le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em” Nonostante non sia esplicitamente indicato, è consigliabile considerare questa distanza minima come riferita non solo allo spazio esistente tra i pulsanti, siano essi affiancati orizzontalmente o posti su righe differenti, ma anche alla distanza tra i pulsanti e i campi dei moduli che li precedono o seguono. Non avrebbe molto senso, per gli scopi che si prefigge il requisito, distanziare due pulsanti tra di loro ma non in relazione al campo o all’area di testo (textarea) che eventualmente li precede o li segue. 336 Requisito numero 21 di 22 http://www. pubbliaccesso.it/ normative/ DM080705-A.htm “le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta ” È difficile da implementare, e valutare, a causa della mancanza di un riferimento oggettivo a un valore minimo. Il concetto di chiara leggibilità è estremamente soggettivo. Il consiglio è di non scendere mai sotto le dimensioni predefinite dai browser per i pulsanti dei moduli. 337 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Identificare i moduli (form) e i raggruppamenti di collegamenti ipertestuali. Identificare gli elementi e le classi associate ad essi. identificare se nel foglio di stile vi sono regole che riducono le distanze minime richieste dal requisito. 338 Valutazione http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Utilizzando la barra dell’accessibilità su “CSS”: Visualizza gli stili applicati (Nuova finestra): Visualizza gli stili associati al contenuto posizionato al di sotto del puntatore del mouse. Visualizza il foglio di stile (Nuova finestra): Visualizza il contenuto dei fogli di stile richiamati dalla pagina corrente. 339 Requisito numero 22 di 22 In sede di prima applicazione, per i siti esistenti, in ogni pagina che non possa essere ricondotta al rispetto dei presenti requisiti, fornire un collegamento a una pagina che li rispetti, contenga informazioni e funzionalità equivalenti e sia aggiornata con la stessa frequenza della pagina originale, evitando la creazione di pagine di solo testo. Il collegamento alla pagina accessibile deve essere proposto in modo evidente all'inizio della pagina non accessibile. Riferimenti WCAG 1.0: 11.4 Riferimenti Sec. 508: 1194.22 (k) http://www. pubbliaccesso.it/ normative/ DM080705-A.htm 340 WCAG 1.0: Punto di controllo 11.4 http://www. w3.org/tr/wcag10 Se, nonostante ogni sforzo, non è possibile creare una pagina accessibile, fornire un collegamento a una pagina alternativa che si riferisca alle tecnologie W3C, che sia accessibile, che contenga informazioni (o funzionalità) equivalenti e sia aggiornata con la stessa frequenza della pagina originale inaccessibile. 341 WCAG 1.0: Punto di controllo 11.4 Si parla di pagina, non di sito. Questo è particolarmente http://www. importante, in quanto le dichiarazioni di conformità alle w3.org/tr/wcag10 WCAG devono essere effettuate per singole pagine. “Se, nonostante ogni "Nonostante ogni sforzo..." significa che lo sviluppatore, sforzo, non è possibile dopo aver valutato l'uso di tutte le possibili soluzioni creare una pagina tecniche presentate nelle WCAG per rendere accessibile accessibile, fornire un collegamento a una un contenuto, alza le braccia e si arrende. Se ciò capita pagina alternativa che si per un intero sito web, con creazione di wai.nomesito.it, riferisca alle tecnologie W3C, che sia accessibile, dobbiamo forse chiederci: ma abbiamo scelto il che contenga fornitore adatto? informazioni (o funzionalità) equivalenti e sia aggiornata con la stessa frequenza della pagina originale inaccessibile.” 342 WCAG 1.0: Punto di controllo 11.4 Si parla di pagina alternativa "che usi le tecnologie W3C, http://www. sia accessibile, contenga informazioni (o funzionalità) e w3.org/tr/wcag10 equivalenti". Questo non sembra riscontrabile nei cosiddetti siti paralleli, in quanto molto spesso riportano “Se, nonostante ogni sforzo, non è possibile esclusivamente alcuni contenuti di tipo testuale che non creare una pagina sono "una pagina accessibile che usa le tecnologie accessibile, fornire un collegamento a una W3C“. pagina alternativa che si Si parla di aggiornabilità della pagina (non del sito). riferisca alle tecnologie W3C, che sia accessibile, che contenga informazioni (o funzionalità) equivalenti e sia aggiornata con la stessa frequenza della pagina originale inaccessibile.” 343 WCAG 1.0: Punto di controllo 11.4 http://www. w3.org/tr/wcag10 “Se, nonostante ogni sforzo, non è possibile creare una pagina accessibile, fornire un collegamento a una pagina alternativa che si riferisca alle tecnologie W3C, che sia accessibile, che contenga informazioni (o funzionalità) equivalenti e sia aggiornata con la stessa frequenza della pagina originale inaccessibile.” Riassumendo: il sito alternativo è sviluppato da persone che nonostante ogni sforzo di applicare le linee guida non sono stati capaci (forse per incompetenza) di creare nemmeno una pagina accessibile e hanno ripiegato su una versione solo testo ad alto contrasto per accontentare una fetta del mercato degli utenti con disabilità (in questo caso, limitatamente alla disabilità visiva). Quindi, chi nonostante tutto decide di creare la "porta di servizio" (con tutti i limiti che abbiamo già descritto) non può dirsi in linea con gli standard del Web, non potrà dire che sta seguendo le WCAG – e neppure la legge 04/2004. 344 WCAG 1.0: Punto di controllo 11.4 È bene chiarire che pagina alternativa non significa pagina visualizzata con diverso foglio di stile. Gli sviluppatori dovrebbero ricorrere a pagine “Se, nonostante ogni alternative solo quando le altre soluzioni falliscono sforzo, non è possibile creare una pagina perché le pagine alternative sono in genere meno accessibile, fornire un aggiornate delle pagine "primarie“. collegamento a una http://www. w3.org/tr/wcag10 pagina alternativa che si riferisca alle tecnologie W3C, che sia accessibile, che contenga informazioni (o funzionalità) equivalenti e sia aggiornata con la stessa frequenza della pagina originale inaccessibile.” 345 WCAG 1.0: Punto di controllo 11.4 Ipotizziamo un sito di un ente pubblico dove ogni ufficio http://www. inserisce dei contenuti in modo autonomo: se 100 w3.org/tr/wcag10 operatori inseriscono contenuti non accessibili che richiedono una versione parallela, il costo e le ore “Se, nonostante ogni sforzo, non è possibile lavorative saranno quantomeno raddoppiate e sempre creare una pagina con il dubbio che non tutte le pagine alternative siano accessibile, fornire un collegamento a una aggiornate. pagina alternativa che si La soluzione "solo testo", spesso utilizzata anche da siti riferisca alle tecnologie istituzionali, non è conforme a questo punto di controllo W3C, che sia accessibile, che in quanto non si tratta di pagina equivalente che utilizza contenga informazioni (o funzionalità) equivalenti le tecnologie W3C. e sia aggiornata con la stessa frequenza della pagina originale inaccessibile.” 346 WCAG 1.0: Punto di controllo 11.4 http://www. w3.org/tr/wcag10 “Se, nonostante ogni sforzo, non è possibile creare una pagina accessibile, fornire un collegamento a una pagina alternativa che si riferisca alle tecnologie W3C, che sia accessibile, che contenga informazioni (o funzionalità) equivalenti e sia aggiornata con la stessa frequenza della pagina originale inaccessibile.” Una pagina non aggiornata può essere frustrante quanto una pagina inaccessibile visto che, in entrambi i casi, l'informazione presentata nella pagina originale non è disponibile. Prima di ricorrere a una pagina alternativa, riesaminare il progetto della pagina originale… …è probabile che rendendola accessibile essa risulti migliore per tutti gli utenti. ATTENZIONE: questa soluzione è consentita SOLO in fase di prima applicazione della normativa. 347 Compiti del valutatore http://www. pubbliaccesso.it/ normative/ DM080705-A.htm Identificare dei collegamenti nella pagina che consentono l’accesso a versioni parallele del tipo “Versione accessibile”, “Versione WAI”, ecc. Analizzare tale pagina rispetto i 21 requisiti presentati in precedenza. 348 Risorse utili Siti internet www.pubbliaccesso.it www.w3c.org www.webaccessibile.org www.diodati.org www.webaim.org Liste di discussione in lingua italiana [email protected] [email protected] www.diodati.org/forum 349