Accessibilità di un sito Internet
di Marco Calvo
http://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/
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
Presentazione
Marco Calvo
Mi occupo di...
Scenario
Oggi
- Siti Web con servizi in buona quantità;
- raggiunta la massa critica di utenti;
- ritmi di diffusione della banda “larga” (ADSL) incoraggianti;
- consapevolezza delle potenzialità (si pretendono, giustamente, siti accessibili);
- firma digitale e carta di identità elettronica che in molte circostanze ci consentiranno di agire in Internet come dal vivo.
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...
Scenario
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).
(click sull'immagine per ingrandire)
Scenario
- 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:
- Età media in aumento in tutta Europa.
Nota: dati tratti da "Libro Bianco sul rapporto tra disabili e innovazione", 5 marzo 2003. URL: http://www.pubbliaccesso.gov.it/biblioteca/documentazione/libro_bianco.htm
Scenario
Come risolvere le problematiche introdotte dall'esigenza di creare contenuti universali?
- Informazione impaginata secondo gli standard W3C, http://www.w3.org/.
- Evoluti sistemi di content management (CMS).
- Strumenti per il monitoraggio del sito Internet.
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)
Tipologie di disabilità
- Disabilità sensoriali;
- disabilità motorie;
- disabilità cognitive.
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;
- gusto.
Tipologie di disabilità
Disabilità motorie
- Deficit totale o parziale nel muovere gli arti.
- Evitare icone e altre aree sensibili troppo piccole o poco differenziate.
Tipologie di disabilità
Disabilità cognitive
- Esigenza di testi chiari e brevi.
- Una esigenza non solo per i portatori di specifiche patologie.
Tecnologie assistive
Strumenti che garantiscono l'accessibilità:
- Consapevolezza dell'autore;
- dispositivi hardware;
- software.
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.
Tecnologie assistive
Dispositivi hardware
- Display braille;
- tastiere con tasti ingranditi;
- pomelli, joystick e altri strumenti.
(click sull'immagine per ingrandire)
(click sull'immagine per ingrandire)
(click sull'immagine per ingrandire)
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 agli oggetti in movimento.
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).
Norme
In Italia:
- Circolare del Min. Funzione Pubblica del 13 marzo 2001.
- Legge n° 4 del 9 gennaio 2004.
Negli U.S.A.
- Emanata nel 1998 la sezione 508 del “Rehabilitation Act”, estensione dell‘“Americans with Disabilities Act” (ADA) del 1973.
Riferimenti e linee guida W3C
In lingua italiana:
In lingua inglese:
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.
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.
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.
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”.
I linguaggi di impaginazione
Tra le alternative più diffuse all'HTML: Macromedia Flash, http://www.macromedia.com/software/flash/
- Pregi:
- Controllo preciso al “pixel” del contenuto;
- multimediale e accattivante;
- relativamente facile (ma più difficile di HTML).
- 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.
La sintassi
- Doctype
- Immagini
- Link
- Tabelle
- Form
- Frame
- Colori
- Font
- Altri accorgimenti
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”>
La sintassi: doctype
Fare questo esercizio:
- creare un file HTML con il contenuto che segue (vedi sotto);
- visualizzarlo in Internet Explorer 6;
- quindi eliminare la riga contenente il doctype e ricaricare il file.
<!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: 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] (cliccabile) per sopperire al mancato supporto di LONGDESC di alcuni obsoleti user agent. Da affiancare alle immagini. Discutibile (è pensabile modificare il codice non per renderlo migliore o più conforme agli standard, ma solo per sopperire ai difetti dei browser?).
La sintassi: link
Alcuni 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 immagine (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
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: tabelle
- Le tabelle dovrebbero essere utilizzate solo per i dati tabellari.
- A uso layout, oggi sono realmente sostituibili con DIV e fogli di stile (che offrono funzioni aggiuntive).
- Assicurare comunque la lettura lineare della tabella.
La sintassi: tabelle
Alcuni tag e attributi:
- tag <caption>. Svolge le funzioni di didascalia. Da inserire subito dopo il tag <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
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: form
I form costituiscono uno degli ostacoli principali per i ciechi.
Il 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
L'attributo accesskey="a"
- consente di posizionare il focus sul campo utilizzando la tastiera.
- Esempio:
<label for="nazione">nazione</label>
<input type="text" name="nazione" accesskey="n" id="nazione">
La sintassi: form
- E' consigliabile, quando possibile, specificare l'attributo "checked" per i campi radio e checkbox e l'attributo "selected" per i campi select.
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> e/o da <div>
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>
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à).
La sintassi: font
Definire quando possibile la dimensione del carattere utilizzando unità di misura proporzionali.
- Proporzionali:
- Non proporzionali:
Nota: purtroppo Internet Explorer 6 non supporta correttamente la misura "px" e la tratta come una unità di misura non proporzionale. D'altro canto, le altre unità di misura non vengono interpretate in modo uniforme dai vari user agent.
La sintassi: altri accorgimenti
- Creare link interni alla pagina che consentono di saltare al contenuto (e risparmiare all'utente la scansione di lunghi menu).
- Esempio:
<a href="#contenuto" style="display:none">salta al contenuto</a>
- (nota il "display:none", che tuttavia alcuni user agent per non vedenti interpretano saltando la lettura del testo così delimitato)
- Usare correttamente i tag <h1>, <cite>, <acronym>, ecc.
- Esempio:
<acronym title=“Società per Azioni”>S.p.A.</acronym>
- Evitare link e bottoni troppo piccoli.
- Evitare animazioni Macromedia Flash e altri formati (es. PDF) che richiedono plug-in non standard.
- Se è impossibile evitare di fornirli, mettere a disposizione alternative accessibili e standard.
- L'accessibilità non è solo il rispetto di convenzioni tecniche. Es.: non basta inserire il tag ALT, bisogna anche assicurarsi che il contenuto inserito sia effettivamente utile.
Strumenti di valutazione
Siti Internet
Software
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.
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/.