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

Clausole di distribuzione Questo documento è disponibile in versione aggiornata sul sito: È distribuito con licenza: Creative Commons Attribution-Non Commercial-ShareAlike Per informazioni sulla licenza, visitare il sito Internet: Accessibilità di un sito Internet di Marco Calvo,

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,

Marco Calvo Telefono 06/ Mi occupo di… E-text S.r.l., Liber Liber, Laterza, Presentazione Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 Internet di Marco Calvo,

Un esempio dei dispositivi prossimi venturi, un e-book di ultima generazione: Sony LIBRIé Realizzato grazie a una collaborazione Sony, Philips, E- ink, capacità: 10 Mb (circa 500 libri); pagine di autonomia con 4 pile AAA; costo contenuto (circa 350,00 euro). Scenario Accessibilità di un sito Internet di Marco Calvo,

Laccessibilità 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 Internet di Marco Calvo,

Come risolvere le problematiche introdotte dallesigenza di creare contenuti universali? Informazione impaginata secondo gli standard W3C, Evoluti sistemi di content management (CMS). Strumenti per il monitoraggio del sito Internet. Scenario Accessibilità di un sito Internet di Marco Calvo,

«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 Internet di Marco Calvo,

Disabilità sensoriali; disabilità motorie; disabilità cognitive. Tipologie di disabilità Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 Internet di Marco Calvo,

Strumenti che garantiscono laccessibilità 1.Consapevolezza dellautore; 2.dispositivi hardware; 3.software. Tecnologie assistive Accessibilità di un sito Internet di Marco Calvo,

Consapevolezza dellautore Creare contenuti accessibili oggi è tecnicamente possibile, ed è economicamente sostenibile. Molti siti Internet non sono accessibili semplicemente perché lautore del sito non si è posto il problema. Tecnologie assistive Accessibilità di un sito Internet di Marco Calvo,

Dispositivi hardware Display braille; tastiere con tasti ingranditi; leve, pomelli e altri strumenti. Tecnologie assistive Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 allambiente Web, es. "Home Page Reader" della IBM). Tecnologie assistive Accessibilità di un sito Internet di Marco Calvo,

In Italia: Circolare del Min. Funzione Pubblica del 13 marzo Legge n° 4 del 9 gennaio Url: legge_ _n4.htm legge_ _n4.htm Negli U.S.A. Emanata nel 1998 la sezione 508 del Rehabilitation Act, estensione dellAmericans with Disabilities Act (ADA) del URL: Norme Accessibilità di un sito Internet di Marco Calvo,

In lingua italiana: (CNIPA); (privato); (INAIL). In lingua inglese: (Web Accessibility Initiative) Propone 3 livelli di classificazione (A, AA, AAA); (WCAG 1.0. Le 2.0 – più semplici – allo studio da agosto 2002). Riferimenti e linee guida W3C Accessibilità di un sito Internet di Marco Calvo,

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 delluser 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 Internet di Marco Calvo,

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 Internet di Marco Calvo,

HTML nato per descrivere la struttura logica di un documento. Si è corrotto con lintroduzione di tag proprietari (non standard) dedicati alla descrizione tipografica dei contenuti; con i fogli di stile e lXHTML si è tornati allimpostazione originale: contenuto separato dalla sua rappresentazione. I linguaggi di impaginazione Accessibilità di un sito Internet di Marco Calvo,

Una evoluzione importante: CSS (Cascading Style Sheet): 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 Internet di Marco Calvo,

Macromedia 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 Internet di Marco Calvo,

Doctype Immagini Link Tabelle Form Frame Colori Font Altri accorgimenti La sintassi Accessibilità di un sito Internet di Marco Calvo,

Specifica il tipo di documento (HTML 4.01, XHTML 1.0, ecc.). Ha effetti concreti nella resa dei documenti. Es. La sintassi: doctype Accessibilità di un sito Internet di Marco Calvo,

Visualizzare in Internet Explorer 6. Quindi eliminare il doctype e ricaricare. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <meta http-equiv="Content-Type" content="text/html; charset=iso "> Prova <div style="background-color:#FFFF00; width:200px; margin-left:auto; margin-right:auto">Prova La sintassi: doctype Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 luso di ALT nei tag AREA. Es. La sintassi: link Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 Internet di Marco Calvo,

Alcuni tag e attributi: tag. Svolge le funzioni di didascalia. Contenuto tra i tag,. Impaginazione problematica; attributo. Per le descrizioni sintetiche della tabella; tag. Sostituisce per la riga di intestazione; tag. Sostituisce per la colonna di intestazione. La sintassi: tabelle Accessibilità di un sito Internet di Marco Calvo,

Una alternativa a th scope è: (per l'intestazione) … (per la cella con i dati). Il supporto degli user agent a questi tag è spesso carente. La sintassi: tabelle Accessibilità di un sito Internet di Marco Calvo,

I form costituiscono uno degli ostacoli principali per i ciechi. tag indirizzo oppure indirizzo La sintassi: form Accessibilità di un sito Internet di Marco Calvo,

attributo accesskey="a" consente di posizionare il focus sul campo utilizzando la tastiera. Esempio: nazione La sintassi: form Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 La sintassi: frame Accessibilità di un sito Internet di Marco Calvo,

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. La sintassi: frame Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

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 Internet di Marco Calvo,

Creare link interni alla pagina che consentono di saltare al contenuto (e risparmiare allutente la scansione di lunghi menu). Es.: salta al contenuto (nota display:none) Usare correttamente i tag,,, ecc. Es. S.p.A. La sintassi: altri accorgimenti Accessibilità di un sito Internet di Marco Calvo,

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 Internet di Marco Calvo,

Siti Internet Validatore di codice HTML/XHTML: Validatore di CSS Simulazione browser solo testuale Software Macromedia Dreamweaver MX 2004 (appositi comandi) Microsoft FrontPage 2003 (appositi comandi) Bobby, Strumenti di valutazione Accessibilità di un sito Internet di Marco Calvo,

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 è: Esercizi Accessibilità di un sito Internet di Marco Calvo,

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: di distribuzionehttp://accessibilita.e-text.it/ Accessibilità di un sito Internet di Marco Calvo,