Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Che cosa si intende per accessibilità?

Presentazione sul tema: "Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Che cosa si intende per accessibilità?"— Transcript della presentazione:

1 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Che cosa si intende per accessibilità? Dalla definizione alla pratica. Video Keeping Web Accessibility in Mind http://www.webaim.org/intr o/video.php

2 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Definizione comune di accessibilità Definizione prevalente sui dizionari di lingua italiana. Accessibilità: caratteristica di chi o di ciò che è accessibile. Accessibile: di facile accesso, di facile comprensione ovvero raggiungibile con facilità sia fisicamente che mentalmente.

3 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Definizione specialistica di accessibilità Definizione del W3C (World Wide Web Consortium) Un contenuto è accessibile quando può essere usato da qualcuno con una disabilità. Ovvero quando le persone con disabilità possono percepire, capire, navigare ed interagire con esso in modo concreto.

4 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Definizione specialistica di accessibilità Dalla definizione emerge la differenza tra accessibilità e usabilità. Infatti non viene considerato accessibile un contenuto genericamente usabile, ma un contenuto che sia usabile da qualcuno affetto da una disabilità.

5 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Definizione di accessibilità secondo Diodati Accessibile è un contenuto web che può essere fruito da un utente indipendentemente da disabilità o limitazioni fisiche e/o cognitive, occasionali o permanenti, e indipendentemente dal tipo di tecnologia utilizzato per collegarsi alla Rete.

6 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Ulteriore accezione di accessibilità Il termine accessibilità viene usato non solo per indicare lessere accessibile di un contenuto o di un programma, ma anche linsieme di linee guida, raccomandazioni, suggerimenti, tecniche, per produrre contenuti, strumenti autoriali e programmi utente accessibili. E il caso del titolo di questo corso..

7 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web I beneficiari dellaccessibilità Secondo il W3C le categorie interessate sono: I ciechi I sordi Gli ipovedenti Le persone con disabilità motorie che pregiudicano lutilizzo di mouse e tastiera I malati di epilessia fotosensibile Individui con disabilità cognitive o dellapprendimento

8 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web I beneficiari dellaccessibilità Le categorie di disabili elencate ci riportano al significato comune della parola individuando: Da un lato disabilità fisiche Dallaltro disabilità mentali

9 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Altri beneficiari dellaccessibilità Nellintroduzione delle WCAG si fa riferimento anche ad altre problematiche che limitano laccesso ai contenuti del web: persone senza disabilità in differenti situazioni; persone con disabilità temporanee; persone con barriere tecnologiche; persone anziane.

10 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Altri beneficiari dellaccessibilità Ad esempio utenti che: possono avere uno schermo solo a caratteri, uno schermo piccolo o una connessione lenta a Internet; possono non parlare o comprendere in modo fluente la lingua in cui il documento è scritto; possono trovarsi in situazioni in cui la vista, ludito o le mani sono occupati o ostacolati (alla guida, in un ambiente rumoroso, ecc.); possono avere una versione precedente di un browser, o un diverso sistema operativo.

11 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Beneficiari dellaccessibilità: riepilogo persone con disabilità fisiche e/o cognitive permanenti; persone che per ragioni contingenti (hanno le mani o gli occhi impegnati, lavorano in ambienti rumorosi, non conoscono bene una lingua) incontrano difficoltà simili a quelle di chi è affetto da disabilità fisiche o cognitive permanenti; persone che usano tecnologie potenzialmente invalidanti (computer o programmi obsoleti o poco comuni, connessioni a Internet molto lente).

12 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Destinatari dellaccessibilità Sempre secondo il W3C, i destinatari dellaccessibilità, intesa come insieme di linee guida e tecniche, sono: gli sviluppatori di contenuti per il Web (autori di pagine e progettisti di siti - Web developers) e gli sviluppatori di strumenti autoriali (authoring tools developers).

13 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Un principio chiave dellaccessibilità Flessibilità di incontrare differenti bisogni, situazioni e preferenze, rendendo fruibili e usabili i contenuti Web a tutte le categorie di utenti individuate in precedenza.

14 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Perché sviluppare un web accessibile Sviluppare contenuti e servizi accessibili porta sostanzialmente due vantaggi: Uno di carattere sociale Uno di carattere economico

15 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Perché sviluppare un web accessibile Vantaggio sociale Un Web accessibile, che permetta alle persone con disabilità di partecipare attivamente nella vita sociale, è essenziale per una uguaglianza di opportunità in molte aree (educazione, politica, professionale, ecc…).

16 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Perché sviluppare un web accessibile Vantaggio economico Sviluppare seguendo le linee guida per laccessibilità incrementa la quota di mercato e l'estensione del pubblico di un sito web, aumentando la sua generale usabilità e lefficienza.

17 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Perché sviluppare un web accessibile Infatti permette di: Aumentare l'usabilità per visitatori non disabili e disabili. Migliorare la posizione nei motori di ricerca. Riutilizzare il contenuto per vari formati e dispositivi. Aumentare il supporto per versioni multilingue. Ridurre i costi di manutenzione del sito.

18 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web I componenti del web accessibile

19 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web I componenti del web accessibile Contenuto: linformazione in una pagina o applicazione (testi, immagini, codice, ecc..) Browser web e gli user agents in generale Tecnologia assistiva (screen reader, tastiere alternative, ecc..) Gli sviluppatori (designers, programmatori, autori) Gli strumenti di sviluppo (software usati) Gli strumenti di valutazione (i validatori, ecc..) Le linee guida per i vari componenti (WCAG, specifiche tecniche dei linguaggi)

20 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web I browser grafici Internet Explorer (6, 7, 8, 9) Mozilla Firefox (3.X - 10) Chrome 19.0 Safari 5.0 Opera SeaMonkey, Camino, Flock, Konqueror, ecc..

21 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web I browser grafici: statistiche Fonte: netmarketshare.com (gennaio 2012)netmarketshare.com

22 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Dispositivi mobili Telefoni cellulari: solitamente risoluzione di 176 x 220 PDA (personal digital assistant): risoluzione di 240×320 pixel. Diverse modalit à di visualizzazione Smartphones: telefoni cellulari con funzioni di personal digital assistant (iPhone, BlackBerry, Samsung). Lettori e-book, i-Pod, i-Pad, ecc..

23 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Dispositivi mobili

24 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Mobile / tablet browser: statistiche Fonte: netmarketshare.com (gennaio 2012)netmarketshare.com

25 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Risoluzione schermo: statistiche Fonte: netmarketshare.com (gennaio 2012)netmarketshare.com

26 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: browser testuali Nascono con il web nei primi anni 90 eliminano automaticamente tutti gli elementi grafici mostrano allutente solo i testi di una pagina, comprese le descrizioni testuali alternative, degli elementi grafici e multimediali. Interazione principalmente via tastiera.

27 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: browser testuali Non una tecnologia assistiva vera e propria, tuttavia ancora utilizzata da utenti non vedenti o con hardware poco performanti e/o connessioni lente. I principali browser testuali: Lynx Links WebbIE: lavora anche in modalità grafica, con il motore di rendering di IE WebbIE

28 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: browser testuali Richiedono nella progettazione di una pagina web: Una buona organizzazione dei contenuti. Equivalenti testuali degli elementi grafici e multimediali non decorativi. Valido strumento per testare la reale accessibilità di una pagina web.

29 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: browser testuali

30 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: browser testuali

31 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: screen reader Il lettore di schermo è: software che traduce i contenuti presenti sul monitor di un computer in una forma non grafica, di solito in parole pronunciate da una voce sintetica. Utilizzato da non vedenti per luso del PC

32 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: screen reader Il lettore di schermo necessita di : hardware adeguato in memoria e supporto multimediale Sistema operativo che gli consenta di lavorare con le applicazioni presenti attraverso software integrati nel SO (es. Microsoft Active Accessibility – MSAA di Windows)

33 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: screen reader Gli utenti che usano il lettore di schermo accedono ai contenuti in maniera seriale (lettura di tutto il contenuto) e non parallela (colpo docchio). Le pagine web devono dunque essere progettate utilizzando correttamente e semanticamente il codice per agevolare la comprensione dei contenuti.

34 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Plugin Fangs per Firefox

35 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: screen reader I principali lettori di schermo sono: Jaws (http://www.freedomscientific.com/) Window-eyes (http://www.gwmicro.com/Window- Eyes/) Hal (http://www.yourdolphin.com/) WinGuido (gratuito - http://www.winguido.it/) NVDA (gratuito - http://www.nvda-project.org/) Per Linux: Emacspeak, Orca, LSR Per Mac: VoiceOver (integrato nel SO)

36 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive: screen reader Sondaggio sulle preferenze degli utenti di screen reader promosso da WebAim Versione italiana http://lau.csi.it/testare/accessibilita/test_user- agent/sondaggio/webaim.shtml http://lau.csi.it/testare/accessibilita/test_user- agent/sondaggio/webaim.shtml Versione originale (inglese) http://www.webaim.org/projects/screenreadersurvey http://www.webaim.org/projects/screenreadersurvey

37 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive:screen magnifiers ingranditore di schermo: software che ingrandisce in tutto o in parte i contenuti del monitor. Alcuni con funzione vocale. Usati da persone che conservano una minima capacit à visiva.

38 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive:screen magnifiers E possibile: Scegliere il fattore di ingrandimento; Le modalit à di ingrandimento: finestra intera, schermo diviso in 2 finestra; zoom della parte interessata della pagina; Colori del testo e dello sfondo

39 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive:screen magnifiers

40 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per ipovedenti Ipovedenti: persone con capacit à visiva gravemente ridotta. Ad esempio: poca acutezza, visione significativamente vaga o annebbiata. perdita di tutta la visione centrale; la capacit à di vedere soltanto l'anello esterno del campo visivo. visione a "tunnel"; la capacit à di vedere soltanto il centro del campo visivo normale. perdita di visione in altre parti del campo visivo. altri problemi, compreso la sensibilit à a luce, l'emeralopia, il contrasto ridotto.

41 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per ipovedenti Tecnologie utilizzate: Ingranditori di schermo (screen magnifiers). Funzioni di ingrandimento dei vari programmi (SO e browser). Schermi a bassa risoluzione. Contrasto colori marcato.

42 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per ipovedenti Problemi da considerare in fase di progettazione: dal contrasto tra il colore del testo e il colore dello sfondo; dal font dei caratteri; dalle dimensioni dei caratteri; dallo spessore e dalla nitidezza del tratto; dalla distanza tra i caratteri e tra le righe.

43 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per ipovedenti Visual Impairment Simulator: software che simula i problemi affrontati dagli ipovedenti nell uso del PC (http://vis.cita.uiuc.edu/downld.php)http://vis.cita.uiuc.edu/downld.php

44 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per disabilit à uditive Utenti con perdita di udito o con sordit à totale che necessitano di alcuni ausili: Sottotitolazione dei contenuti audio. Software per la traduzione scritta o nel linguaggio dei segni per il parlato (iCommunicator).iCommunicator In generale rappresentazione visiva di ogni evento audio.

45 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per disabilit à fisiche Tipologie di disabilit à motorie piuttosto ampie: Alcuni utenti paralisi completa o parziale; debolezza muscolare; molto limitati; sensibilità, ma poco controllo del loro corpo; movimenti incontrollati e sporadici, ecc.. Difficoltà nelluso dei dispositivi di input (mouse, tastiera) per linterazione con le interfacce.

46 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per disabilit à fisiche Tecnologie utilizzate: Mouse, trackball e tastiere speciali Touch screen Sistemi di puntamento a testa (HeadMouse Extreme) Sistemi di puntamento a labbra (LifeTool) Software per ridurre i tremori o per mouse e tastiere virtuali (MagicCursor 2000, ScreenDoors 2000, Discovery:screen)

47 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per disabilit à fisiche Esempi di: Sistemi di puntamento a labbra Sistemi di puntamento a testa Software per ridurre i tremori Fonte Diodati

48 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Tecnologie assistive per disabilità fisiche In fase di progettazione sarà necessario: Evitare risposte a tempo non controllabili. Layout con elementi ravvicinati in cui risulti difficile il puntamento degli elementi. Consentire laccesso tramite tastiera a tutte le funzionalità.

49 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Disabilit à cognitive Anche in questo caso tipologie piuttosto differenti: difficoltà di elaborazione come ritardi mentali, lesioni celebrali o altro. deficit specifici come la mancanza di memoria a breve termine, l'incapacità di ricordarsi i propri nomi o altro. disabilità dell'apprendimento quali dislessia, disgrafia, disorganizzazione cognitiva, disturbo da deficit di attenzione e iperattività. ritardi linguistici.

50 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Disabilit à cognitive Tecnologie assistive hardware: Dispositivi che emettono segnali acustici o visivi per ricordare allutente procedure e scadenze. Tastiere semplificate: tasti grandi e colorati che differenziano le azioni. Touch screen: si applicano allo schermo e funzionano da mouse.

51 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Disabilit à cognitive Tecnologie assistive software: Lettura vocale dei contenuti testuali, associata allevidenziazione delle parole. Predizione della parola o della frase che lutente sta scrivendo. Associazione di immagini a testi e comandi. Es: ReadingBar 2 plugin per IE, Dragon Naturally Speaking

52 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Disabilit à cognitive In fase di progettazione si rende necessario: Utilizzare impaginazioni che siano semplici e costanti. Utilizzare sfondi uniformi e non complicati dietro il testo. Evitare l'utilizzo di testi lampeggianti, evitando inoltre testi in movimento o animazioni testuali. Utilizzare un linguaggio semplice (tuttavia sempre adeguato allargomento).

53 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Strumenti nativi dei Sistemi Operativi Fonte: netmarketshare.com (gennaio 2012)netmarketshare.com

54 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Strumenti nativi dei Sistemi Operativi SO Microsoft Windows (XP, Vista, 7) pannello di controllo -> accesso facilitato

55 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Strumenti nativi dei Sistemi Operativi Principali fattori personalizzazione: risoluzione/definizione dello schermo; dimensionamento degli oggetti tramite DPI; aspetto grafico di Windows; puntatori del mouse; struttura delle finestre; funzionalità comuni del sistema operativo; utilizzo facilitato della tastiera; lente d'ingrandimento; tasti di scelta rapida.

56 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Gli Standard Web: cosa sono? Tecnologie ideate e sviluppate dal W3C e da altri organi normatori, utilizzate per creare e interpretare contenuti per il web.W3C Tecnologie ideate per documenti pubblicati sul web in grado di resistere al tempo e accessibili al pubblico più vasto possibile.

57 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Gli Standard Web: cosa sono? Linguaggi strutturali (HTML, XHTML, XML). Linguaggi di presentazione (CSS, SVG). Modelli a oggetti (DOM – Document Object Model) Linguaggi di programmazione (ECMAScript 262, versione standard di Javascript).

58 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Progettare secondo gli Standard Web Realizzare documenti in HTML/XHTML valido. Usare i CSS per separare la presentazione dalla struttura di una pagina. Usare codice ben strutturato e marcato in maniera semantica. Realizzare pagine fruibili su ogni browser.

59 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Progettare secondo gli Standard Web Progressive Enhancement

60 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Progettare secondo gli Standard Web In particolare, separare la struttura (codice markup) dalla presentazione (CSS) permette di: Ottenere pagine più leggere e facili da caricare: il CSS viene caricato una sola volta dal browser; il codice è ottimizzato. Ottenere informazioni più facilmente trovabili: i motori di ricerca preferiscono infatti pagine in cui il contenuto è ben strutturato. ….

61 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Progettare secondo gli Standard Web mantenere coerente il Look&feel del sito: con una modifica al CSS si cambieranno tutte le pagine diminuire il carico di lavoro legato alla manutenzione delle pagine: aggiornare i contenuti non comporterà modifiche dellaspetto del sito. garantire una maggiore compatibilità tra le varie piattaforme e i browser, vale a dire maggiore portabilità: i browser interpretano sempre meglio gli standard. Maggiore accessibilità.

62 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Progettare secondo gli Standard Web Emergono quindi quelli che possono essere i vantaggi economici: Minori costi di manutenzione dei siti. Minori costi di banda utilizzata. Informazioni più facili da reperire in rete. Maggior numero di utenti in grado di fruire dei servizi proposti.

63 luca.uliana84@gmail.com Tecniche di accessibilità web Lezione 1 - Introduzione all'accessibilità e standard web Perché usare gli Standard Web: riassunto Sviluppo e manutenzione più semplici. Compatibilità con browser futuri. Pagine di dimensioni contenute e dunque più veloci da caricare. Migliore accessibilità. Pagine più ricercabili dai motori di ricerca. Adattamento ai diversi dispositivi più semplice.