Pagina 1 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Introduzione all'accessibilità Giancarlo Scola Ufficio sviluppo.

Presentazione sul tema: "Pagina 1 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Introduzione all'accessibilità Giancarlo Scola Ufficio sviluppo."— Transcript della presentazione:

1 pagina 1 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Introduzione all'accessibilità Giancarlo Scola Ufficio sviluppo risorse umane e organizzazione - Ufficio dirigenziale affari generali e comunicazione - Delegato del Rettore per l'integrazione degli Studenti disabili - CSITA Centro Servizi Informatici e Telematici di Ateneo - Servizio Orientamento

2 pagina 2 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Nota di copyright/Disclaimer Il contenuto di queste slides è protetto dalla vigente normativa sul diritto d’autore e diritti connessi. Tutti i diritti relativi al contenuto delle slides (ivi incluse immagini, fotografie, animazione, video, audio, musica e testi) appartengono agli autori indicati nella prima slide. Le slides possono essere riprodotte ed utilizzate dagli istituti di ricerca, scolastici e universitari afferenti al Ministero dell’Istruzione, dell’Università e della Ricerca ad esclusivo uso scientifico, didattico o documentario e senza fini di lucro, purché non vengano alterate in alcun modo sostanziale, ed in particolare mantengano le corrette indicazioni di data, paternità e fonte originale. Non è consentita ogni altra utilizzazione o riproduzione anche parziale (ivi incluse le riproduzioni su supporti cartacei, magnetici e su reti di calcolatori) se non previa esplicita autorizzazione scritta degli autori. Le informazioni contenute nelle slides sono controllate accuratamente alla data della pubblicazione e possono essere soggette a cambiamenti senza preavviso. Gli autori non assumono alcuna responsabilità per la loro correttezza, completezza, applicabilità e aggiornamento. Esse sono fornite per scopi meramente didattici e non per un utilizzo pratico (p.e. in progetti di impianti, prodotti, reti, etc.). Gli autori declinano ogni responsabilità per qualunque tipo di utilizzo fatto da terzi del presente lavoro.

3 pagina 3 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Errori comuni Forniamo una breve panoramica (non esaustiva) degli errori che comunemente si commettono sviluppando pagine web.

4 pagina 4 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Errori Comuni  Uso errato dei marcatori HTML  Cattiva scelta dei colori  Navigazione non lineare  Uso ridondante di tecnologie  Progettazione legata a specifici browser o particolari risoluzioni  Apertura di nuove finestre Tutto questo può pregiudicare il buon funzionamento di un sito web.

5 pagina 5 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Uso errato dei marcatori HTML HTML nasce per fornire indicazioni ai browser su come renderizzare dei testi, evitare quindi di: Usare le tabelle per l'impaginazione. Usare i tag per cambiare la grandezza dei caratteri.

6 pagina 6 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Cattiva scelta dei colori Un sito variopinto non costituisce di per sè un sito più attraente. Si deve cercare quindi di usare il minor numero di colori possibile, in tinte ben accostate e, soprattutto, coerenti per ogni pagina.

7 pagina 7 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Cattiva scelta dei colori Vediamo come evitare scelte infelici che hanno un impatto visivo non voluto. Considerazioni su come accostare i colori non sono nello scopo di questo corso, anche se, in fase di valutazione, verranno adottati i seguenti algoritmi : differenza di luminosità: [(Rosso X 299) + (Verde X 587) + (Blu X 114)] / 1000 ≤ 125 differenza di colore: [Max (Rosso1, Rosso2) - Min (Rosso1, Rosso2)] + [Max (Verde1, Verde2) - Min (Verde1, Verde2)] + [Max (Blu1, Blu2) -Min (Blu1,Blu2)] > 500

8 pagina 8 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Cattiva scelta dei colori La gamma di colori web-safe consiste di 216 colori che vengono visualizzati in modo costante e privo di sfarfallio su qualsiasi schermo. Ricordiamo che con 8 bit è possibile ottenere 256 valori diversi in un intervallo di valori compreso tra 0 e 255

9 pagina 9 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Cattiva scelta dei colori Ecco cosa succede usando dei colori non web-safe: Tale distorsione rende difficoltosa la visione, con evidenti problemi.

10 pagina 10 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Cattiva scelta dei colori Tali colori sono definiti in termini di valori RGB pari a 0, 51, 102, 153, 204 e 255. Questi numeri possono sembrare casuali, ma in effetti essi sono tutti dei multipli di 51. E 51 è il 20% di 255, 102 è il 40% di 51 e così via... Per visualizzare l'intera palette di colori: http://www.visibone.com/colorlab/

11 pagina 11 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Apertura di nuove finestre L'apertura di nuove finestre durante la navigazione di un sito potrebbe confondere l'utente, rendendo difficile la navigazione. Evitare quindi l'apertura di finestre supplementari durante la navigazione.

12 pagina 12 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Navigazione non lineare Cercare di progettare un sito che abbia una struttura logica e ben definita, suddividendolo in sezioni omogenee. Fornire in ogni pagina informazioni sulla posizione e la possibilità di raggiungere i vari livelli del sito, con link appositi, una sezione del sito dovrebbe essere la mappa del sito stesso. Evitare di dare alle pagine nomi di fantasia o numeri, il nome stesso della pagina dovrebbe essere coerente con il suo contenuto, anche per evitare URL assurdamente lunghe o prive di significato.

13 pagina 13 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Uso ridondante di tecnologie Evitare di ricorrere inutilmente all'uso di tecnologie non necessarie. La bellissima applet Java che fa scorrere un testo fornisce la stessa informazione di un testo semplice. Per contro, in questo modo, si aumenta la dimensione della pagina e il tempo di caricamento della stessa.

14 pagina 14 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Progettazione legata a specifici browser o particolari risoluzioni Evitare assolutamente di progettare un sito sullo stile “ottimizzato per il browser X alla risoluzione YxZ”. Per quanto alcune tecnologie siano più diffuse di altre, non ha alcun senso tagliare fuori una seppur piccola fascia di utenza.

15 pagina 15 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Forniamo brevemente una panoramica dei mezzi a disposizione agli utenti disabili per facilitare loro la navigazione di siti web.

16 pagina 16 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Screen Reader Sono degli applicativi che di solito vengono eseguiti all'avvio del computer per consentire all'operatore non vedente di avere fin da subito il controllo del sistema operativo. Questi programmi trasformano in voce il testo che appare sullo schermo.

17 pagina 17 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Display Braille Questo dispositivo riproduce in alfabeto braille ciò che appare sullo schermo.

18 pagina 18 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Browser vocali A questa categoria appartengono i software realizzati esplicitamente per la navigazione dei siti web. Rispetto agli screen reader, che sono strumenti per il controllo generico del sistema operativo e delle applicazioni, un browser vocale può essere utilizzato esclusivamente durante la visita ad un sito web oppure per scaricare la posta elettronica da una finestra del browser dedicata.

19 pagina 19 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Head Mouse Tali dispositivi permettono di controllare il puntatore del mouse con il movimento della testa.

20 pagina 20 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Tastiere speciali Particolari tastiere adatte all'uso da parte di persone disabili, ad esempio con una bacchetta da tenere in bocca.

21 pagina 21 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Screen enlarger Dispositivi simili a grosse lenti poste tra lo schermo e l'operatore aventi la funzione di lente d'ingrandimento.

22 pagina 22 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Strumenti per l'utente Screen Magnifier Particolari software che permettono di ingrandire di un fattore anche molto grande una parte dello schermo.

23 pagina 23 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 1 Fornire alternative equivalenti al contenuto audio e visivo. Fornire un contenuto che, quando viene presentato all'utente, gli trasmetta essenzialmente la stessa funzione o scopo del contenuto audio o visivo.

24 pagina 24 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web In pratica Usare "alt" per gli elementi IMG, INPUT e APPLET o fornire un equivalente testuale nel contenuto degli elementi OBJECT o APPLET. Per contenuti complessi (per esempio un grafico) laddove un testo "alt" non fornisce un equivalente testuale completo, fornire una descrizione aggiuntiva usando, per esempio, "longdesc". Per le immagini sensibili usare l'attributo "alt" con AREA oppure usare l'elemento MAP con gli elementi A (e altro testo) come contenuto.

25 pagina 25 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 2 Non fare affidamento sul solo colore. Assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il colore.

26 pagina 26 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 3 Usare marcatori e fogli di stile e farlo in modo appropriato. Marcare i documenti con i corretti elementi strutturali. Controllare la presentazione con fogli di stile piuttosto che con elementi e attributi di presentazione.

27 pagina 27 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 4 Chiarire l'uso di linguaggi naturali. Utilizzare marcatori che facilitino la pronuncia o l'interpretazione di testi stranieri o abbreviati.

28 pagina 28 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web In pratica Identificare il linguaggio naturale principale di un documento. Assegnare l'attributo "lang" all'elemento HTML Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale. Usare l'attributo "lang". Specificare lo scioglimento di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta. Usare l'attributo "title" degli elementi ABBR e ACRONYM.

29 pagina 29 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 5 Creare tabelle che si trasformino in maniera elegante. Assicurarsi che le tabelle abbiano la marcatura necessaria per essere trasformate dai browser accessibili e da altri interpreti.

30 pagina 30 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web In pratica Per tabelle di dati, identificare le intestazioni di righe e colonne. Usare TD per identificare le celle di dati e TH per identificare le intestazioni. Usare THEAD, TFOOT e TBODY per raggruppare righe, COL e COLGROUP per raggruppare colonne e gli attributi "axis", "scope" e "headers" per descrivere relazioni più complesse fra i dati. Per le tabelle, fornire sommari. Usare l'attributo "summary" dell'elemento TABLE.

31 pagina 31 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 6 Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante. Assicurarsi che le pagine siano accessibili anche quando le tecnologie più recenti non sono supportate o sono disabilitate.

32 pagina 32 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 7 Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo. Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si autoaggiornano possano essere arrestati temporaneamente o definitivamente.

33 pagina 33 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 8 Assicurare l'accessibilità diretta delle interfacce utente incorporate. Assicurarsi che la progettazione delle interfacce utente segua i principi dell'accessibilità: accesso alle diverse funzionalità indipendente dai dispositivi usati, possibilità di operare da tastiera, comandi vocali, ecc.

34 pagina 34 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 9 Progettare per garantire l'indipendenza da dispositivo. Usare caratteristiche che permettono di attivare gli elementi della pagina attraverso una molteplicità di dispositivi di input.

35 pagina 35 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web In pratica Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti. Specificare l'ordine di tabulazione tramite l'attributo "tabindex" oppure garantire una disposizione logica della pagina. Fornire scorciatoie da tastiera per i collegamenti importanti, per i controlli dei moduli, e per i gruppi di controlli dei moduli. Specificare scorciatoie tramite l'attributo "accesskey".

36 pagina 36 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 10 Usare soluzioni provvisorie. Usare soluzioni provvisorie in modo che le tecnologie assistive e i browser più vecchi possano operare correttamente.

37 pagina 37 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 11 Usare le tecnologie e le raccomandazioni del W3C. Usare le tecnologie del W3C (in conformità con le specifiche) e seguire le raccomandazioni sull'accessibilità. Nei casi in cui non sia possibile usare una tecnologia del W3C, oppure se nell'utilizzarla si ottenesse materiale che non si trasforma in maniera elegante, fornire una versione alternativa del contenuto che sia accessibile.

38 pagina 38 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 12 Fornire informazione per la contestualizzazione e l'orientamento. Fornire informazione per la contestualizzazione e l'orientamento, per aiutare gli utenti a comprendere pagine od elementi complessi.

39 pagina 39 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web In pratica Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato. Usare OPTGROUP per raggruppare gli elementi OPTION all'interno di un SELECT; raggruppare i controlli dei moduli con FIELDSET e LEGEND; usare liste annidate quando è appropriato; usare intestazioni per strutturare i documenti. Associare esplicitamente le etichette ai loro controlli. Usare LABEL e il suo attributo "for"

40 pagina 40 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 13 Fornire chiari meccanismi di navigazione. Fornire chiari e coerenti meccanismi di navigazione (informazione per l'orientamento, barre di navigazione, una mappa del sito, ecc.) per aumentare le probabilità che una persona trovi quello che sta cercando in un sito.

41 pagina 41 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Linee guida per l'accessibilità ai contenuti del Web Linea guida 14 Assicurarsi che i documenti siano chiari e semplici. Assicurarsi che i documenti siano chiari e semplici in modo che possano essere compresi più facilmente.

42 pagina 42 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Statistiche di accesso Ci sono alcune caratteristiche particolari che non vanno trascurate nella creazione di un sito internet tra cui: struttura grafica navigabilità comunicazione immediata tipologia di servizi offerti

43 pagina 43 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Statistiche di accesso Tutte queste caratteristiche devono essere valutate in una prima fase di analisi e creazione del sito, ma devono essere rivalutate una volta che il sito viene messo on-line e gli utenti iniziano ad utilizzarlo.

44 pagina 44 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Statistiche di accesso Queste analisi secondaria è obbligatoria per la funzionalità del sito, perché non tutti recepiscono in modo uguale le informazioni che noi passiamo attraverso l’immagine del sito.

45 pagina 45 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Statistiche di accesso E’ a questo punto che le statistiche diventano uno strumento importante. Avendo a disposizione statistiche particolareggiate sarete in grado di capire: in che modo gli utenti navigano all’interno del sito per valutare se le cose più importanti vengono recepite quali tipi di pagine sono più gradite e hanno un numero maggiore di visite Potrete poi eseguire quelle piccole modifiche che vi permetteranno di ottenere il risultato voluto.

46 pagina 46 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Valutazione siti web Giancarlo Scola Ufficio sviluppo risorse umane e organizzazione - Ufficio dirigenziale affari generali e comunicazione - Delegato del Rettore per l'integrazione degli Studenti disabili - CSITA Centro Servizi Informatici e Telematici di Ateneo - Servizio Orientamento

47 pagina 47 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Validazione siti accessibili Normativa Gli allegati A e B del D.M. definiscono requisiti tecnici e criteri di valutazione soggettiva per la definizione dell'accessibilità di un sito web. I requisiti tecnici si basano: sulle linee guida del W3C sul paragrafo 1194.22 della Sezione 508 del Rehabilitation Act degli USA sullo standard e sulle specifiche tecniche definite in materia di accessibilità dalla International Organization for Standardization (ISO)

48 pagina 48 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Validazione siti accessibili Verifica tecnica diretta del rispetto delle linee guida in tema di disabilità con strumenti automatici e revisione umana. I metodi automatizzati sono di solito rapidi e convenienti ma non riescono ad identificare tutti i problemi dell'accessibilità. La revisione umana può aiutare ad assicurare la chiarezza di linguaggio e la facilità di navigazione.

49 pagina 49 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Strumenti automatici di validazione dell'accessibilità. Cynthia Says™ Portal http://www.contentquality.com Tali strumenti non risolvono tutti i problemi di accessibilità, ma danno un valido aiuto nell'individuazione di eventuali errori.

50 pagina 50 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Strumenti di validazione della sintassi dei linguaggi di markup usati. Markup Validation Service http://validator.w3.org Permettono di evitare errori nella sintassi, evitando così errori di visualizzazione da parte dei browser.

51 pagina 51 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Strumenti di validazione dei fogli di stile. CSS Validator http://jigsaw.w3.org/css-validator/validator- uri.html Permettono di evitare errori nella sintassi, evitando così errori di visualizzazione da parte dei browser.

52 pagina 52 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Testare il sito con browser o emulatori solo testuali. Lynx Textual browser http://lynx.isc.org/ Permettono di visualizzare il sito in assenza di elementi grafici per valutarne la resa. Un sito ben progettato è accessibile anche in tali ambiente.

53 pagina 53 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Testare il sito con differenti browser sia vecchi che nuovi, in condizioni diverse. con suoni e grafici caricati con grafici non caricati con suoni non caricati senza mouse con frame, script, fogli di stile e applet non caricati Permette di valutare la resa del sito anche su vecchie versioni dei browser che non supportano o che hanno disabilitate alcune tecnologie.

54 pagina 54 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Testare il sito con le tecnologie assistive o in condizioni limite. Lettori di schermo (screen reader) Software ingrandente (magnifier) Piccoli display (basse risoluzioni e/o computer palmari o cellulari)

55 pagina 55 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Controllare la sintassi e la grammatica dei linguaggi naturali. Una persona che legge una pagina con un sintetizzatore vocale può non essere in grado di decifrare il miglior tentativo del sintetizzatore per una parola con un errore. Eliminare problemi di grammatica migliora la comprensione.

56 pagina 56 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Rivedere la chiarezza e la semplicità del documento. Statistiche di leggibilità, come quelle generate da alcuni word processor possono essere degli utili indicatori di chiarezza e semplicità. Contattare un esperto per revisionare il testo e verificarne la chiarezza. Migliorare l'utilizzabilità dei documenti identificando problemi culturali potenzialmente rilevanti che possono sorgere a causa dell'uso del linguaggio o delle icone.

57 pagina 57 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Metodi di validazione Invitare persone con una disabilità a revisionare i documenti. Utenti disabili esperti e principianti forniscono un valido feedback sui problemi dell'accessibilità e dell'utilizzabilità e delle difficoltà.

58 pagina 58 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Priorità Ad ogni linea guida del W3C sono stati assegnati dei punti di controllo per verificare se tali linee sono state soddisfatte. A ciascun punto di controllo è stato assegnato un livello di priorità basato sull'impatto che tale punto possiede sull'accessibilità.

59 pagina 59 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Priorità [Priorità 1] Lo sviluppatore di contenuti Web deve conformarsi al punto di controllo. In caso contrario, a una o più categorie di utenti viene precluso l'accesso alle informazioni presenti nel documento. La conformità a questo punto di controllo costituisce un requisito base affinché alcune categorie di utenti siano in grado di utilizzare documenti Web.

60 pagina 60 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Priorità [Priorità 2] Lo sviluppatore di contenuti Web dovrebbe conformarsi a questo punto di controllo. In caso contrario per una o più categorie di utenti risulterà difficile accedere alle informazioni nel documento. La conformità a questo punto consente di rimuovere barriere significative per l'accesso a documenti Web.

61 pagina 61 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Priorità [Priorità 3] Lo sviluppatore di contenuti Web può tenere in considerazione questo punto di controllo. In caso contrario, una o più categorie di utenti sarà in qualche modo ostacolata nell'accedere alle informazioni presenti nel documento. La conformità a questo punto migliora l'accesso ai documenti Web.

62 pagina 62 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità A seconda dei livelli di priorità soddisfatti si ottengono: Livello di Conformità "A": se conforme a tutti i punti di controllo di Priorità 1. Livello di Conformità "Doppia-A": se conforme a tutti i punti di controllo di Priorità 1 e 2. Livello di Conformità "Tripla-A": se conforme a tutti i punti di controllo di Priorità 1, 2 e 3.

63 pagina 63 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità Per dichiarare ufficialmente la conformità, sotto la propria responsabilità esistono due possibilità: Testuale, ad esempio: Questa pagina è conforme alle "Linee guida per l'accessibilità ai contenuti del Web 1.0" del W3C disponibili a http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505 livello Doppia-A. http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

64 pagina 64 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità Visuale Includendo su ciascuna pagina che si dichiara conforme, una delle tre icone fornite dal W3C e collegare l'icona all'appropriata spiegazione W3C riguardante la dichiarazione. Informazioni circa le icone e su come inserirle all'interno delle pagine sono disponibili presso http://www.w3.org/WAI/WCAG1-Conformance.html

65 pagina 65 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità Quelli che abbiamo visto sono metodi di validazione del tutto completi, e un sito che rispetta le indicazioni del W3C è del tutto accessibile. Bisogna però tenere presente che, per motivi legislativi, i siti della PA possono essere controllati, su richiesta della struttura interessata, seguendo metodologia e criteri contenuti nella cosidetta “Legge Stanca” da persone autorizzate dal ministero.

66 pagina 66 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità In particolare, l'allegato D elenca i requisiti di accessibilità per i siti internet e l'allegato E definisce il logo di accessibilità dei siti Web. La differenza è che, mentre il logo del W3C viene apposto a scelta e sotto la responsabilità dell'autore del sito senza alcun valore legale, la verifica e l'apposizione del logo ufficiale sono a carico di persone esterne, verificatori iscritti presso il ministero.

67 pagina 67 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità Logo di conformità ai requisiti previsti per la verifica tecnica.

68 pagina 68 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Logo di conformità ai requisiti previsti per la verifica tecnica con attribuzione, nella verifica soggettiva, di un punteggio medio maggiore o uguale a 2 e minore di 3.

69 pagina 69 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Logo di conformità ai requisiti previsti per la verifica tecnica con attribuzione, nella verifica soggettiva, di un punteggio medio maggiore o uguale a 3 e minore di 4.

70 pagina 70 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Conformità Logo di conformità ai requisiti previsti per la verifica tecnica con attribuzione, nella verifica soggettiva, di un punteggio medio maggiore o uguale a 4.

71 pagina 71 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Progettazione e realizzazione siti accessibili Giancarlo Scola Ufficio sviluppo risorse umane e organizzazione - Ufficio dirigenziale affari generali e comunicazione - Delegato del Rettore per l'integrazione degli Studenti disabili - CSITA Centro Servizi Informatici e Telematici di Ateneo - Servizio Orientamento

72 pagina 72 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Progettazione Multibrowser  E' bene tenere presente che esistono molti browser diversi.  Sebbene esistano degli standard, questi non sono supportati allo stesso modo dai diversi browser.  Questo può portare a dover progettare un sito che si adatti in modo dinamico al client dell'utente.

73 pagina 73 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Progettazione Multibrowser Evitare di ricorrere ai tag HTML specifici di ogni browser, ma usare sempre e solo quelli che appartengono allo standard. Ad esempio il tag è specifico di IE e il tag è specifico di Netscape, ma nessuno dei due appartiene allo standard HTML.

74 pagina 74 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Progettazione Multibrowser Nell'uso di Javascript, è bene tenere presente che ogni browser ha una visione astratta del documento (D.O.M. Document Object Model) diversa, quindi è bene prevedere uno script diverso per ogni browser. Esistono semplici script che permettono di ottenere dal browser tutte le informazioni necessarie.

75 pagina 75 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Principi generali Principio Fondamentale Separare impaginazione e contenuto Questo principio vale in generale, non solo per i siti web accessibili. http://www.csszengarden.com/

76 pagina 76 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Principi generali Impaginazione CSS – Cascading Style Sheet Contenuto HTML, XML

77 pagina 77 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS CSS è l'acronimo di Cascading Style Sheets Gli stili definiscono come visualizzare gli elementi HTML Gli stili si trovano nei Fogli di Stile o nel documento stesso Gli stili sono stati aggiunti a partire da HTML 4.0 I Fogli di Stile fanno risparmiare un sacco di lavoro

78 pagina 78 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Sintassi La sintassi CSS è formata da 3 parti: un selettore, una proprietà e un valore selettore { proprietà:valore } Il selettore è normalmente il tag HTML a cui assegnare lo stile La proprietà è l'attributo a cui assegnare lo stile Ad ogni proprietà si assegna un valore, ad esempio: body {color: black}

79 pagina 79 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Se il valore è composto da più parole, esso è contenuto tra doppi apici, ad esempio: p {font-family: "sans serif"} Più di una proprietà può essere specificata per un selettore, in tal caso esse vanno separate da un punto e virgola, ad esempio: p {text-align:center; color:red}

80 pagina 80 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Raggruppamento Si possono raggruppare i selettori, separati da una virgola, per assegnargli lo stesso stile, ad esempio: h1,h2,h3,h4,h5,h6 {color: green}

81 pagina 81 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Il selettore di classe Con il selettore di classe potete definire diversi stili per lo stesso tag HTML, ad esempio: p.right {text-align: right} p.left {text-align: left} Ricordate di usare l'attributo class nell'HTML: Paragrafo allineato a destra Paragrafo allineato a sinistra

82 pagina 82 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Si può omettere il selettore e definire uno stile che verrà applicato a tutti i tag HTML che appartengono a quella classe, ad esempio:.center {text-align: center} farà in modo che tutti i tag HTML con attributo class=”center” abbiano il testo centrato

83 pagina 83 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Il selettore di identità Con il selettore di identità si definisce lo stesso stile per differenti tag HTML, ad esempio: p#tipo1 {text-align: center; color: red} Bisogna usare l'attributo id nell'html Paragrafo tipo 1

84 pagina 84 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Si può omettere il selettore e definire uno stile che verrà applicato a tutti i tag HTML che hanno la stessa identità, ad esempio: #green {color: green} farà in modo che tutti i tag HTML con attributo id=”green” abbiano il testo in colore verde.

85 pagina 85 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Commenti nei fogli di stile Si possono inserire dei commenti nei fogli di stile, tali commenti devono essere contenuti fra i caratteri /* e */, ad esempio: /* Questo è un commento */ p { text-align: center; /* Questo è un altro commento*/ font-family: arial} Il browser semplicemente ignora tutto ciò che si trova tra i caratteri /* e */.

86 pagina 86 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Come inserire un foglio di stile Quando il browser legge un foglio di stile, formatta il testo secondo le direttive. Ci sono tre modi di inserire un foglio di stile: CSS esterno al documento CSS interno al documento CSS inline al documento

87 pagina 87 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS CSS esterno al documento Ideale e altamente consigliato sempre, permette di applicare il CSS a molte pagine contemporaneamente. Nel tag del documento bisogna inserire il riferimento al CSS, ad esempio:

88 pagina 88 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS CSS interno al documento Per un singolo documento con un singolo stile, nella sezione del documento usare il tag, ad esempio:.........

89 pagina 89 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS CSS inline nel documento Brutto e altamente sconsigliato, perché in contraddizione con il nostro principio fondamentale. Si tratta di applicare lo stile direttamente nel tag interessato, ad esempio:........

90 pagina 90 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Sfondo Le proprietà dello sfondo permettono di: controllare il colore di un elemento definire una immagine di sfondo ripetere una immagine verticalmente o orizzontalmente posizionare una immagine in una pagina.

91 pagina 91 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Testo Le proprietà del testo permettono di : controllare come appare un testo cambiarne il colore aumentare o diminuire lo spazio tra i caratteri allineare un testo, decorarlo, identarlo.

92 pagina 92 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Caratteri Le proprietà dei caratteri permettono di selezionare il carattere il suo peso la sua grandezza il suo stile

93 pagina 93 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Bordi, margini e spaziatura Tutte queste proprietà fanno riferimento ad un modello virtuale detto box-model che parte da un presupposto fondamentale: Una pagina HTML non è altro che un insieme di box rettangolari con attributi propri che vanno posizionati nell'area visibile del browser.

94 pagina 94 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Il box model Ogni box comprende un certo numero di attributi di base, ciascuno modificabile con proprietà dei CSS. La figura seguente mostra visivamente tali componenti.

95 pagina 95 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS

96 pagina 96 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Il box model Ogni box viene dichiarata come classe in un CSS e viene inserita nella pagina HTML tramite il tag.

97 pagina 97 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS.nomebox {.....} HTML....

98 pagina 98 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Classificazione Le proprietà di classificazione permettono di: controllare come un elemento verrà mostrato di posizionare immagini controllare la visibilità di un elemento controllare il cursore

99 pagina 99 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Posizionamento Le proprietà di posizionamento permettono di specificare la posizione di un elemento specificare la grandezza di un elemento decidere cosa fare quando un elemento troppo grande

100 pagina 100 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Unità di misura Esistono vari modi per esprimere le unità di misura in un CSS. La distinzione principale è tra unità assolute e unità relative.

101 pagina 101 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Unità assolute in (inches; 1in=2.54cm) cm (centimetri) mm (millimetri) pt (points; 1pt=1/72in) pc (picas; 1pc=12pt) Unità relative em (ems, altezza del font corrente) ex (x-height, altezza lettera x) px (pixels, relativo alla risoluzione corrente) % (percentuale)

102 pagina 102 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web CSS Un valore è formato da un + o un – opzionali, seguiti da un numero, seguito a sua volta da una unità di misura. Non ci sono spazi tra questi elementi. Ad esempio: [+,-]1.3 em errato [+,-]1.3em esatto

103 pagina 103 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Programmazione lato server Per evitare di scrivere del codice compatibile con ogni client, si ricorre alla programmazione lato server, che permette di scegliere delle tecnologie di riferimento e di usarle in un ambiente noto. Con la programmazione server-side il programma viene eseguito sul server e produce un output in formato HTML. Con la programmazione server-side, si protegge il codice sorgente e si possono usare risorse specializzate disponibili sul server.

104 pagina 104 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Programmazione lato server Possibili combinazioni di ambienti/tecnologie sono: L.A.M.P. - Linux, Apache, Mysql, PHP. W.A.M.P. - Windows, Apache, Mysql, PHP. W.I.S.A. - Windows, IIS, SQL Server, ASP. Ulteriori combinazioni sono possibili, ove esistano delle librerie di compatibilità tra i diversi ambienti o si scelgano tecnologie diverse.

105 pagina 105 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Programmazione lato server Lo schema di funzionamento:

106 pagina 106 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP PHP è l'acronimo ricorsivo di PHP Hypertext Preprocessor. PHP fa la sua prima apparizione nel 1994. PHP è un linguaggio opensource, con la sintassi molto simile al linguaggio C, a cui è ispirato.

107 pagina 107 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP Il codice PHP si inserisce in file che possono contenere anche tag HTML. Tali file, che prendono l'estensione.php, vengono processati dal server e l'output inviato al client.

108 pagina 108 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP Ecco un semplice esempio di file PHP: PHP Test <?php echo ' Hello World '; echo ' ' ; ?>

109 pagina 109 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP PHP, pur essendo un linguaggio debolmente tipato, possiede dei tipi base per i dati. Quattro tipi scalari: integer boolean float string Due tipi strutturati: array object

110 pagina 110 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP In PHP variabili e costanti si definiscono in modo diverso. Le costanti si definiscono con la funzione define e sono solo di tipo non strutturato: define("CONST","something"); Le variabili devono iniziare con il carattere $ e possono essere di qualsiasi tipo. $var =valore; Il tipo di $var dipende dal tipo di valore.

111 pagina 111 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP I costrutti del linguaggio PHP sono quelli tipici di un linguaggio di programmazione, tra i più importanti troviamo: if...else while do...while switch for foreach

112 pagina 112 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP Esiste una direttiva particolare, molto utile in quanto evita di scrivere codice uguale in file diversi: include(nome_file) Questa direttiva include in un file PHP un file esterno che contiene altro codice PHP.

113 pagina 113 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP PHP permette di dichiarare funzioni che sono utili per evitare di ripetere lo stesso codice molte volte all'interno di un file: function nome_funzione (parametri) { istruzioni } Tali funzioni verranno poi richiamate in questo modo: $var = nome_funzione(parametri);

114 pagina 114 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Il linguaggio PHP PHP dispone di una vasta gamma di librerie che ne fanno uno dei linguaggi più usati nella programmazione lato server. La documentazione per queste librerie è accessibile al sito ufficiale del linguaggio.sito ufficiale del linguaggio

115 pagina 115 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Server Side Include I Server Side Include sono il tipo più semplice di programmazione lato server. Il loro uso primario è quello di includere nel file corrente altri file. I file HTML che contengono delle direttive SSI hanno normalmente estensione.shtml.

116 pagina 116 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Server Side Include La sintassi SSI è molto semplice: Le direttive sono messe in un commento HTML in modo che se il server non supporta i SSI, questi sono semplicemente ignorati.

117 pagina 117 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Server Side Include Le due più comuni direttive sono: include con il parametro virtual exec con i parametri cgi o cmd oppure

118 pagina 118 Università degli Studi di Genova Corso di formazione sull'accessibilità dei siti web Content Management Systems I Content Management Systems o CMS, sono dei sistemi che permettono di organizzare e facilitare la creazione collaborativa di documenti e contenuti. I CMS sono spesso delle applicazioni web usate per gestire siti e, soprattutto, i contenuti, indipendentemente da come questi sono presentati. Il mercato dei CMS è ad oggi molto frammentato e non esistono soluzioni che diano risultati rilevanti dal punto di vista dell'accessibilità.