Il documento discute l'importanza dell'accesso universale e della qualità del web, evidenziando che molti siti non rispettano le normative di accessibilità. Viene sottolineato il ruolo cruciale degli sviluppatori e redattori web nel comprendere le esigenze degli utenti e adottare pratiche di progettazione universale. Infine, si affrontano le tecnologie assistive e le strategie redazionali per migliorare l'esperienza web per tutti gli utenti, inclusi quelli con disabilità.

1. Web: mittenti e destinatari Accesso universale e qualità del Web Progettare contenuti di qualità in conformità con le normative vigenti in Italia Istituto Professionale di Stato EUROPA Pomigliano d'Arco 13-14 novembre 2007

2. Il Web, come e perchè Ciclo di vita, qualità ed accessibilità di un sito Web Le "regole" del Web www.ipceuropa.com Parliamo di:

3. Come funziona il Web

4. Da Wikipedia… Internet “ E’ percepita come la più grande rete telematica mondiale, e collega alcune centinaia di milioni di elaboratori per suo mezzo interconnessi” Web “ Rete di risorse di informazioni, basata sull'infrastruttura di Internet”

5. In queste definizioni manca qualcosa

6. « L’uomo è la misura di tutte le cose , di quelle che sono in quanto sono e di quelle che non sono in quanto non sono» L’uomo è la misura Protagora 481 a.C. - 420 a.C.

7. Siamo uomini o… browser?

8. Siamo uomini o… browser?

9. Presente a livello: Progettuale Marketing Formazione Culturale Siamo uomini o… browser?

10. Il Know-how non basta…

11. Il Know-how non basta… Opere di ingegneria bellissime e costosissime ma che alla fine producono solo danni perché concepite da progettisti privi di know-why

12. Le vele di Scampìa

13. Le vele di Scampìa Vele di Scampia (1962-75) Si parla di esse come l’opera che meglio rappresenta la “poetica architettonica” di Franz Di Salvo (il progettista) Principi ispiratori: Unitès d’habitations di Le Corbusier Strutture "a cavalletto" proposte da Kenzo Tange

14. Il know-how non basta… Know-How è relativamente semplice da ottenere Know-Why non è affatto facile E' molto facile concetrarsi sull'implementazione e perdere di vista le motivazioni e gli obiettivi

15. Il know-how non basta…

16. Il Web è…

17. Il Web è…

18. Accesso Universale al Web

19. Qualità Progetto Standard del Web Contenuti Accessibilità Usabilità Troppi professionisti ignorano queste problematiche Il Web di oggi

20. http://www.nomensa.com/resources/research/united-nations-global-audit-of-accessibility.html - Nov 2006 100 importanti siti Web di 20 paesi Solo 3 raggiungono la singola A (WCAG 1.0) Oggi il Web è non accessibile, non è di qualità United Nations Global Audit of Web Accessibility

21. Primato degli utenti Chi lo deve perseguire? Esistono obblighi, regole, opportunità? Gli utenti… e poi?

22. I soggetti del Web

23. La favola del Webmaster La favola del Webmaster è finita , senza lieto fine! The webmaster

24. Deve saper fare: Comprendere piani di lavoro e progetti Implementare funzionalità e requisiti Tradurre specifiche e requisiti in "oggetti informatici" Lavorare in team Lo "sviluppatore" Web

25. Deve conoscere: Esigenze degli utenti e progettazione universale Standard del Web Raccomandazioni e buone pratiche "Buon senso" Lo "sviluppatore" Web

26. Deve saper fare: Progettare contenuti Web Testo, immagini, audio, video Gestire applicativi CMS Lavorare in team Il "redattore" Web

27. Deve conoscere: Esigenze degli utenti e progettazione universale Standard del Web (le basi) Scrittura sul Web "Buon senso" Il "redattore" Web

28. Parliamo di: Utenti e convenzioni Buone pratiche e raccomandazioni Normative Le regole del Web

29. Gli utenti del Web "La potenza del web e' la sua universalità . L'accesso a chiunque indipendentemente dalla disabilità e' un aspetto essenziale” ( Tim Berners Lee - Direttore del W3C, inventore del Web)

30. International Classification of Impairments, Disabilities and Handicaps (ICIDH, OMS 1980) Menomazione ( Impairment ): Qualsiasi perdita o anormalit à a carico di una struttura o una funzione psicologica, fisiologica, anatomica Disabilit à : Limitazione o perdita (conseguente a menomazione) della capacit à di compiere una attivit à nel modo e nell ’ ampiezza considerati normali Handicap: Condizione di svantaggio conseguente a una menomazione o a una disabilit à che limita o impedisce l ’ adempimento del ruolo “ normale ” per tale soggetto. I disabili: gli altri siamo noi…

31. ICIDH, 1980

32. ICIDH, 1980 Legge 104/92 - Art. 3: “ E ’ persona handicappata colui che presenta una minorazione fisica, psichica o sensoriale, stabilizzata o progressiva, che è causa di difficolt à di apprendimento, di relazione o di integrazione lavorativa e tale da determinare un processo di svantaggio sociale o di emarginazione ”

33. ICF, 2001 International Classification of Functioning, Disability and Health (ICF, 2001) Condizione di salute (disturbo / malattia) Funzione e struttura corporea ( Menomazione ) Partecipazione ( Restrizione ) Attività ( Limitazione ) Fattori Ambientali Fattori Personali

34. ICF, 2001 Il Modello ICF è : Universale Continuum fra salute e disabilit à Interessa tutti Integrativo Comprende fattori biologici, psicologici e sociali Interattivo Complesso, interazioni multiple fra le persone, la loro salute e il loro ambiente

35. “ Qualunque persona in qualunque momento della vita può avere una condizione di salute che in un ambiente sfavorevole diventa disabilit à” ( Matilde Leonardi - OMS - Responsabile del Progetto ICF in Italia) I disabili: gli altri siamo noi…

36. Cos’è l’accessibilità Sito Accessibile : Ambiente multimediale il cui contenuto informativo, nonché le relative procedure di interazione e navigazione, sono fruibili da qualunque tipologia di utenti

37. Le tecnologie assistive Come i disabili usano il Web, e non solo il Web…

38. Tecnologie assistive Per alcune tipologie di disabilit à esistono le cosiddette “ tecnologie assistive ” per utilizzare gli strumenti caratteristici della Information Technology, personal computer in primis

39. Effettuano una conversione “equivalente” dell’informazione da un organo di senso ad un altro dalla vista (schermo del PC ) al tatto (Barra Braille per non vedenti) dalla vista (schermo del PC ) all’udito (sintesi vocale per non vedenti) dall’udito (audio) alla vista (documenti testuali) (riconoscitore vocale per disabili motori e non udenti) Tecnologie assistive

40. Consentono un diverso modo di utilizzare taluni dispositivi, ad esempio: Mouse speciali (per disabili motori e altre disabilità) Tastiere speciali (per disabili motori e altre disabilità) Tecnologie assistive

41. Tecnologie assistive

42. Tecnologie assistive

43. Tecnologie assistive

44. Tecnologie assistive

45. Tecnologie assistive HeadMouse MouseMover No Hands Mouse

46. Tecnologie assistive software Software che consentono di sopperire in parte a menomazioni gravi di una facoltà sensoriale, ad esempio: Ingranditori del testo sullo schermo del PC (per gli ipovedenti)

47. Tecnologie assistive Per molte disabilit à non sono disponibili tecnologie assistive specifiche In questi casi l ’ ausilio è garantito da particolari accorgimenti tecnici (configurazioni particolari della stazione di lavoro) e redazionali nella realizzazione delle pagine del sito Web …

48. Alcuni esempi: Utenti che hanno difficoltà nella percezione dei colori http://www.toledo-bend.com/colorblind/Ishihara.html Utenti affetti da epilessie fotosensibili Utenti con difficoltà cognitive Essi possono anche trovare ausilio da alcune tecnologie assistive Tecnologie assistive

49. Tecnologie assistive Da non trascurare le difficoltà nella fruizione del Web da parte di… Utenti che dispongono di tecnologie non modernissime Utenti con scarsa alfabetizzazione informatica

50. Le variabili in gioco sono tantissime: Definizione delle modalità di visualizzazione Tipo di browser utilizzato Personalizzazione delle caratteristiche del browser: gestione delle immagini, della sicurezza e della privacy Presenza / assenza delle periferiche audio Presenza / assenza di determinati plug-in e loro possibilità di scaricamento dal Web Configurazioni Particolari

51. Progettare per TUTTI La progettazione universale come soluzione alle esigenze di tutti gli utenti del Web

52. Progettazione universale Uomo Computer

53. Progettazione universale Le fasi umane non sono portate a termine compiutamente L’utente ha solo una finestra piccolissima sul “mondo” che il PC sta proponendo in quell’istante Effetto Spioncino (Peephole)

54. Una mappa cognitiva è una cartina mentale di una zona dell'esperienza Contiene gli oggetti, la conoscenza del loro uso e funzione, la dislocazione assoluta e reciproca, ed altro ancora… Le mappe cognitive

55. Si formano in tre fasi Apprendimento di singoli "oggetti culturali" Prime relazioni tra gruppi di oggetti Integrazione completa fra gli oggetti Le mappe cognitive

56. Talvolta sono di difficile costruzione E' spesso difficile crearne diverse e parallele su oggetti analoghi ma non uguali E' sempre difficile modificarle Le mappe cognitive

57. Nuove mappe cognitive? No, grazie!

58. Nuove mappe cognitive? No, grazie!

59. Convenzioni Mappe mentali comuni a tutti gli utenti Abitudini consolidate Bisogna conoscere come gli utenti usano il Web Mappe cognitive sul Web

60. Come si identifica un link su una pagina? La sottolineatura del link è una delle convenzioni più diffuse I link non sottolineati possono essere molto difficili da individuare Esempio W3C-WAI Home page Esempio: i link

61. Colpo d'occhio Scansione della pagina Difficoltà e lentezza nella lettura Come si naviga il Web?

62. Il colpo d’occhio E' la modalità di approccio più istintiva a pagine non conosciute L’informazione visiva di una pagina nel suo insieme dà la percezione dei contenuti e della presenza o meno di particolari argomenti

63. Sul Web il testo non viene letto parola per parola, ma scansito cercando di ricavare il significato dell’intera frase da alcune parole in essa contenute E’ la tecnica di lettura preferita dal 79% degli utenti Scansione del testo

64. Utilizzare le intestazioni come fossero microcontenuti (micro-abstract) Suddividere il testo in paragrafi E’ il paragrafo , non il capitolo l’unità di misura di un testo sul Web Scansione del testo: facilitarla

65. Visualizzare, se possibile, in modo tipograficamente diverso dalle altre le parole significative in un paragrafo Tante parole significative diventano inutili: tante = nessuna La caratterizzazione tipografica deve essere diversa da quella utilizzata per rappresentare altri elementi strutturali quali intestazioni e link Scansione del testo: facilitarla

66. Scrivere per liste Schematizzare come regola fondamentale per la creazione di contenuti per il Web Scansione del testo: facilitarla

67. Software in grado di “leggere” il contenuto testuale di una pagina Web e di renderlo tramite sintesi vocale E’ utilizzato dai ciechi e dagli ipovedenti Tra i più diffusi JAWS di Freedom Scientific Windows Eyes di GW Micro HAL di Dolphin Computer Access Lo screen reader

68. Consente di: Spostarsi tra i vari elementi costituenti una pagina: parole, linee, paragrafi Leggere i soli elementi h (intestazioni), indicandone la gerarchia Saltare tra le varie tabelle della pagina Saltare tra le vari moduli della pagina Leggere le liste indicando gli eventuali livelli Lo screen reader

69. Lo screen reader E’ in grado di utilizzare l’informazione contenuta in alcuni attributi degli elementi HTML, ad esempio: alt , summary , title Consente all’utente di gestire segnalibri creati ad hoc all’interno della pagina

70. Lo screen reader Queste caratteristiche aiutano a far percepire all'utente un 'senso di controllo' su ciò che sta accadendo E’ uno degli aspetti più importanti ma anche più trascurati dell'ergonomia di un sito

71. Lo screen reader

72. Lo screen reader Esempio Yahoo

73. La Piramide Invertita : Cominciare dalla conclusione per scendere verso maggiori dettagli Non seguire non più la strutturazione classica del testo - introduzione  esposizione  argomentazione  conclusione L’utente, potendo selezionare i soli elementi h presenti in una pagina, può farsi un’idea generale dei contenuti Soluzioni redazionali

74. Suddividere il testo in paragrafi Sul web si legge molto meno testo di quanto può essere mostrato nella pagina di un libro Anche chi ascolta ha un problema analogo perché una pagina Web ha una organizzazione diversa dalla pagina di un libro Soluzioni redazionali

75. Soluzioni redazionali Il paragrafo va concepito come un elemento autonomo, breve Visivamente è separato dagli altri paragrafi da una riga di ampiezza maggiore dell’interlinea del paragrafo stesso

76. Soluzioni redazionali Dovrebbe sempre terminare con il punto perché lo screen reader è in grado di modulare il parlato in base alla punteggiatura La suddivisione in paragrafi “ scansiona ” visivamente il testo e consente agli utenti di decidere se leggere o eventualmente saltare al paragrafo successivo

77. Soluzioni redazionali: liste Usare le liste per raggruppare logicamente elementi informativi Le liste aiutano la leggibilità e la comprensione Chiariscono la sequenza e la relazione tra le idee e i fatti esposti nel testo Consentono di non utilizzare frasi subordinate che possono essere di difficile comprensione

78. Soluzioni redazionali: liste Elenchi numerati : Quando c’è una priorità delle voci, dalla più importante alla meno importante, quando si presentano una serie di passi da eseguire in successione o una serie di istruzioni. Si usano elenchi non numerati negli altri casi Gli screen reader gestiscono in maniera egregia le liste, indicando il numero di elementi e la loro eventuale indentazione

79. La lista deve essere elaborata secondo il principio del Parallelismo : Parallelismo nel contenuto : tutte le voci devono essere omogenee, riferirsi cioè alla stessa classe di informazioni o di dati Parallelismo grammaticale : o tutti sostantivi o tutti verbi, o tutti con l’articolo o tutti senza Parallelismo visivo : tutte le voci della lista devono essere introdotte dallo stesso simbolo grafico ed essere di lunghezza abbastanza simile Soluzioni redazionali: liste

80. Soluzioni redazionali: liste La frase che introduce la lista termina sempre con i due punti Suggerimenti: Non mettere nulla quando la voce di una lista è fatta di una sola o al massimo due parole; Mettere il punto e virgola quando la frase è più lunga, ma non contiene punti fermi al suo interno; Mettere il punto quando la voce è un paragrafo a sé, con punti fermi al suo interno; In questo caso tutte le voci si concludono con un punto, perché il parallelismo dovrebbe valere anche per la punteggiatura

81. Soluzioni redazionali: liste Le voci di una lista vogliono l’iniziale… Minuscola se, da un punto di vista grammaticale, sono una continuazione della frase introduttiva principale Maiuscola se sono espressioni grammaticalmente indipendenti

82. Soluzioni redazionali: liste Le liste possono avere più livelli In genere due livelli dovrebbero bastare Più di due potrebbero creare confusione e vanificare il principale obiettivo di una lista e cioè la chiarezza

83. Identificare con chiarezza la destinazione di ogni collegamento Quando creiamo un collegamento ipertestuale (link) è necessario che il testo del collegamento abbia un senso Il senso deve essere mantenuto anche se la parola viene “decontestualizzata” Soluzioni redazionali: link

84. Soluzioni redazionali: link Collegamento troppo lungo "Clicca qui" è inadatto a chi usa la tastiera Soluzione accettabile

85. Soluzioni redazionali: link Attributo "title": descrive la pagina di destinazione Attributo "title": descrive la tipologia di file che si sta per scaricare Attributo "title": informa che si aprirà una nuova finestra

86. Dare informazione equivalente utilizzando gli attributi: alt  descrizione equivalente del contenuto dell’immagine o del testo in essa presente Soluzioni redazionali: immagini

87. Soluzioni redazionali: immagini ed alternative text Luciano Moggi stanco dopo avere assittito ad un'estenutante partita delle sua Juve Luciano Moggi abbandona il campo in seguito ad un’espulsione da parte dell’arbitro. Il ghigno di Luciano Moggi dopo aver parlato al cellulare con un “cliente” Luciano Moggi vede ombre all’orizzonte

88. Testo non pertinente e poco esplicativo Testo troppo lungo Problemi di usabilita’ e overloading acustico Testo ridondante Immagini esclusivamente decorative Testo errato Soluzioni redazionali: immagini ed errori

89. Soluzioni redazionali: il linguaggio Usare il linguaggio più semplice e chiaro possibile, compatibilmente con il contenuto del sito No frasi inutilmente lunghe No linguaggio troppo burocratico No linguaggio inutilmente gergale

90. Investor relations 28 agosto 2003 | 13:44 First Half 2003 Financial Results Mercoledì 3 settembre 2003 alle ore 14.30 ( CET ) 13.30 ( UK Time ) il Gruppo Telecom Italia illustrerà i risultati del primo semestre di questo anno - approvati dal Consiglio di Amministrazione in data 2 settembre - nel corso di una conference call . Parteciperanno Marco Tronchetti Provera, Presidente, Carlo Buora, Amministratore delegato, e Riccardo Ruggiero, Amministratore Delegato di Wireline . Sarà possibile ascoltare l' audio-streaming e scaricare le slides di presentazione collegandosi a questo sito.

91. Relazioni con gli investitori 28 agosto 2003 | 13:44 Risultati finanziari del primo semestre 2003 Mercoledì 3 settembre 2003 alle 14.30 ora di Roma (13.30 ora di Londra ) il Gruppo Telecom Italia illustrerà i risultati del primo semestre di questo anno - approvati dal Consiglio di Amministrazione in data 2 settembre - nel corso di una convocazione d'assemblea . Parteciperanno Marco Tronchetti Provera, Presidente, Carlo Buora, Amministratore delegato, e Riccardo Ruggiero, Amministratore Delegato di Wireline. Sarà possibile ascoltare l' audio dell'assemblea e scaricare sul proprio computer delle pagine di presentazione collegandosi a questo sito.

92. Testo originale Qualora dal controllo dovesse emergere la non veridicità del contenuto della dichiarazione, il dichiarante decade dai benefici conseguiti sulla base della dichiarazione non veritiera, fermo restando quanto previsto dall'art. 26 della legge 4 gennaio 1968, n. 15, in materia di sanzioni penali. Reso più accessibile Chi rilascia una dichiarazione falsa, anche in parte, perde i benefici descritti e subisce sanzioni penali*. * Articolo 26, legge n. 15 del 4.1.68

93. Testo originale Tali posizioni sono da identificare non tanto in diritti irrefragabili, il cui esercizio prescinde dall'adozione di atti permissivi dell'Amministrazione, ma in situazioni giuridiche suscettibili di trasformazione a seguito di atti di tipo suindicato Reso più accessibile I cittadini che vogliono iniziare un'attività devono chiedere un'autorizzazione alle amministrazioni competenti

95. Riassume molti spunti proposti oggi: Approccio basato sull'osservazione dei fenomeni con riferimenti costanti alla situazione de facto presente in Rete Ricerca del migliore compromesso possibile in vista del raggiungimento dei propri obiettivi Il paradigma di Krug

96. Usando il Web, ogni dubbio aumenta il carico cognitivo , distraendo la nostra attenzione da quanto stiamo facendo Le distrazioni possono essere lievi ma una si somma all'altra , e talvolta basta poco per confonderci 1° legge di Krug: Don't make me think!

97. Non importa tanto quanti click vengono richiesti all'utente Basta che scegliere dove far clic non richieda troppo impegno 2° legge di Krug: Tanti clic, ma facili

98. Sbarazzati di metà delle parole di ogni testo cartaceo, e poi sbarazzati della metà di quello che resta Abbattere i " falsi contenuti " 3° legge di Krug: Parole = - 50% - 50%

99. Parliamo di: Utenti e convenzioni Buone pratiche e raccomandazioni Normative Le regole sul Web

100. Organismo transnazionale per lo sviluppo del Web www.w3.org – www.w3c.it Mission: concretizzare le potenzialità del Web

101. E' l'analogo dell'ONU Non emette leggi o standard de jure Emana " raccomandazioni " Tutti i linguaggi utilizzati sul Web hanno avuto vita grazie al W3C

102. W3C = Standard de facto Organizzato in gruppi di lavoro Teleconferenze settimanali Incontri face2face tri-quadrimestrali

103. IWA/HWG è un ’ Associazione professionale no profit riconosciuta leader mondiale nella fornitura dei principi e delle certificazioni di formazione per i professionisti della Rete Internet; è presente in 100 paesi , con 130 sedi ufficiali in rappresentanza di più di 165.000 associati . La sua missione: Fornire programmi formativi di qualità Fornire agli associati supporto e collaborazione a livello regionale, nazionale e internazionale, nonché un marchio di affiliazione riconosciuto a livello mondiale Promuovere i principi universali di etica e di pratica professionale per tutti i professionisti della Rete Internet Fornire supporto per la definizione e lo studio di normative nei Paesi in cui è presente IWA/HWG

104. Partecipazioni ed attività: Network: http://www.iwa.it - http://www.webaccessibile.org - http://www.itlists.org Contatti: http://www.iwa.it - http://educational.iwa.it - http://edizioni.iwa.it [email_address] Cos’è IWA/HWG

105. Parliamo di: Utenti e convenzioni Buone pratiche e raccomandazioni Normative Le regole sul Web

106. “ Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici” Approvata: 17 dicembre 2003 Firma del P.d.R.: 9 gennaio 2004 G.U.: n. 13 del 17 gennaio 2004 In vigore: 1 febbraio 2004 Legge Stanca 4/2004

107. Tutti i siti che realizzati, o rinnovati, in futuro dalle pubbliche amministrazioni dovranno rispettare dei requisiti di accessibilità Per i privati il provvedimento non genera un obbligo di accessibilità per i siti internet, ma è fattore di stimolo a promuovere l’accessibilità dei loro siti Tutti i libri di testo delle scuole , ove possibile, saranno resi disponibili in formati leggibili al computer da non vedenti o ipovedenti o con altre disabilità Legge Stanca, le innovazioni

108. Il sito Web dell'IPC Europa è " ragionevolmente " conforme ai 22 requisiti tecnici previsti dalla normativa Cerchiamo di mantenere elevato il suo livello qualitativo! Legge Stanca, IPC Europa

109. Da non dimenticare I passi da applicare SEMPRE nel progetto di contenuti per il Web

110. Ms Word Progettare e strutturare adeguatamente contenuti testuali per il Web Gerarchia ed intestazioni Piramide invertita Stili di Word Migliore esportazione PDF Documenti & struttura

111. Servono davvero? Limitare il loro PESO http://www.webresizer.com/ Prevedere adeguate alternative testuali Immagini per il Web

112. Testo breve ed esplicativo Eventuale descrizione aggiuntiva Destinazione del link esterno al sito Tipo e peso di documenti da scaricare Collegamenti ipertestuali