Accessibilità di un sito Internet di Marco Calvo versione 1.1 (31 marzo 2004)

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


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/

Presentazione

www.e-text.it


mailto:[email protected]

http://www.e-text.it/

http://www.liberliber.it/

http://www.laterza.it/internet/

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


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

Scenario


http://www.eink.com/

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


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


http://w3.org/

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


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.



Disabilità motorie Deficit totale o parziale nel muovere gli arti. Evitare icone e altre aree sensibili troppo

piccole o poco differenziate.



Disabilità cognitive Esigenza di testi chiari e brevi. Una esigenza non solo per i portatori di

specifiche patologie.



Strumenti che garantiscono l’accessibilità

1. Consapevolezza dell’autore;

2. dispositivi hardware;

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



Dispositivi hardware Display braille; tastiere con tasti ingranditi; leve, pomelli e altri strumenti.



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.



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



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


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


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


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.



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



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.



Doctype Immagini Link Tabelle Form Frame Colori Font Altri accorgimenti

La sintassi


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


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


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


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


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


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


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.



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.



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


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


E' consigliabile, quando possibile, specificare l'attributo checked per i campi radio e checkbox e selected per i campi select.

La sintassi: form


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


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


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


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


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


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


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


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


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 Internet di Marco Calvo versione 1.1 (31 marzo 2004)

Documents

Transcript of Accessibilità di un sito Internet di Marco Calvo versione 1.1 (31 marzo 2004)