Accessibilità
di un sito Internet
di Marco Calvo
http://www.e-text.it/
versione 1.1 (31 marzo 2004)
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Clausole di distribuzione
Questo documento è disponibile in versione aggiornata sul sito:
http://accessibilita.e-text.it/
È distribuito con licenza:
“Creative Commons Attribution-Non Commercial-ShareAlike”
Per informazioni sulla licenza, visitare il sito Internet:
http://creativecommons.org/licenses/by-nc-sa/1.0/
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Indice













Clausole di distribuzione
Presentazione
Scenario
Definizione di accessibilità
Tipologie di disabilità
Tecnologie assistive
Norme
Riferimenti e linee guida W3C
I linguaggi di impaginazione
La sintassi
Strumenti di valutazione
Esercizi
Conclusioni
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Presentazione

Marco Calvo



[email protected]
Telefono 06/59.14.940
Mi occupo di…



E-text S.r.l., http://www.e-text.it/
Liber Liber, http://www.liberliber.it/
Laterza, http://www.laterza.it/internet/
www.e-text.it
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Scenario






Oggi
Siti Web con servizi;
massa critica di utenti;
diffusione della banda “larga” (ADSL);
consapevolezza delle potenzialità (si
pretendono, giustamente, siti accessibili);
firma digitale;
carta di identità elettronica.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Scenario



Prospettive
Aumento di utenti e connessioni “flat”;
incremento anche qualitativo dei servizi;
diversi dispositivi di visualizzazione (user agent):




super-palmari & e-book;
cellulari;
“chioschi”;
ma anche dispositivi obsoleti...
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Scenario
Un esempio dei dispositivi
prossimi venturi, un e-book di
ultima generazione:
 Sony LIBRIé




Realizzato grazie a una
collaborazione Sony, Philips, Eink, http://www.eink.com/;
capacità: 10 Mb (circa 500 libri);
10.000 pagine di autonomia con
4 pile AAA;
costo contenuto (circa 350,00
euro).
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Scenario

L’accessibilità interessa circa 3 milioni di
italiani:


37 milioni di europei:


oltre il 5% della popolazione sopra i 6 anni e ben
il 19% della popolazione sopra i 65 anni.
il 10% circa.
Età media in aumento in tutta Europa.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Scenario

Come risolvere le problematiche introdotte
dall’esigenza di creare contenuti universali?



Informazione impaginata secondo gli standard
W3C, http://w3.org/.
Evoluti sistemi di content management (CMS).
Strumenti per il monitoraggio del sito Internet.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Definizione di accessibilità
«accessibilità»
 la capacità dei sistemi informatici, nelle forme e nei limiti
consentiti dalle conoscenze tecnologiche, di erogare servizi e
fornire informazioni fruibili, senza discriminazioni, anche da parte
di coloro che a causa di disabilità necessitano di tecnologie
assistive o configurazioni particolari;
«tecnologie assistive»
 gli strumenti e le soluzioni tecniche, hardware e software, che
permettono alla persona disabile, superando o riducendo le
condizioni di svantaggio, di accedere alle informazioni e ai servizi
erogati dai sistemi informatici.
(definizioni tratte dalla legge n° 4 del 9 gennaio 2004)
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tipologie di disabilità



Disabilità sensoriali;
disabilità motorie;
disabilità cognitive.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tipologie di disabilità
Disabilità sensoriali

Vista:


deficit totale;
deficit parziale:



dalla semplice miopia, alla “tunnel vision”;
dalle difficoltà nella visualizzazione dei colori
(daltonismo) e della luminosità, agli effetti di oggetti
animati o lampeggianti (epilessia).
Udito, olfatto, tatto.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tipologie di disabilità


Disabilità motorie
Deficit totale o parziale nel muovere gli arti.
Evitare icone e altre aree sensibili troppo
piccole o poco differenziate.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tipologie di disabilità


Disabilità cognitive
Esigenza di testi chiari e brevi.
Una esigenza non solo per i portatori di
specifiche patologie.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tecnologie assistive
Strumenti che garantiscono l’accessibilità
1. Consapevolezza dell’autore;
2. dispositivi hardware;
3. software.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tecnologie assistive


Consapevolezza dell’autore
Creare contenuti accessibili oggi è
tecnicamente possibile, ed è
economicamente sostenibile.
Molti siti Internet non sono accessibili
semplicemente perché l’autore del sito non
si è posto il problema.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tecnologie assistive



Dispositivi hardware
Display braille;
tastiere con tasti ingranditi;
leve, pomelli e altri strumenti.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tecnologie assistive
Dispositivi hardware
I dispositivi hardware hanno impatto
relativamente limitato nel lavoro di un autore
di siti Internet.
I principali accorgimenti da prendere:
 aree sensibili grandi e ben delimitate;
 alternative alle oggetti in movimento.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Tecnologie assistive
Software
Molto ampia la gamma di programmi utili a utenti
disabili. Tra questi, citiamo:
 Ingranditori di caratteri;
 tastiere virtuali;
 sw per la sintesi vocale:


screen reader (es. "Jaws", che interagisce con il sistema
operativo);
browser vocali (limitati all’ambiente Web, es. "Home Page
Reader" della IBM).
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Norme
In Italia:
 Circolare del Min. Funzione Pubblica del 13 marzo 2001.
 Legge n° 4 del 9 gennaio 2004. Url:
 http://www.pubbliaccesso.gov.it/biblioteca/normative/
legge_20040109_n4.htm
Negli U.S.A.
 Emanata nel 1998 la sezione 508 del “Rehabilitation Act”,
estensione dell‘“Americans with Disabilities Act” (ADA) del 1973.
URL:
 http://www.section508.gov/
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Riferimenti e linee guida W3C

In lingua italiana:




http://www.pubbliaccesso.gov.it/ (CNIPA);
http://www.diodati.org/ (privato);
http://www.superabile.it/ (INAIL).
In lingua inglese:


http://www.w3.org/WAI/ (Web Accessibility Initiative)
Propone 3 livelli di classificazione (A, AA, AAA);
http://www.w3.org/TR/WAI-WEBCONTENT/ (WCAG 1.0.
Le 2.0 – più semplici – allo studio da agosto 2002).
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Riferimenti e linee guida W3C
Un concetto importante introdotto nelle WCAG
1.0:
«Va assicurata una trasformazione gradevole
del contenuto»
Ovvero è ammesso il principio che la pagina si
“trasformi” in funzione dell’user agent.
Ovvero “accessibile” non è il contenuto svilito al
minimo comune denominatore, ma il
contenuto capace di adattarsi.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
I linguaggi di impaginazione
HTML 4.01 è il più noto e utilizzato, ora il W3C
raccomanda l'uso di XHTML 1.1
In virtù della sua diffusione, ci concentreremo
su HTML 4.01, ma i principi generali restano
sempre validi.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
I linguaggi di impaginazione



HTML nato per descrivere la struttura logica
di un documento.
Si è corrotto con l’introduzione di “tag”
proprietari (non standard) dedicati alla
descrizione tipografica dei contenuti;
con i fogli di stile e l’XHTML si è tornati
all’impostazione originale: contenuto
separato dalla sua rappresentazione.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
I linguaggi di impaginazione
Una evoluzione importante: CSS (Cascading
Style Sheet):
 http://www.w3.org/Style/CSS/
 Nati nel 1996, inizialmente trascurati;
 concretamente utilizzabili dalla versione 5 di
“Internet Explorer” e 6 di “Netscape”.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
I linguaggi di impaginazione
Macromedia Flash, http://www.macromedia.com/software/flash/
 Pregi:
 Controllo preciso al “pixel” del contenuto;
 multimediale e accattivante;
 relativamente facile.
 Limiti:
 formato non standard e proprietario;
 senza plug-in nessuna visualizzazione;
 non accessibile (qualche miglioramento a partire dalla versione,
“Flash MX”);
 orientato a rappresentare i contenuti in una predeterminata
sequenza temporale.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi









Doctype
Immagini
Link
Tabelle
Form
Frame
Colori
Font
Altri accorgimenti
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: doctype
Specifica il tipo di documento (HTML 4.01,
XHTML 1.0, ecc.).
Ha effetti concreti nella resa dei documenti.
Es.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD
HTML 4.01 Transitional//EN“
“http://www.w3.org/TR/html4/loose.dtd”>
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: doctype
Visualizzare in Internet Explorer 6. Quindi eliminare il doctype e ricaricare.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Prova</title>
</head>
<body>
<div style="background-color:#FFFF00; width:200px;
margin-left:auto; margin-right:auto">Prova</div>
</body>
</html>
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: immagini
Attributi:
 ALT=“testo” non più di 1024 caratteri. ALT=“”
per le immagini puramente decorative.
 LONGDESC=“descrizione.htm” per immagini
complesse. Non rende superfluo ALT.
 testo [D] per sopperire al mancato supporto
di LONGDESC di alcuni obsoleti user agent.
Da affiancare alle immagini. Discutibile.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: link
Attributi:
 title=“testo” descrizione dettagliata del link.
 accesskey=“a” consente di attivare il link via
tastiera.
Raccomandazioni:
 Evitare i link come “click qui”, preferirgli i link più
esplicativi come “scrivi”, “vai alla home page”, ecc.
 Link in mappe immagini (aree sensibili): solo se
indispensabili, meglio quelle client side che
consentono l’uso di ALT nei tag AREA. Es.
<area shape="rect" coords=“0,0,10,10"
href=“01.htm" alt=“descrizione">
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: link
Facilita la navigazione:
 attributo tabindex=“1” modifica la sequenza di
tabulazione (es. consente di saltare aree o
link).
Applicabile a link, form, ecc.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: tabelle
Le tabelle dovrebbero essere utilizzate solo per
i dati tabellari.
Oggi sono realmente sostituibili con DIV e fogli
di stile (che offrono funzioni aggiuntive).
Assicurare comunque la lettura lineare della
tabella.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: tabelle
Alcuni tag e attributi:
 tag <caption>. Svolge le funzioni di didascalia.
Contenuto tra i tag <table>, </table>. Impaginazione
problematica;



attributo <table summary="Descrizione">. Per le
descrizioni sintetiche della tabella;
tag <th scope="col">. Sostituisce <td> per la riga di
intestazione;
tag <th scope="row">. Sostituisce <td> per la
colonna di intestazione.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: tabelle
Una alternativa a th scope è:
 <th id="fatturato"> (per l'intestazione)
…
<td headers="fatturato"> (per la cella con i
dati).
Il supporto degli user agent a questi tag è
spesso carente.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: form
I form costituiscono uno degli ostacoli principali
per i ciechi.
 tag <label>
<label>indirizzo <input name="indirizzo"
type="text" id="indirizzo"></label>
oppure
<label for="indirizzo">indirizzo</label>
<input type="text" name="indirizzo"
id="indirizzo">
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: form

attributo accesskey="a"
consente di posizionare il focus sul campo
utilizzando la tastiera. Esempio:
<label
for="textfield">nazione</label>
<input type="text" name="nazione"
accesskey="n" id="nazione">
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: form
E' consigliabile, quando possibile, specificare
l'attributo checked per i campi radio e
checkbox e selected per i campi select.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: frame
I frame sono sconsigliati dal W3C, e di fatto
sempre meno utilizzati, perché afflitti da alcuni
problemi:
 difficoltà nella stampa e nel salvataggio delle
pagine;
 link problematici;
 poco accessibili.
Possono essere validamente sostituiti da <iframe>
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: frame
In attesa della loro abolizione, si raccomanda
almeno che venga specificato nel frameset
l'attributo title="Descrizione" (da non confondere
con name="Nome") per ciascuno dei frame. Es.
<frameset rows="80,*">
<frame src="01.htm" name="top"
title="menu navigazione">
<frame src="02.htm" name="main"
title="contenuto">
</frameset>
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: colori


Usare sfondi omogenei e colori ben
contrastati (evitare i tono su tono e i testi
scuri su sfondi scuri).
Se si modificano i colori di default specificare
sia i colori di sfondo, sia i colori di primo
piano (altrimenti in determinate circostanze
potrebbero verificarsi problemi di leggibilità).
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: font
Definire quando possibile la dimensione del carattere
utilizzando unità di misura proporzionali.
 Proporzionali:


%, em, ex, px
Non proporzionali:

pt, cm
Nota: purtroppo Internet Explorer non supporta
correttamente "px" e la tratta come una unità di
misura non proporzionale. D'altro canto, le altre
unità di misura non vengono interpretate
uniformemente dai vari user agent.
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: altri accorgimenti


Creare link interni alla pagina che consentono di
saltare al contenuto (e risparmiare all’utente la
scansione di lunghi menu). Es.:
<a href=“#contenuto” style=“display:none”> salta al
contenuto</a> (nota display:none)
Usare correttamente i tag <h1>, <cite>, <acronym>,
ecc. Es.
<acronym title=“Societ&agrave; per
Azioni”>S.p.A.</acronym>
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
La sintassi: altri accorgimenti


Evitare link e bottoni troppo piccoli.
Evitare animazioni Macromedia Flash e altri
formati (es. PDF) che richiedono plug-in non
standard (oppure fornirli con alternative
accessibili e standard).
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Strumenti di valutazione
Siti Internet
 Validatore di codice HTML/XHTML:
 http://validator.w3.org/
 Validatore di CSS
 http://jigsaw.w3.org/css-validator/
 Simulazione browser solo testuale
 http://www.delorie.com/web/lynxview.html
Software
 Macromedia Dreamweaver MX 2004 (appositi comandi)
 Microsoft FrontPage 2003 (appositi comandi)
 Bobby, http://bobby.watchfire.com/
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Esercizi

Realizzare una pagina in “HTML 4.01
transitional” contenente:




una tabella;
una immagine;
un link;
del testo strutturato con un titolo e un paragrafo.
Il tag di apertura è:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN“ “http://www.w3.org/TR/html4/loose.dtd”>
Accessibilità di un sito Internet
di Marco Calvo, www.e-text.it
Fine
«La forza del Web sta nella sua universalità. L'accesso da
parte di tutti, indipendentemente dalle disabilità, ne è un
aspetto essenziale».
Tim Berners-Lee
Questo documento è disponibile per il download (e l'uso secondo la licenza
"Creative Commons" indicata nella slide "Clausole di distribuzione") a questo
indirizzo: http://accessibilita.e-text.it/