22 requisiti legge 4/2004 (legge stanca)

1

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.

I requisiti tecniciper i siti internetdella legge 04/2004

2

Legge 04/2004 dalla teoria alla realtà (ISBN: 88-7633-099-2) Sconto 20% sul prezzo di copertina ai partecipanti al seminario (ogni partecipante riceverà una e-mail con indirizzo web per ordinare il libro). Il manuale per applicare e verificare i requisiti della legge 04/2004. Contiene una serie di modelli per l’autovalutazione dei siti INTERNET.

Legge 04/2004 dalla teoria alla realtà

Messaggio promozionale

3

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.

Accessibilità: dalla teoria alla realtà

Messaggio promozionale

4

Requisiti tecnici L. 04/2004:Carta d’identità

“Requisiti tecnici e i diversi livelli per l'accessibilità agli strumenti informatici”

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

http://www.pubbliaccesso.it/normative/DM080705.htm

5

Requisiti tecnici L. 04/2004:Il Decreto Ministeriale

Contenuto del decreto

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


6

Requisiti tecnici L. 04/2004:Il Decreto Ministeriale

Contenuto del decreto

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)


7

Requisiti tecnici L. 04/2004:Articolo 1 - Definizioni e ambito d'applicazione

a) 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;

b) ambiente operativo: insieme di programmi e di interfacce utente che consentono l'utilizzo delle risorse hardware e software disponibili sul computer;

c) applet: programma autonomo, in genere scritto in linguaggio Java, che può essere inserito in una pagina Web per fornire informazioni o funzionalità;

d) applicazione: programma informatico che consente all'utente di svolgere specifici compiti;

e) 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;

f) browser: programma informatico che consente di accedere alle risorse presenti su un sito Web;


Art. 1

8


g) CD-ROM (Compact Disc - Read Only Memory) e DVD (Digital Versatile Disc): particolari tipi di supporto ottico di memorizzazione;

h) em: unità di misura tipografica che prende a riferimento la larghezza del carattere M;

i) 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;

l) 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;

m) esperto tecnico: soggetto esperto in tecnologie Web e problematiche dell'accessibilità;

n) focus: elemento attivo in un'interfaccia utente;


Art. 1

9


o) 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;

p) frame: struttura di una pagina Web costituita da due o più parti indipendenti;

q) 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;

r) gestore di evento: parte di programma informatico che si attiva al verificarsi di un evento logico o dipendente dal dispositivo di input;

s) gruppo di valutazione: gruppo di utenti, anche disabili, che svolgono compiti assegnati dall'esperto di fattori umani per l'effettuazione della verifica soggettiva;

t) homepage: prima pagina che viene resa disponibile all'utente quando si accede a un indirizzo corrispondente a un sito Web;

u) interattività: caratteristica del programma informatico che richiede l'intervento dell'utente per espletare le sue funzionalità;


Art. 1

10


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);

z) interfaccia di programmazione (API, Application Program Interface): insieme di programmi che consentono ad applicazioni diverse di comunicare tra loro;

aa) Internet: rete mondiale di computer basata sulla famiglia di protocolli di comunicazione TCP/IP (Transmission Control Protocol/Internet Protocol);

ab) Intranet: rete di computer basata sugli stessi protocolli di Internet, riservata all'uso esclusivo di una organizzazione, o gruppo di utenti;

ac) 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;

ad) linguaggio a marcatori: modalità di rappresentazione delle informazioni che utilizza indicatori (marcatori) per qualificare l'informazione stessa;


Art. 1

11


ae) moduli di interazione o form: strumenti mediante i quali l'utente interagisce con il sito Web fornendo e ricevendo specifiche informazioni;

af) pagina Web: elemento informativo di base di un sito Web, realizzato mediante un linguaggio a marcatori che può contenere oggetti testuali e multimediali ed immagini;

ag) prodotti a scaffale: applicazioni preconfezionate da utilizzarsi anche senza sviluppare appositi programmi di adattamento;

ah) regolamento: decreto del Presidente della Repubblica 1° marzo 2005, n. 75, pubblicato nella Gazzetta Ufficiale n. 101 del 3 maggio 2005;

ai) script: sequenza di istruzioni in linguaggio di programmazione che può essere inserita in una pagina Web per fornire funzionalità aggiuntive;

al) sito Web: insieme strutturato di pagine Web utilizzato per veicolare informazioni o erogare servizi, comunemente definito anche sito Internet;

am) 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;


Art. 1

12


an) 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 informatici;

ao) tecnologie Web: insieme degli standard definiti dall'ISO e delle «Recommendation» del Consorzio W3C finalizzato a veicolare informazioni o erogare servizi su reti che utilizzano il protocollo HTTP, comunemente definite anche tecnologie Internet;

ap) verifica tecnica: valutazione condotta da esperti, anche con strumenti informatici, sulla base di parametri tecnici;

aq) 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.


Art. 1

13

Requisiti tecnici L. 04/2004:Articolo 2 - Requisiti tecnici e livelli di accessibilità

1. 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.

2. 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.

3. 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 CD-ROM, DVD, utilizzabili anche in caso di personal computer non collegato alla rete.

4. 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.


Art. 2

14

Requisiti tecnici L. 04/2004:Articolo 3 - Accessibilità per i personal computer, l'ambiente operativo, le applicazioni e i prodotti a scaffale

1. I requisiti di accessibilità per i personal computer sono indicati nell’allegato C.

2. I requisiti di accessibilità per l’ambiente operativo, le applicazioni ed i prodotti a scaffale sono indicati nell’allegato D.

3. Il soggetto produttore o fornitore dichiara il livello di conformità del prodotto o servizio ai requisiti di cui al presente articolo.


Art. 3

15

Requisiti tecnici L. 04/2004:Articolo 4 - Specifiche tecniche per la sussistenza dei requisiti dei soggetti valutatori

1. 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.

2. 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) esperto di fattori umani,b) esperto tecnico,c) esperto di interazione con i soggetti disabili,d) gruppo di valutazione.


Art. 4

16

Requisiti tecnici L. 04/2004:Articolo 5 - Svolgimento delle verifiche e determinazione degli importi massimi dovuti dai soggetti privati

1. 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.

2. Nella verifica tecnica l’esperto tecnico, applicando la metodologia di cui all’allegato A, paragrafo 2:a) svolge le attività previste alla lettera a) del medesimo

paragrafo 2 su tutte le pagine del sito;b) 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;

c) redige il rapporto di cui alla lettera e) del medesimo paragrafo 2.


Art. 5

17

Requisiti tecnici L. 04/2004:Articolo 5 - Svolgimento delle verifiche e determinazione degli importi massimi dovuti dai soggetti privati

3. 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.

4. 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.


Art. 5

18

Requisiti tecnici L. 04/2004:Articolo 6 - Logo attestante il possesso del requisito di accessibilità

1. 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

19

Requisiti tecnici L. 04/2004:Articolo 7 – Utilizzo del logo

1. 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.

2. 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.

3. 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.


Art. 7

20

Requisiti tecnici L. 04/2004:Articolo 7 – Utilizzo del logo

4. Ai fini del rilascio o del rinnovo dell’autorizzazione ad esporre il logo, il Cnipa provvede a:

a) predisporre una sezione del proprio sito Web per ricevere le richieste di registrazione;

b) acquisire la richiesta di autorizzazione di cui al comma 1 e la documentazione di cui al comma 3;

c) 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;

d) riferire gli esiti dell’istruttoria alla Presidenza del Consiglio dei Ministri – Dipartimento per l’innovazione e le tecnologie.

5. 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.


Art. 7

21

Requisiti tecnici L. 04/2004:Articolo 8 – Rimborso delle spese amministrative sostenute dalla Presidenza del Consiglio dei Ministri per le attività inerenti l’utilizzo del logo e le funzioni ispettive

1. 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.

2. 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.

3. 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.


Art. 7

22

Requisiti tecnici L. 04/2004:Gli allegati

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.


23

Requisiti tecnici L. 04/2004:Gli allegati

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.


24

Requisiti tecnici L. 04/2004:Allegato A - Premessa

La definizione dei requisiti tecnici di accessibilità nonché l’articolazione delle attività previste per la verifica tecnica sono stabilite sulla base di:

a) quanto indicato nelle Recommendation del World Wide Web Consortium (W3C) ed in particolare in quelle del progetto Web Accessibility Initiative (WAI);

b) standard definiti nel paragrafo 1194.22 della Sezione 508 del Rehabilitation Act degli USA;

c) standard e specifiche tecniche definite in materia di accessibilità dalla International Organization for Standardization (ISO);

d) 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.

http://www.pubbliaccesso.it/normative/DM080705-A.htm

Paragrafo 1

25

Requisiti tecnici L. 04/2004:Allegato A - Metodologia per la verifica tecnica

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;


Paragrafo 2

26


c) esame della pagina con varie versioni di diversi browser grafici in vari sistemi operativi allo scopo di verificare che:1) il contenuto informativo e le funzionalità presenti in una pagina siano gli

stessi nei vari browser; 2) 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;

3) il contenuto informativo e le funzionalità della pagina siano ancora fruibili in caso di disattivazione del caricamento delle immagini;

4) i contenuti informativi di eventuali file audio siano fruibili anche in forma testuale;

5) i contenuti della pagina siano fruibili in caso di utilizzo delle funzioni previste dai browser per definire la grandezza dei caratteri;

6) la pagina sia navigabile con il solo uso della tastiera e l’impiego di una normale abilità;

7) 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;

8) 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;


Paragrafo 2

27


d) verifica delle differenze di luminosità e di colore tra il testo e lo sfondo secondo i seguenti algoritmi:

1) 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.

2) 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;

e) 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.


Paragrafo 2

28

Requisiti tecnici L. 04/2004:Allegato A - Programmi di valutazione assistita

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.w3.org/WAI/ER/existingtools.html#Evaluation


Paragrafo 3

29

Requisiti tecnici L. 04/2004:Allegato A - Requisiti di accessibilità per i siti Internet

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.


Paragrafo 4

30

Requisiti tecnici L. 04/2004:I requisiti: INTERNET (requisito 1)

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


31



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;


32



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:


33


Per i siti esistenti

1. 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;

2. evitare la generazione di nuove finestre; ove ciò non fosse possibile, avvisare esplicitamente l'utente del cambiamento del focus;

3. 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.


34


WCAG 1.0: Punto di controllo 3.1

Quando esiste un linguaggio di marcatura adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.

http://www.w3.org/tr/wcag10

35



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.


“Quando esiste un linguaggio di marcatura adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.”

36



Vi sono gruppi di lavoro nel W3C che stanno definendo una serie di linguaggi di marcatura (es: MathML) e stanno nascendo diversi linguaggi di marcatura basati su XML per la chimica (ChemML) e per le altre scienze.

Utilizzando XML le formule sono di facile interpretazione sia per le tecnologie assistive che per le applicazioni matematiche (esempio: MathML Player)

E' comunque necessaria la presenza di plug-in per la corretta visualizzazione.



37





<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>

38



Creare documenti che rispettino le grammatiche formali.


39



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.


“Creare documenti che rispettino le grammatiche formali.”

40


WCAG 1.0: Punto di controllo 3.2 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.



41



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.



42



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.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

43


Legge 04/2004

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).



44


Esempio di DOM injection



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>

45


Legge 04/2004 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.



46



Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.


47



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”


“Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.”

48



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>.



49



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.



50





<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>

51



Marcare le liste ed elencare le voci della lista in modo appropriato.


52



Gli elementi di lista <dl>, <ul> e <ol> devono essere utilizzati solo per la definizione delle liste.

Non devono servire per la formattazione (esempio: rientro del testo) ma per elencare.

Per modificare la formattazione delle liste, utilizzare i fogli di stile.


“Marcare le liste ed elencare le voci della lista in modo appropriato.”

53





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>

54



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.



55





<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>

.fine { width:0; position:absolute; height:0; overflow:hidden; top:-200em; }

56



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>

57



Considerando che per le liste ordinate l'utilizzo degli attributi compact, start e type è stato deprecato, è possibile aggirare il problema usando CSS2, che permette di definire il formato di auto numerazione delle liste (1, 1.1, 1.1.1, ecc.).



58



Questa specifica contenuta nella raccomandazione CSS 2.0 attualmente non risulta supportata dai browser, ad eccezione di Opera.



ul { counter-reset: item; } li { display: block; } li:before { content: counters(item, "."); counter-increment: item; }

59



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>)



60





<dl><dt>SEO</dt><dd><span xml:lang="en">Search Engine

Optimizers</span>, ovvero gli esperti di posizionamento nei motori di ricerca.</dd>

</dl>

61



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>.



<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>

62


Legge 04/2004 Evitare la creazione di lunghi elenchi con le liste,

in quanto rendono il sito di difficile utilizzo danneggiandone inoltre l'usabilità seguendo l’indicazione per cui un utente non riesce a memorizzare contemporaneamente più di 7±2 collegamenti oppure fornire soluzioni per saltare i collegamenti (requisito 19).

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.



63



Marcare le citazioni.http://www.w3.org/tr/wcag10

64



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.


“Marcare le citazioni.”

65



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.



66



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>

67



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.



68



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).



<blockquote cite="http://www.w3.org/TR/WCAG10-HTML- TECHS/#text-quotes">

<p> Do not use quotation markup for formatting

effects such as indentation. [Priority 2]</p>

</blockquote>

69



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.



<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>

70



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.


71



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/).


“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.”

72



Evitare l’utilizzo di tecnologie disapprovate dal W3C.


73



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.


“Evitare l’utilizzo di tecnologie disapprovate dal W3C.”

74



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.


“Evitare l’utilizzo di tecnologie disapprovate dal W3C.”

75


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.


76


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).


77



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).


78



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).


79



Utilizzare la barra per l’accessibilità, menu “Codice” (11.2):

Elementi HTML deprecati: Visualizza gli elementi deprecati nell'HTML 4.0.


80



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)


81



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:


82


Requisito numero 2 di 22 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.


83



Assegnare un titolo a ogni frame per facilitarne l'identificazione e la navigazione.


84



Alcuni programmi utente non possono accedere a più frame contemporaneamente o possono essere configurati esclusivamente per visualizzare un solo frame Esempio: le applicazioni software di

supporto per gli utenti non vedenti, alcuni modelli di palmare, chioschi informativi, ecc.


“Assegnare un titolo a ogni frame per facilitarne l'identificazione e la navigazione.”

85



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.



86





<!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>

87



Descrivere lo scopo dei frame e il modo in cui questi interagiscono se non è evidente solo tramite i titoli dei frame.


88



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.


“Descrivere lo scopo dei frame e il modo in cui questi interagiscono se non è evidente solo tramite i titoli dei frame.”

89




“Descrivere lo scopo dei frame e il modo in cui questi interagiscono se non è evidente solo tramite i titoli dei frame.”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<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>

90



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.


91



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).


92



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)


93



Fornire un equivalente testuale per ogni elemento non di testo.


94



È 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.


“Fornire un equivalente testuale per ogni elemento non di testo.”

95


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.



96



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=“”



<img src="grafico.jpg" alt="Grafico vendite 2002" />

97



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.



98



L’attributo “longdesc” non è obbligatorio. Non tutti i browser 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]"



<img src="grafico.jpg" alt="Grafico vendite 2002" longdesc="grafico-2002.html" />

99



L’uso di [D] Link è stato deprecato nelle attuali tecniche di applicazione per le WCAG 2.0.



<img src="grafico.jpg" alt="Grafico vendite 2002" longdesc="grafico-2002.html" />

<a href="grafico-2002.html" title="Descrizione estesa">[D]</a>

100


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.



101



Il lettore di schermo leggerebbe tre volte di seguito “Pallino decorativo”…



<img src="pallino.jpg" alt="Pallino decorativo" />... <img src="pallino.jpg" alt="Pallino decorativo" />...<img src="pallino.jpg" alt="Pallino decorativo" />...

102



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, ...)



103


WCAG 1.0: Punto di controllo 1.1(MAPPE IMMAGINE)

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.



104



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>.



105



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.



<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>

106


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.



107



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.



108



Esempio di codice deprecato.



<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>

109



Esempio di codice non valido.



<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>

110



Esempio di codice accessibile Per l’uso cross-browser sono necessari i commenti IE

(vediamo in seguito).



<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>

111


WCAG 1.0: Punto di controllo 1.1(FRAME)

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.



112


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".



113


WCAG 1.0: Punto di controllo 1.1(PULSANTI)http://www.

w3.org/tr/wcag10


<form action="submit" method="post"> <input type="image" src="cerca.gif" name="ricerca"

id="ricerca" alt="Cerca" /></form>

114


WCAG 1.0: Punto di controllo 1.1(SCRIPT)

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.



115


WCAG 1.0: Punto di controllo 1.1(SCRIPT)

<noscript> è utilizzato dai programmi utente che NON supportano gli script: un utente con tecnologia assistiva potrebbe non fruire di questo contenuto equivalente.



<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>

116


WCAG 1.0: Punto di controllo 1.1(ARTE ASCII)http://www.

w3.org/tr/wcag10


"The use of text characters to build images and pictures. For example,":-)" (smiley face emoticon) and using [ ] around links can beconsidered to be ASCII art. Avoid using text characters as substitutegraphics, icons or glyphs."

RNIB (Royal National Institute of Blind)

117


WCAG 1.0: Punto di controllo 1.1(ARTE ASCII)http://www.

w3.org/tr/wcag10


<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>

118



Garantire che all'aggiornamento dei contenuti dinamici vengano aggiornati anche i contenuti equivalenti.


119



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.


“Garantire che all'aggiornamento dei contenuti dinamici vengano aggiornati anche i contenuti equivalenti.”

120


WCAG 1.0: Punto di controllo 6.2 È quindi necessario fornire una versione

alternativa in HTML che consenta a queste categorie di utenti di accedere ai contenuti. Questa versione dovrebbe restare

nascosta per utenti che invece dispongono delle tecnologie per la corretta visualizzazione dei contenuti.

Utilizzando l'elemento <object> nel caso non sia disponibile il supporto a tale oggetto sarà reso disponibile il contenuto alternativo, il tutto configurabile a cascata.



121



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).



<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>

122



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.


123



Utilizzare il W3C Markup Validator per controllare la mancanza dei testi “alt” (1.1)

Utilizzare la barra per l’accessibilità, menu “Immagini” (1.1):

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.


124



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.


125



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.


126



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)


127



Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori.


128



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.


“Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori”

129



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.



130



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>.



131



Per ogni informazione legata al colore (es. area attiva / menu selezionato) è necessario dare anche informazioni testuali equivalenti, usando ad esempio l’attributo title.



<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>

132



verificare la presenza di informazioni legate a specifici colori.


133



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).


134



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)


135



Fino a quando i programmi utente non permetteranno agli utenti di controllare lo sfarfallio, evitare di far sfarfallare lo schermo.


136



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.


“Fino a quando i programmi utente non permetteranno agli utenti di controllare lo sfarfallio, evitare di far sfarfallare lo schermo.”

137



Fino a quando i programmi utente non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto.


138



Alcune tecnologie assistive, come ad esempio i lettori di schermo, hanno difficoltà di interazione con i testi lampeggianti. 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


“Fino a quando i programmi utente non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto.”

139



L'utilizzo dell’elemento <blink> non consente una validazione del codice secondo le raccomandazioni W3C HTML 4.0x / XHTML 1.x.

A livello di raccomandazioni W3C, è disponibile un attributo CSS: "text-tecoration: blink" (deprecato nelle techniques).


“Fino a quando i programmi utente non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto.”

140



Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.


141



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.


“Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.”

142



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.



143



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.



144



verificare la presenza di scritte animate o lampeggianti.

verificare la presenza immagini animate (gif) misurandone la frequenza.


145



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).


146



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).


147



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


148



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.


Per le immagini

Per i testi

149



È evidente che colori chiari su fondo chiaro oppure colori scuri su fondo scuro non sono la scelta adatta.


“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.” TESTO TESTO

150


WCAG 1.0: Punto di controllo 2.2 Due colori sono in grado di fornire una buona

visibilità di colore se la differenza di luminosità e la differenza di colore è maggiore di una soglia stabilita.

Il livello minimo stabilito dal W3C è 125 per la differenza fra le luminosità e 500 per quella fra i colori.

Hewlett Packard (HP) fornisce uno strumento di verifica del contrasto fra colori che utilizza gli algoritmi del W3C, ma fissa il livello minimo di differenza di colore a 400, il che aumenta il numero di combinazioni sfondo/primo piano considerate accettabili.


“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.”

151



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.



152


WCAG 1.0: Punto di controllo 2.2 Formula della differenza dei Colori

La differenza di colore è determinata dalla seguente formula:(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))

La differenza fra il colore di sfondo e quello di primo piano deve risultare maggiore di 500.



153



Esistono moltissime varianti di disabilità legate al colore



Normale Deficit colore blue

Deficit colore verde Deficit colore rosso

154



È 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" />

155



verificare il contrasto dei colori nel foglio di stile;

verificare il contrasto dei colori per le immagini e gli oggetti presenti nella pagina.


156



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).


157



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)


158



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.


159



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.


“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.”

160



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.


“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.”

161



verificare la presenza di mappe immagine sensibili lato server.


162



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.


163



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)


164



Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.


165



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”.


“Fornire collegamenti di testo ridondanti per ogni zona attiva di una mappa immagine sul lato server.”

166



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.



167



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.



168



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]



<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>

169



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.



170



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.


171



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).


172



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)


173



Per le TABELLE DATI, identificare le intestazioni per righe e colonne.


174



Per le tabelle dati è necessario utilizzare gli elementi <tr> <td> <th> <caption>

con i loro relativi attributi


“Per le TABELLE DATI, identificare le intestazioni per righe e colonne.”

175



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.



176



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).



177



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.



178





<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>

179



Per istruire il lettore dello schermo alla corretta lettura dei contenuti utilizzare: l’attributo “id” per ogni cella di

intestazione. l’attributo“headers”, che specifica

l'elenco delle intestazioni collegate ad una cella contenente dati.



180




<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>

181



Il lettore dello schermo (screen reader) leggerà il testo come segue:



Caption: Caffè consumato da ogni onorevoleSummary: 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: NoNome: C. Campa, Tazze: 5, Tipo: Decaffeinato, Zucchero: Sì

182



Per ogni tabella definire un sommario dei contenuti.


183



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.


“Per ogni tabella definire un sommario dei contenuti.”

184



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.


“Per ogni tabella definire un sommario dei contenuti.”

<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>

185



Fornire abbreviazioni per le etichette di intestazione.


186



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.


“Fornire abbreviazioni per le etichette di intestazione.”

<th id="tipo" abbr="Tipo">Tipo di caffè</th>

187



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.


188



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.


189



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)


190



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.


191



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.


“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.”

192




“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.”

<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>

<tfoot> <tr> <td colspan="4">Aggiornata al 27 maggio 2005</td> </tr></tfoot>

<tbody> <tr> <td headers="affiliazione nominativo">Bianchi Michele</td> <td headers="affiliazione ufficio">Amministrazione</td> <td headers="descrizione tipologia">Carburante</td> <td headers="descrizione importo">250,00</td> </tr>

<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>

193



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.


194



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.


195



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)


196



Usare i fogli di stile per controllare l'impaginazione e la presentazione.


197



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).


“Usare i fogli di stile per controllare l'impaginazione e la presentazione.”

198



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.



199





200



Organizzare i documenti in modo che possano essere letti anche in assenza dei fogli di stile.


201



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.


“Organizzare i documenti in modo che possano essere letti anche in assenza dei fogli di stile.”

202



Il testo è stato generato e posizionato con i fogli di stile, definendo quattro blocchi di testo tramite l’elemento <div>:



<div class="parte1">The quick</div><div class="parte2">brown fox</div><div class="parte3">jumped over</div><div class="parte4">the lazy dogs.</div>

203





.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 }

The quickbrown foxjumped overthe lazy dogs.

204



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.


205



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).


206



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).


207



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


208



Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile.


209



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.)


“Usare unità relative anziché assolute nei valori degli attributi del linguaggio e per i valori delle proprietà del foglio di stile.”

210



Unità di misura di tipo assoluto: Pica (pc) Punti (pt) Inches (in) Centimetri (cm) Millimetri (mm)

Mantengono sempre la stessa dimensione.



211



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)



212





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;}

213



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.


214



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).


215



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).


216



Utilizzare Browsercam.com per testare la visualizzazione dei contenuti per: tipo di browsersistema operativo risoluzione video


217


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.


218


Nelle tecniche di applicazione dei CSS per le WCAG 2.0 è chiarito definitivamente il problema [http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-CSS-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".


219


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.


220



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


221



Non usare le TABELLE PER IMPAGINAZIONE a meno che la tabella non sia comprensibile se linearizzata.


222



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.


“Non usare le TABELLE PER IMPAGINAZIONE a meno che la tabella non sia comprensibile se linearizzata.”

223



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.


“Non usare le TABELLE PER IMPAGINAZIONE a meno che la tabella non sia comprensibile se linearizzata.”

<table summary="Struttura della tabella"> <tr>

<td>Colonna 1</td><td>Colonna 2</td>

</tr></table>

224



Se si utilizza una TABELLA DI IMPAGINAZIONE non utilizzare alcun marcatore di struttura a scopo di formattazione.


225



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.


“Se si utilizza una TABELLA DI IMPAGINAZIONE non utilizzare alcun marcatore di struttura a scopo di formattazione.”

226



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.


227




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.


228



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).


229



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)


230



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.


231



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).


“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.”

232



Implicitohttp://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.”

<label>Nome Utente: <input type="text" size="20" value="Nominativo..." name="utente" id="utente" /></label>

233



Associare esplicitamente le etichette ai loro controlli.


234



Esplicito (tramite attributo “for”)http://www.w3.org/tr/wcag10

“Associare esplicitamente le etichette ai loro controlli.”

<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>

235


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>.



236





<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>

237





<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>

238





<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>

239





<tr> <td><label for="note">Annotazioni:</label></td> <td> <textarea rows="2" cols="70" name="note" id="note"></textarea> </td></tr>

240



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".



241



È necessario utilizzare l'elemento <label> in modo esplicito tramite l'attributo for che deve corrispondere all'attributo "id" dell'elemento interno al modulo.



242



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>.


243




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).


244



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)


245



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.


246



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:


“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.” <a href="javascript:history.go(-1)">

Pagina Precedente</a>

247



Per ottenere particolari risultati spesso si ricorre a DHTML (combinando JavaScript, CSS e HTML). 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.


“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.”

248



Per le applet e gli altri oggetti di programmazione, rispettare le regole di sviluppo previste per il requisito 3.

Nel caso non sia possibile rendere accessibile il contenuto, creare una pagina accessibile equivalente nelle funzionalità e nelle informazioni fornite all’utente (req. 22).


“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.”

<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>

249



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.


250



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).


251



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)


252



Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.


253



Un gestore di eventi (event handler) è un insieme di istruzioni che vengono richiamate quando un particolare "evento" viene soddisfatto.


“Garantire che i gestori di eventi per gli script e le applet siano indipendenti dai dispositivi di input.”

onload onunload onclick ondblclickonfocus

onmousedown onmouseup onmouseover onmousemove onmouseout

254



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).



255



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.



256


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.



257



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.



<a href="nuova.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;"> Nuova Pagina</a>

258



Garantire che ogni elemento dotato di una sua specifica interfaccia possa essere gestito in una modalità indipendente dal dispositivo.


259



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).


“Garantire che ogni elemento dotato di una sua specifica interfaccia possa essere gestito in una modalità indipendente dal dispositivo.”

260



Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti dal dispositivo.


261



Questo punto di controllo può definirsi una accentuazione di quanto richiesto dal punto di controllo 6.4.

Ricordiamo che i comandi tastiera vengono spesso utilizzati per le tecnologie assistive e possono essere attivati anche tramite comandi vocali.


“Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti dal dispositivo.”

262



verificare la presenza di script, applet e oggetti di programmazione;

verificare la presenza di eventi dipendenti dal dispositivo di input.


263



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).


264



Visualizza un simbolo di avvertimento accanto ad un elemento, se l'elemento:

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.

Visualizza un simbolo di informazione accanto ad un elemento, se:

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.


265



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)


266



Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.


se importante

267



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.).


“Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.”

268


WCAG 1.0: Punto di controllo 8.1 Se una applet (creata con l'elemento <object>

in quanto l'elemento <applet> non fa parte delle raccomandazioni del W3C) richiede l'iterazione con l'utente (per esempio la facoltà di inserire delle informazioni per effettuare dei calcoli) e queste funzionalità non possono esser rese disponibili in una versione alternativa è necessario rendere l'applet accessibile.

Se l'interfaccia (navigazione ed interazione con gli elementi) non può esser resa accessibile, è necessario predisporre una versione alternativa accessibile.



269



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.



270



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.

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.


“Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.” AccessibleContext context = email.getAccessibleContext();

context.setAccessibleName("Email");context.setAccessibleDescription("Indirizzo e-mail");

271



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.


“Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.” ' Associa una etichetta ad un componente

JLabel label = new JLabel("Nome Utente:");label.setDisplayedMnemonic('U');label.setLabelFor(username);

' Valore mnemonico per un menuJMenu menu = new JMenu("File");menu.setMnemonic('F');

' Tasto di scelta rapida per una voce di menuJMenuItem item = new JMenuItem("Apri");item.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_O, KeyEvent.SHIFT_MASK));

272



verificare l’accessibilità dell’oggetto.


273



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.).


274



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 sotto-titolazione 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)


275



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.


276



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.


“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.”

277



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.


“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.”

278



Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.


279



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.


“Per ogni presentazione multimediale temporizzata, sincronizzare le alternative equivalenti con la presentazione.”

280



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.



281





[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 seiarrivata tardi!

Carla: Scusamicaro, è colpadello scioperodei bus.

282



È 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;



283



“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.



284





285




286



Esempio con Real Player Codice SMIL 1.0 Codice RealText Codice pagina HTML



287





<?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>

288





<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>

289





<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.

290



Esempio con QuickTime Codice SMIL 1.0 Codice QTText Codice pagina HTML



291





<?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>

292





{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]

293





<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" />



<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>



</object>

294



Esempio con Windows Media Codice SAMI 1.0 Documento ASX Codice pagina HTML



295




<SAMI> <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY>...</BODY></SAMI>

296




<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 questadata 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>

297





<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>

298



Windows Media Player 6.4 – 7.xhttp://www.w3.org/tr/wcag10


<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" />

 <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>

</object>

299



Windows Media Player 9 e successivihttp://www.w3.org/tr/wcag10


<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>

300



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.


301



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.


302



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.


303



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)


304



Identificare con chiarezza la destinazione di ogni collegamento.


305



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.


“Identificare con chiarezza la destinazione di ogni collegamento.”

306





Collegamento troppo lungo

"Clicca qui" è inadatto a chi usa la tastiera

Soluzione accettabile

307


WCAG 1.0: Punto di controllo 13.1http://www.w3.org/tr/wcag10


Attributo "title": descrive la pagina di destinazione

Attributo "title": descrive la tipologia di file che si sta per scaricare

Attributo "title": informa che si aprirà una nuova finestra

308



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.


309



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.


“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.”

310





<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>

311





<div class="nascosto"> <a href="#contenuto">vai direttamente al contenuto</a></div>

.nascosto { width: 0; position: absolute; height: 0; overflow: hidden; top: -200em; }

312



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.


313


Valutazione (rif. WCAG) Utilizzando la barra dell’accessibilità su

“Informazioni”: 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.


314



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)


315



Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente.


316



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.


“Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente.”

317



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.



318



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.



319







<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>

320





<%'definisce il valore in secondi del refreshDim 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>

321



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.


322



Tale funzionalità può disorientare i navigatori del vostro sito web creando problemi di navigazione o fruizione…

…ad esempio la difficoltà di ritornare alla pagina precedente, o mancanza di tempo necessario a leggere le informazioni nella pagina “originaria”.


“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.”

323






<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>

324



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.



325



identificare se la pagina prevede funzionalità di autoaggiornamento o autoreindirizzamento;

verificare se sono presenti possibilità di configurare i tempi di autoaggiornamento e di autoreindirizzamento.


326



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.


327



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.


328


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


329



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.


330



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.


331



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).


332



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.


333


Requisito numero 21 di 22 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.


334



È 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.


335


Requisito numero 21 di 22http://www.pubbliaccesso.it/normative/DM080705-A.htm

li { margin-top: 0.5em; margin-bottom: 0.5em; }

336



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; }

337


Requisito numero 21 di 22“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.


338


Requisito numero 21 di 22“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.


339



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.


340


Valutazione

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.


341



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)


342



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.


343


WCAG 1.0: Punto di controllo 11.4 Si parla di pagina, non di sito. Questo è

particolarmente importante, in quanto le dichiarazioni di conformità alle WCAG devono essere effettuate per singole pagine.

"Nonostante ogni sforzo..." significa che lo sviluppatore, dopo aver valutato l'uso di tutte le possibili soluzioni tecniche presentate nelle WCAG per rendere accessibile un contenuto, alza le braccia e si arrende. Se ciò capita per un intero sito web, con creazione di wai.nomesito.it, dobbiamo forse chiederci: ma abbiamo scelto il fornitore adatto?


“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.”

344


WCAG 1.0: Punto di controllo 11.4 Si parla di pagina alternativa "che usi le

tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) e equivalenti". Questo non sembra riscontrabile nei cosiddetti siti paralleli, in quanto molto spesso riportano esclusivamente alcuni contenuti di tipo testuale che non sono "una pagina accessibile che usa le tecnologie W3C“.

Si parla di aggiornabilità della pagina (non del sito).



345


WCAG 1.0: Punto di controllo 11.4 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.



346



È bene chiarire che pagina alternativa non significa pagina visualizzata con diverso foglio di stile.

Gli sviluppatori dovrebbero ricorrere a pagine alternative solo quando le altre soluzioni falliscono perché le pagine alternative sono in genere meno aggiornate delle pagine "primarie“.



347


WCAG 1.0: Punto di controllo 11.4 Ipotizziamo un sito di un ente pubblico dove ogni

ufficio inserisce dei contenuti in modo autonomo: se 100 operatori inseriscono contenuti non accessibili che richiedono una versione parallela, il costo e le ore lavorative saranno quantomeno raddoppiate e sempre con il dubbio che non tutte le pagine alternative siano aggiornate.

La soluzione "solo testo", spesso utilizzata anche da siti istituzionali, non è conforme a questo punto di controllo in quanto non si tratta di pagina equivalente che utilizza le tecnologie W3C.



348


WCAG 1.0: Punto di controllo 11.4 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.



349



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.


350

Dubbi, domande,paure o altro?

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

22 requisiti legge 4/2004 (legge stanca)

Technology