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

Presentazione sul tema: "Accessibilità di un sito Internet di Marco Calvo versione 1.1 (31 marzo 2004)"— Transcript della presentazione:

1 Accessibilità di un sito Internet di Marco Calvo http://www.e-text.it/ versione 1.1 (31 marzo 2004)

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

3 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, www.e-text.it

4 Marco Calvo calvo@e-text.it Telefono 06/59.14.940 Mi occupo di… E-text S.r.l., http://www.e-text.it/http://www.e-text.it/ Liber Liber, http://www.liberliber.it/http://www.liberliber.it/ Laterza, http://www.laterza.it/internet/http://www.laterza.it/internet/ Presentazione www.e-text.it Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

5 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, www.e-text.it

6 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, www.e-text.it

7 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/;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 Internet di Marco Calvo, www.e-text.it

8

9 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, www.e-text.it

10 Come risolvere le problematiche introdotte dallesigenza di creare contenuti universali? Informazione impaginata secondo gli standard W3C, http://w3.org/.http://w3.org/ Evoluti sistemi di content management (CMS). Strumenti per il monitoraggio del sito Internet. Scenario Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

11 «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, www.e-text.it

12 Disabilità sensoriali; disabilità motorie; disabilità cognitive. Tipologie di disabilità Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

13 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, www.e-text.it

14 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, www.e-text.it

15 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, www.e-text.it

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

17 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, www.e-text.it

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

19

20

21

22 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, www.e-text.it

23 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, www.e-text.it

24 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 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 dellAmericans with Disabilities Act (ADA) del 1973. URL: http://www.section508.gov/ Norme Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

25 In lingua italiana: http://www.pubbliaccesso.gov.it/ (CNIPA); http://www.pubbliaccesso.gov.it/ http://www.diodati.org/ (privato); http://www.diodati.org/ http://www.superabile.it/ (INAIL). http://www.superabile.it/ In lingua inglese: http://www.w3.org/WAI/ (Web Accessibility Initiative) Propone 3 livelli di classificazione (A, AA, AAA); http://www.w3.org/WAI/ http://www.w3.org/TR/WAI-WEBCONTENT/ (WCAG 1.0. Le 2.0 – più semplici – allo studio da agosto 2002). http://www.w3.org/TR/WAI-WEBCONTENT/ Riferimenti e linee guida W3C Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

26 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, www.e-text.it

27 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, www.e-text.it

28 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, www.e-text.it

29 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 Internet di Marco Calvo, www.e-text.it

30 Macromedia Flash, http://www.macromedia.com/software/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 Internet di Marco Calvo, www.e-text.it

31 Doctype Immagini Link Tabelle Form Frame Colori Font Altri accorgimenti La sintassi Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

32 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, www.e-text.it

33 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"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 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, www.e-text.it

34 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, www.e-text.it

35 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, www.e-text.it

36 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, www.e-text.it

37 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, www.e-text.it

38 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, www.e-text.it

39 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, www.e-text.it

40 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, www.e-text.it

41 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, www.e-text.it

42 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, www.e-text.it

43 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, www.e-text.it

44 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, www.e-text.it

45 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, www.e-text.it

46 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, www.e-text.it

47 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, www.e-text.it

48 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, www.e-text.it

49 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 Software Macromedia Dreamweaver MX 2004 (appositi comandi) Microsoft FrontPage 2003 (appositi comandi) Bobby, http://bobby.watchfire.com/http://bobby.watchfire.com/ Strumenti di valutazione Accessibilità di un sito Internet di Marco Calvo, www.e-text.it

50 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, www.e-text.it

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