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

• E-text S.r.l., http://www.e-text.it/
• Liber Liber, http://www.liberliber.it/
• Laterza, http://www.laterza.it/internet/

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:
  • il 10% circa.
• 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.
  • Url: http://www.pubbliaccesso.gov.it/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/

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

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:
  • %, em, ex, px
• Non proporzionali:
  • pt, cm

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&agrave; 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

• 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
• Controllo accessibilità (italiano): Torquemada, http://www.webxtutti.it/testa.htm

Software

• Macromedia Dreamweaver MX 2004 (appositi comandi)
• Microsoft FrontPage 2003 (appositi comandi)
• Bobby, http://bobby.watchfire.com/

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