Post on 02-May-2015
Accessibilitàdi un sito Internet
di Marco Calvo
http://www.e-text.it/
versione 1.1 (31 marzo 2004)
Clausole di distribuzioneQuesto 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 Internetdi 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 Internetdi Marco Calvo, www.e-text.it
Marco Calvo calvo@e-text.it 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/
Presentazione
www.e-text.it
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
Scenario
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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...
Scenario
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Un esempio dei dispositivi prossimi venturi, un e-book di ultima generazione:
Sony LIBRIé Realizzato grazie a una
collaborazione Sony, Philips, E-ink, 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).
Scenario
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
L’accessibilità interessa circa 3 milioni di italiani: oltre il 5% della popolazione sopra i 6 anni e ben
il 19% della popolazione sopra i 65 anni. 37 milioni di europei:
il 10% circa. Età media in aumento in tutta Europa.
Scenario
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
Scenario
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
«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)
Definizione di accessibilità
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Disabilità sensoriali; disabilità motorie; disabilità cognitive.
Tipologie di disabilità
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
Tipologie di disabilità
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Disabilità motorie Deficit totale o parziale nel muovere gli arti. Evitare icone e altre aree sensibili troppo
piccole o poco differenziate.
Tipologie di disabilità
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Disabilità cognitive Esigenza di testi chiari e brevi. Una esigenza non solo per i portatori di
specifiche patologie.
Tipologie di disabilità
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Strumenti che garantiscono l’accessibilità
1. Consapevolezza dell’autore;
2. dispositivi hardware;
3. software.
Tecnologie assistive
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
Tecnologie assistive
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Dispositivi hardware Display braille; tastiere con tasti ingranditi; leve, pomelli e altri strumenti.
Tecnologie assistive
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
Tecnologie assistive
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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).
Tecnologie assistive
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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/
Norme
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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).
Riferimenti e linee guida W3C
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
Riferimenti e linee guida W3C
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
I linguaggi di impaginazione
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
I linguaggi di impaginazione
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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”.
I linguaggi di impaginazione
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
I linguaggi di impaginazione
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Doctype Immagini Link Tabelle Form Frame Colori Font Altri accorgimenti
La sintassi
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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”>
La sintassi: doctype
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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>
La sintassi: doctype
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
La sintassi: immagini
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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">
La sintassi: link
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
Facilita la navigazione: attributo tabindex=“1” modifica la sequenza di
tabulazione (es. consente di saltare aree o link).
Applicabile a link, form, ecc.
La sintassi: link
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
La sintassi: tabelle
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
La sintassi: tabelle
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
La sintassi: tabelle
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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">
La sintassi: form
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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">
La sintassi: form
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
E' consigliabile, quando possibile, specificare l'attributo checked per i campi radio e checkbox e selected per i campi select.
La sintassi: form
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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>
La sintassi: frame
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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>
La sintassi: frame
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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à).
La sintassi: colori
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.
La sintassi: font
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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à per Azioni”>S.p.A.</acronym>
La sintassi: altri accorgimenti
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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).
La sintassi: altri accorgimenti
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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.htmlSoftware Macromedia Dreamweaver MX 2004 (appositi comandi) Microsoft FrontPage 2003 (appositi comandi) Bobby, http://bobby.watchfire.com/
Strumenti di valutazione
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it
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”>
Esercizi
Accessibilità di un sito Internetdi 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/
Accessibilità di un sito Internetdi Marco Calvo, www.e-text.it