Un'Introduzione all'Accessibilità dei Contenuti Web

1,421 views
1,368 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,421
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
57
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Un'Introduzione all'Accessibilità dei Contenuti Web

  1. 1. accessibilità dei contenuti web aspetti comunicativi, tecnici e legislativi Alberto Rota La Comunicazione tra enti pubblici tramite strumenti di informatica individuale e di rete Centro di Formazione Professionale Pavia - gennaio 2006
  2. 2. premessa <ul><li>“ The power of the web is its universality. </li></ul><ul><li>Access by everyone regardless of disability is an essential aspect” </li></ul><ul><li>Tim Berners Lee </li></ul>
  3. 3. accessibilità dei contenuti web <ul><li>che cos’è l’accessibilità </li></ul><ul><li>aspetti tecnici </li></ul><ul><li>aspetti comunicativi </li></ul><ul><li>la legge sull’accessibilità </li></ul>
  4. 4. che cos’è l’accessibilità <ul><li>definizioni </li></ul><ul><li>scopi dell’accessibilità </li></ul><ul><li>aspetti tecnici e umani </li></ul><ul><li>fonti : W3C, WAI, WCAG </li></ul>
  5. 5. definizione <ul><li>“ Un contenuto è accessibile quando può essere fruito da qualcuno con una disabilità” </li></ul><ul><li>definizione del W3C (World Wide Web Consortium) </li></ul><ul><li>fruizione : possibilità di accedere a un dato contenuto senza perdita di informazione </li></ul><ul><li>disabilità : non solo in senso proprio, non solo permanenti </li></ul>
  6. 6. disabilità <ul><li>tra le disabilità permanenti citiamo: </li></ul><ul><ul><li>cecità completa </li></ul></ul><ul><ul><li>ipovisione </li></ul></ul><ul><ul><li>cecità ai colori </li></ul></ul><ul><ul><li>sordità </li></ul></ul><ul><ul><li>paralisi / mancanza degli arti superiori </li></ul></ul><ul><ul><li>dislessia </li></ul></ul><ul><ul><li>epilessia </li></ul></ul><ul><ul><li>ritardo mentale </li></ul></ul>
  7. 7. disabilità temporanee <ul><li>l’accessibilità riguarda anche le persone affette da una disabilità temporanea … </li></ul><ul><li>… e anche altre categorie: </li></ul><ul><ul><li>persone anziane </li></ul></ul><ul><ul><li>persone con normali problemi alla vista </li></ul></ul><ul><ul><li>persone di livello culturale basso o bassissimo </li></ul></ul><ul><ul><li>persone che parlano un’ altra lingua </li></ul></ul>
  8. 8. persone con strumentazione obsoleta <ul><li>persone con hardware/software obsoleto </li></ul><ul><ul><li>Windows 95/98, le prime versioni di Explorer o Netscape, schermi piccoli, con risoluzione bassa </li></ul></ul><ul><li>persone con connessioni lente </li></ul><ul><li>persone che si collegano in condizioni ambientali difficili </li></ul><ul><li>persone con strumentazione non standard o poco diffusa </li></ul><ul><ul><li>es. browser testuali come Linx </li></ul></ul>
  9. 9. tecnologie assistive <ul><li>sono software che permettono ai disabili di accedere ai contenuti, ad esempio </li></ul><ul><ul><li>screen readers (software di sintesi vocale) </li></ul></ul><ul><ul><li>screen magnifiers (ingranditori) </li></ul></ul>schermata vista tramite ingranditore
  10. 10. scopi dell’accessibilità <ul><li>permettere l’accesso alle persone disabili </li></ul><ul><ul><li>combattere la discriminazione e le “barriere architettoniche” </li></ul></ul><ul><ul><li>favorire l’inclusione sociale </li></ul></ul><ul><li>favorire l’universalità dell’accesso </li></ul><ul><ul><li>Leading the Web to its full potential… </li></ul></ul><ul><ul><li>in sintesi: favorire una reale democrazia dell’informazione e dei servizi </li></ul></ul>
  11. 11. vantaggi dell’accessibilità <ul><li>i vantaggi non riguardano solo i disabili e sono: </li></ul><ul><ul><li>maggior pulizia del codice (attenzione agli elementi strutturali) </li></ul></ul><ul><ul><li>tempi di caricamento minori per le pagine </li></ul></ul><ul><ul><li>miglior indicizzazione nei motori di ricerca </li></ul></ul>
  12. 12. aspetti dell’accessibilità <ul><li>anche l’accessibilità comporta: </li></ul><ul><ul><li>aspetti tecnici - riguardano il codice della pagina e la sua aderenza agli standard, sono verificabili anche in modo automatico </li></ul></ul><ul><ul><li>aspetti umani - riguardano il contenuto dal punto di vista del significato, richiedono attenzione e sensibilità dei redattori </li></ul></ul>
  13. 13. chi è coinvolto <ul><li>le figure professionali coinvolte nella progettazione accessibile sono diverse: </li></ul><ul><ul><li>chi progetta l’ interfaccia grafica </li></ul></ul><ul><ul><li>chi traduce il progetto in codice </li></ul></ul><ul><ul><li>chi struttura i contenuti del sito </li></ul></ul><ul><ul><li>chi scrive i testi </li></ul></ul>
  14. 14. fonti <ul><li>Workforce Rehabilitation Act - Section 508 (USA) </li></ul><ul><li>raccomandazioni del W3C </li></ul><ul><li>Legislazione italiana ( Legge Stanca e regolamento relativo) </li></ul>
  15. 15. section 508 <ul><ul><li>nel 1973 il Governo federale emana il Workforce Rehabilitation Act , con lo scopo di eliminare barriere all’accesso di vari servizi </li></ul></ul><ul><ul><li>l’articolo 508 riguarda il mondo dell’Information Technology (web, programmi, sistemi operativi, opere multimediali...) </li></ul></ul><ul><ul><ul><li>primo aggiornamento (non normativo): 1986 </li></ul></ul></ul><ul><ul><ul><li>secondo aggiornamento (vincolante): 1998 </li></ul></ul></ul>
  16. 16. w3c <ul><li>il World Wide Web Consortium è un’organizzazione internazionale senza fini di lucro fondata nel 1994 da Tim Berners Lee </li></ul><ul><li>ne fanno parte vari soggetti, pubblici e privati </li></ul><ul><li>lo scopo del w3c è promuovere standard per il web, promuovendo l’interoperabilità </li></ul>
  17. 17. wai e wcag <ul><li>il WAI ( Web Accessibility Initiative ) è la sezione del w3c che si occupa di accessibilità </li></ul><ul><li>i suoi gruppi di lavoro elaborano documenti per diffondere una progettazione web accessible: le WCAG ( Web Content Accessibility Guidelines ) </li></ul><ul><li>la versione attuale è la 1.0, la 2.0 è allo stato di bozza </li></ul>
  18. 18. accessibilità dei contenuti web <ul><li>che cos’è l’accessibilità </li></ul><ul><li>aspetti tecnici </li></ul><ul><li>aspetti comunicativi </li></ul><ul><li>la legge sull’accessibilità </li></ul>
  19. 19. aspetti tecnici <ul><li>contenuto e presentazione in una pagina web </li></ul><ul><li>le raccomandazioni wcag 1.0 </li></ul><ul><li>validazione e verifica tecnica </li></ul>
  20. 20. chi sta navigando la mia pagina? <ul><li>la stessa pagina web può essere raggiunto da dispositivi hardware e programmi molto diversi </li></ul><ul><ul><ul><li>un browser visuale (es. Explorer) o testuale (Linx), un monitor molto evoluto o molto antiquato, uno screen reader ecc. </li></ul></ul></ul><ul><li>e letta da utenti con esigenze/preferenze diverse... </li></ul>
  21. 21. contenuto e presentazione Titolo principale Sottotitolo Questo è il primo paragrafo di un testo che serve a capire la differenza tra contenuto e presentazione. Questo è il secondo paragrafo. Garamond grassetto, corpo 16pt Garamond grassetto, corpo 14 Garamond normale di corpo 13 allineato a sinistra. E’ indicata la struttura gerarchica e la funzione degli elementi del testo, senza indicazioni sulla presentazione E’ indicata la formattazione degli elementi del testo, senza indicazioni sulla sua struttura gerarchica e sulle loro funzioni
  22. 22. contenuto e presentazione (2) <ul><li>un contenuto, tante possibili presentazioni... </li></ul><ul><li>regola prima dell’accessibilità: separare contenuto e presentazione </li></ul><ul><ul><li>codificando chiaramente la struttura di un documento lo renderemo fruibile “senza perdita di informazione” (o quasi) </li></ul></ul><ul><ul><li>l’obiettivo degli standard w3c è consentire questo tipo di codifica: </li></ul></ul><ul><ul><li>HTML (hyper text markup language) per il contenuto </li></ul></ul><ul><ul><li>CSS (cascading style sheet) per la/e presentazione/i </li></ul></ul>
  23. 23. contenuto e presentazione (3) HTML CSS + Con HTML viene codificata la struttura e la funzione degli elementi Con CSS viene codificata la loro presentazione (non per forza su browser…) <html> … <h1> Ecco un titolo </h1> <h2> Ecco un sottotitolo </h2> <p> Ecco un paragrafo </p> ... </html> h1 {font-color:red;} h2 {font-color:blue;} p {font-color:green;} Ecco un titolo Ecco un sottotitolo Ecco un paragrafo =
  24. 24. wcag 1.0: gli obiettivi principali <ul><li>assicurare una trasformazione gradevole della pagina </li></ul><ul><ul><ul><li>ad esempio se viene vista da utenti disabili o dotati di strumentazione obsoleta </li></ul></ul></ul><ul><li>rendere i contenuti comprensibili e navigabili </li></ul><ul><ul><li>solo il primo obiettivo riguarda aspetti tecnici... </li></ul></ul>
  25. 25. come sono fatte le wcag <ul><li>si compongono di 14 raccomandazioni: le prime 11 riguardano il primo obiettivo, le ultime tre il secondo </li></ul><ul><li>ogni raccomandazione è divisa in una serie di punti di controllo (checkpoint) </li></ul><ul><li>l’accessibilità completa si raggiunge soddisfacendo tutti i punti di controllo </li></ul>
  26. 26. le tre priorità... <ul><li>i punti di controllo non sono tutti uguali ma sono divisi per importanza in tre livelli: </li></ul><ul><ul><li>priorità 1 </li></ul></ul><ul><ul><ul><li>Non soddisfarli rende le pagine totalmente inaccessibili </li></ul></ul></ul><ul><ul><li>priorità 2 </li></ul></ul><ul><ul><ul><li>Non soddisfarli comporta alcuni problemi di accessibilità </li></ul></ul></ul><ul><ul><li>priorità 3 </li></ul></ul><ul><ul><ul><li>Soddisfarli rende le pagine (tecnicamente) accessibili </li></ul></ul></ul>
  27. 27. … e i tre bollini <ul><li>priorità 1 conformità WAI Level A </li></ul><ul><li>priorità 2 conformità WAI Level Double A </li></ul><ul><li>priorità 3 conformità WAI Level Triple A </li></ul>
  28. 28. raccomandazioni <ul><li>separare struttura e presentazione </li></ul><ul><li>usare correttamente il codice (X)HTML </li></ul><ul><li>fornire equivalenti testuali per i contenuti grafici e multimediali </li></ul><ul><li>fornire equivalenti per i contenuti rivolti ad un solo canale sensoriale </li></ul><ul><li>non progettare per uno specifico tipo di hardware </li></ul><ul><li>non affidare l’informazione unicamente al colore </li></ul>
  29. 29. raccomandazioni (2) <ul><li>fornire informazioni contestuali e di orientamento </li></ul><ul><li>fornire meccanismi di navigazione chiari </li></ul><ul><li>rendere i documenti chiari e semplici </li></ul>
  30. 30. validazione automatica <ul><li>esistono strumenti software in grado di controllare la corrispondenza di una pagina alle raccomandazioni </li></ul><ul><ul><ul><li>es. Bobby, Torquemada </li></ul></ul></ul><ul><li>ma non sono sufficiente per raggiungere l’accessibilità </li></ul><ul><ul><ul><li>nessuna macchina sa giudicare la chiarezza di un testo, la chiarezza della navigazione, la bontà di un testo alternativo... </li></ul></ul></ul>
  31. 31. accessibilità dei contenuti web <ul><li>che cos’è l’accessibilità </li></ul><ul><li>aspetti tecnici </li></ul><ul><li>aspetti comunicativi </li></ul><ul><li>la legge sull’accessibilità </li></ul>
  32. 32. aspetti comunicativi <ul><li>limiti delle verifiche automatiche </li></ul><ul><li>il concetto di “testo equivalente” </li></ul>
  33. 33. limite delle verifiche automatiche <ul><li>i validatori automatici valutano la sintassi, non la semantica </li></ul><ul><li>controllano la presenza di determinati marcatori e attributi, non il loro contenuto </li></ul><ul><ul><ul><li>in tutti quei casi in cui occorre stendere testi alternativi (per immagini, filmati ecc.) l’accessibilità può venire solo da un intervento redazionale </li></ul></ul></ul>
  34. 34. alt <ul><li>tutti gli elementi grafici e multimediali di una pagina devono avere un testo alternativo </li></ul><ul><ul><ul><li>tecnicamente da inserire nell’attributo alt : </li></ul></ul></ul><ul><ul><ul><li>es. <img src=“freccia.gif” alt=“pagina successiva” /> </li></ul></ul></ul><ul><li>è il testo che comparirà al posto della grafica se il dispositivo dell’utente non visualizza immagini </li></ul>
  35. 35. alt (2) <ul><li>il testo alternativo </li></ul><ul><ul><li>deve essere equivalente alla funzione che l’immagine avrebbe assolto nella pagina </li></ul></ul><ul><ul><li>non deve essere una descrizione (per quello c’è longdesc ) </li></ul></ul><ul><ul><ul><li>es. il testo alternativo dell’immagine di una lettera che fa da link a un indirizzo e-mail non dovrà essere “lettera” ma “scrivimi”... </li></ul></ul></ul>
  36. 36. perché l’alt? <ul><li>per i browser con il caricamento delle immagini disabilitato </li></ul><ul><li>per i browser testuali tipo Linx </li></ul><ul><li>per dispositivi tipo screen reader </li></ul><ul><li>per i robots dei motori di ricerca </li></ul>
  37. 37. alt secondo flavel <ul><li>Alan Flavel divide le immagini in 4 categorie e consiglia usi di alt per ognuna </li></ul><ul><ul><li>immagini decorative </li></ul></ul><ul><ul><li>icone di navigazione </li></ul></ul><ul><ul><li>immagini accessorie </li></ul></ul><ul><ul><li>immagini critiche </li></ul></ul>
  38. 38. immagini decorative <ul><li>non hanno alcun significato particolare ma sono pura decorazione: l’alt va tendenzialmente lasciato in bianco </li></ul><ul><ul><li>pallini nelle voci di menù </li></ul></ul><ul><ul><li>immagini spaziatrici </li></ul></ul><ul><ul><li>decorazioni </li></ul></ul><ul><ul><li>loghi societari </li></ul></ul><ul><ul><ul><ul><li>ma se il nome della società non è presente se non nell’immagine scrivere: alt=“nome della società” </li></ul></ul></ul></ul>
  39. 39. icone di navigazione <ul><li>sono immagini (generalmente frecce) che collegano ad es. alla pagina successiva di un articolo o di una sezione </li></ul><ul><ul><ul><li>la soluzione migliore consiste nello scrivere </li></ul></ul></ul><ul><ul><ul><li>una descrizione breve del contenuto (es. Ultime notizie) </li></ul></ul></ul><ul><ul><ul><li>una descrizione breve della funzione (es. Capitolo 3) </li></ul></ul></ul>
  40. 40. immagini accessorie <ul><li>sono immagini non indispensabili alla comprensione del testo ma che ne integrano il significato </li></ul><ul><ul><ul><li>scrivere sinteticamente la loro caratteristica saliente </li></ul></ul></ul>
  41. 41. immagini critiche <ul><li>sono indispensabili alla comprensione della pagina </li></ul><ul><li>è molto raro: succede quasi solo per le formule matematiche </li></ul><ul><ul><ul><li>avvertire il lettore che senza l’immagine la pagina non avrà significato: l’alt è uno strumento potente, ma i miracoli non li fa... </li></ul></ul></ul>
  42. 42. accessibilità dei contenuti web <ul><li>che cos’è l’accessibilità </li></ul><ul><li>aspetti tecnici </li></ul><ul><li>aspetti comunicativi </li></ul><ul><li>la legge sull’accessibilità </li></ul>
  43. 43. la legge sull’accessibilità <ul><li>la legge 4/2004 (Legge Stanca) </li></ul><ul><li>D.P.R 75/2005 (Regolamento di attuazione) </li></ul><ul><li>D.M. 8 luglio 2005 (Requisiti tecnici) </li></ul>
  44. 44. legge stanca - obiettivi e finalità <ul><ul><ul><li>La Repubblica riconosce e tutela il diritto di ogni persona ad accedere a tutte le fonti di informazione e ai relativi servizi, […] compresi quelli […] informatici e telematici </li></ul></ul></ul><ul><ul><ul><li>in particolare: </li></ul></ul></ul><ul><ul><ul><li>servizi della PA </li></ul></ul></ul><ul><ul><ul><li>servizi di pubblica utilità </li></ul></ul></ul><ul><ul><ul><li>da parte delle persone disabili </li></ul></ul></ul>
  45. 45. legge stanca - soggetti erogatori <ul><li>pubbliche amministrazioni </li></ul><ul><li>enti pubblici economici </li></ul><ul><li>privati concessionari di servizi pubblici </li></ul><ul><li>aziende municipalizzate regionali </li></ul><ul><li>enti pubblici di assistenza e riabilitazioni </li></ul><ul><li>trasporti/tlc prevalente capitale pubblico </li></ul><ul><li>aziende appaltatrici di servizi informatici </li></ul>
  46. 46. legge stanca - obblighi <ul><li>requisiti di accessibilità sono motivo di preferenza per acquisto/fornitura di servizi informatici </li></ul><ul><li>i soggetti erogatori non possono stipulare contratti per realizzazione/modifica di siti senza i requisiti </li></ul><ul><li>condizione per la concessione di contributi pubblici per l’acquisto di servizi per disabili </li></ul><ul><li>obbligo ai datori di lavoro di fornire la strumentazione assistiva </li></ul>
  47. 47. legge stanca - strumenti didattici <ul><li>le disposizioni si applicano anche </li></ul><ul><ul><li>al materiale didattico per la scuola </li></ul></ul><ul><ul><li>edizioni digitali degli strumenti didattici fondamentali </li></ul></ul>
  48. 48. legge stanca - compiti amministrativi <ul><li>alla presidenza del consiglio </li></ul><ul><ul><li>monitoraggio sull’attuazione </li></ul></ul><ul><ul><li>vigilanza sul rispetto della legge da parte delle amministrazioni statali </li></ul></ul><ul><ul><li>promozione (in vari modi) delle tematiche relative </li></ul></ul><ul><li>regioni, province autonome, enti locali </li></ul><ul><ul><li>vigilano sull’attuazione da parte dei propri uffici </li></ul></ul>
  49. 49. legge stanca - formazione e responsabilità <ul><li>art. 8 regola le attività di formazione </li></ul><ul><li>l’inosservanza comporta responsabilità dirigenziale e responsabilità disciplinare </li></ul>
  50. 50. 75/2005: criteri e principi <ul><li>requisiti di accessibilità </li></ul><ul><ul><li>accessibilità al contenuto </li></ul></ul><ul><ul><li>fruibilità delle informazioni </li></ul></ul><ul><ul><ul><li>facilità d’uso </li></ul></ul></ul><ul><ul><ul><li>efficienza </li></ul></ul></ul><ul><ul><ul><li>efficacia </li></ul></ul></ul><ul><ul><ul><li>soddisfazione </li></ul></ul></ul><ul><ul><li>compatibilità con gli standard </li></ul></ul>
  51. 51. 75/2005: i valutatori <ul><li>l’elenco dei valutatori è presso il cnipa </li></ul><ul><li>requisiti </li></ul><ul><ul><li>imparzialità e indipendenza </li></ul></ul><ul><ul><li>strumentazione adeguata </li></ul></ul><ul><ul><li>risorse umane esperte </li></ul></ul><ul><li>obblighi dei valutatori </li></ul>
  52. 52. 75/2005: controlli <ul><li>la PA centrale nomina un responsabile dell’accessibilità informatica </li></ul><ul><li>Presidenza del Consiglio e CNIPA verificano il mantenimento dei requisiti </li></ul><ul><li>regioni, province autonome, enti locali organizzano autonomamente la vigilanza </li></ul>
  53. 53. d.m. 8/7/2005: livelli di accessibilità <ul><li>livello 1 (verifica tecnica) </li></ul><ul><li>livello 2 (verifica soggettiva) </li></ul><ul><ul><li>si articola in tre sotto-livelli </li></ul></ul>
  54. 54. d.m. 8/7/2005: requisiti dei valutatori <ul><li>documentazione idonea a dimostrare </li></ul><ul><ul><li>possesso strumentazione tecnica </li></ul></ul><ul><ul><li>risorse umane comprendenti: </li></ul></ul><ul><ul><ul><li>esperto in fattori umani (ergonomia) </li></ul></ul></ul><ul><ul><ul><li>esperto tecnico (web e accessibilità) </li></ul></ul></ul><ul><ul><ul><li>esperto di interazione con disabili </li></ul></ul></ul><ul><ul><ul><li>gruppo di valutazione </li></ul></ul></ul>
  55. 55. d.m. 8/7/2005 (allegato A) <ul><li>definisce la verifica tecnica : </li></ul><ul><ul><li>riscontro con validatori automatici </li></ul></ul><ul><ul><li>verifica dell’esperto tecnico sull’uso del linguaggio di marcatura </li></ul></ul><ul><ul><li>esame su più browser e piattaforme </li></ul></ul><ul><li>requisiti tecnici </li></ul>
  56. 56. d.m. 8/7/2005 (allegato B) <ul><li>definisce la verifica soggettiva: </li></ul><ul><ul><li>analisi degli esperti in fattori umani </li></ul></ul><ul><ul><ul><li>studio dell’interazione tra utante e sito, assegnazione di un punteggio da 1 a 5 </li></ul></ul></ul><ul><ul><li>costituzione di un gruppo di valutazione </li></ul></ul><ul><ul><ul><li>comprendente utenti rappresentativi di varie disabilità </li></ul></ul></ul><ul><ul><li>esecuzione dei task </li></ul></ul><ul><ul><ul><li>prove varie, navigazione libera, compiti specifici </li></ul></ul></ul><ul><ul><li>rapporto conclusivo </li></ul></ul>
  57. 57. d.m. 8/7/2005 (allegato B) <ul><li>criteri: </li></ul><ul><li>1. percezione 7. trasparenza </li></ul><ul><li>2. comprensibilità 8. apprendibilità </li></ul><ul><li>3. operabilità 9. aiuto </li></ul><ul><li>4. coerenza 10. tolleranza a errori </li></ul><ul><li>5. safety 11. gradevolezza </li></ul><ul><li>6. sicurezza 12. flessibilità </li></ul>

×