Legge 4-2004 - Promotore locale dell`inclusione digitale

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