Web accessibility (WAI)Requisiti tecnici e logici per rendere un prodotto  conforme ai requisiti della "Legge Stanca"
Legge stanca     ● D.M. 9 luglio 2004 formato da 9 articoli che regola       laccessibilità dei siti web in Italia;       ...
Tecnologie assistive:                    Configurazioni particolari:Tecnologie utilizzate da chi possiede    Quelle config...
Soggetti obbligati a rispettare la legge.●   Pubbliche amministrazioni;●   Enti pubblici economici, alle aziende private c...
Loghi rilasciati●   Logo rilasciato dalla Digit PA (Cnipa)    Ente a cui viene sottoposta la validazione del sito.    Cnip...
Requisiti tecnici:                                                         w3c              Scrivere correttamente codice ...
Requisiti tecnici:                                                    wcag                                   Web Content A...
Tecnicamente come viene attuata questa analisi?   Simulare condizioni di:    ● Assenza javascript;    ● Assenza css;    ● ...
Livelli di sviluppo:Si dividono in uno o più livelli.Esempio:Ho un form di ricerca in autocompletamento. Digitando la paro...
Livelli di sviluppo:                                                            Lideale per questo form è individuare 2 li...
Sfatiamo alcuni tabù:Posso sicuramente:                               Non posso: ● Non porre freno alla creatività        ...
Linee guida tecniche da seguire:Layout;     a.  Colori e contrasto;     b.  Impaginazione;     c.  Cross browsing;1.   Tag...
Linee guida tecniche da seguire:1. Layout     a. Colori e contrastoGli elementi grafici e i testi devono essere contrastat...
Linee guida tecniche da seguire:1. Layout     b. Impaginazione- I contenuti grafici e testuali devono potersi adattare all...
Linee guida tecniche da seguire:1. Layout     c. Cross browsing- Bisogna garantire la fruibilità anche per browser meno re...
Linee guida tecniche da seguire:2. Tag e semantica- In una pagina spazio per un solo tag H1 ed utilizzare h2 per i titoli ...
Linee guida tecniche da seguire:3. Navigazione nascosta- E consigliato inserire un menu in navigazione nascosta ancorato a...
Linee guida tecniche da seguire:4. Tabindex- La navigazione attraverso la tabulazione è obbligatoria.La tecnica è quella d...
Linee guida tecniche da seguire:5. Form datiLa corretta anatomia di un form è la seguente:<form method="post" action="cont...
Linee guida tecniche da seguire:6. Video e contenuti multimedialiContenuti non fruibili da tutti come ad esempio i video, ...
Linee guida tecniche da seguire:7. Access keyLe scorciatoie da tastiera sono obbligatorie e descrivono le aree principali ...
Web Accessibility Requisiti tecnici e logici per rendere un prodotto conforme ai requisiti della "Legge Stanca"A cura di:M...
Upcoming SlideShare
Loading in …5
×

Web accessibility e legge Stanca

4,046 views

Published on

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,046
On SlideShare
0
From Embeds
0
Number of Embeds
714
Actions
Shares
0
Downloads
43
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web accessibility e legge Stanca

  1. 1. Web accessibility (WAI)Requisiti tecnici e logici per rendere un prodotto conforme ai requisiti della "Legge Stanca"
  2. 2. Legge stanca ● D.M. 9 luglio 2004 formato da 9 articoli che regola laccessibilità dei siti web in Italia; IN SOSTANZA La capacità dei sistemi informatici di erogare informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o di configurazioni particolari.Puoi consultare la legge allindirizzo: www.governo.it/Presidenza/web/regolamento09072004.html
  3. 3. Tecnologie assistive: Configurazioni particolari:Tecnologie utilizzate da chi possiede Quelle configurazioni che per errore ohandicap visivi o motori: per sicurezza vengono disabilitate a priori:● Screen reader;● Facilitatori hw per disabilità Assenza di: motorie. ● Javascript; ● Flash reader; ● Immagini; ● Css; Possiamo dire che: Un sito web è accessibile se rispetta soluzioni alternative a configurazioni particolari ed è conforme a tecnologie assistive.
  4. 4. Soggetti obbligati a rispettare la legge.● Pubbliche amministrazioni;● Enti pubblici economici, alle aziende private concessionarie di servizi pubblici;● Aziende municipalizzate regionali;● Enti di assistenza e di riabilitazione pubblici;● Aziende di trasporto e di telecomunicazione a prevalente partecipazione di capitale pubblico;● Aziende appaltatrici di servizi informatici.
  5. 5. Loghi rilasciati● Logo rilasciato dalla Digit PA (Cnipa) Ente a cui viene sottoposta la validazione del sito. Cnipa classifica il lavoro da 1 a 3 stelle;● Logo w3c: la validazione deve essere effettuata da chi sviluppa il sito web. Se la validazione ha esito positivo w3c rilascia il logo;● Logo CSS: rispetto della validazione CSS (versione 2 o 3). Deve essere effettuata da chi sviluppa il sito web. E la meno importante delle 3.
  6. 6. Requisiti tecnici: w3c Scrivere correttamente codice Buona stesura del XHTML CSS ● Evitare duplicazioni logiche * Dichiarare un doctype di tipo (rispetto della semantica); "strict"; allinterno del quale indico la versione dellxhtml; ● Evitare errori fatali (rispetto della grammatica). ● Markup html4 strict;* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">N.B.Scrivere un buon codice XHTML valido aumenta lapprezzabilità da parte dei più grandi motori di ricerca (Google,Yahoo,...mamma.com :)
  7. 7. Requisiti tecnici: wcag Web Content Accessibility GuidelinesLe Web Content Accessibility Guidelines (WCAG) 2.0 contengono una ampia gamma di recommendationstudiate per rendere i contenuti del Web maggiormente accessibili. Seguendo queste linee guida, saràpossibile creare contenuti accessibili alla più ampia gamma di persone con disabilità, tra cui la cecità elipovisione, la sordità e la perdita di udito, limitazioni cognitive e dellapprendimento, ridotte capacità dimovimento, disabilità della parola, fotosensibilità e combinazioni di queste. Il rispetto di linee guida spessorenderà i vostri contenuti Web più usabili per tutti gli utenti in generale. IN SOSTANZA Wcag prevede in fase di brief unattenta analisi tecnica preliminare allimpaginazione del sito. Studiare soluzioni alternative a mezzi tecnici abituali.
  8. 8. Tecnicamente come viene attuata questa analisi? Simulare condizioni di: ● Assenza javascript; ● Assenza css; ● Assenza immagini; ● Assenza di script in generale (iframe, swf, ecc...).Spesso i siti web accessibili che vediamo lasciano desiderare graficamente poiché in fase di analisi si evita inpartenza i 4 punti sopraelencati; Cio non esclude che: ● I siti accessibili devono essere tutti brutti graficamente; ● Limite alla creatività grafica e di programmazione; Semplicemente basterebbe organizzare le informazioni a livelli:
  9. 9. Livelli di sviluppo:Si dividono in uno o più livelli.Esempio:Ho un form di ricerca in autocompletamento. Digitando la parola compare una lista di keywords, al click del singoloitem compaiono i risultati di ricerca:
  10. 10. Livelli di sviluppo: Lideale per questo form è individuare 2 livelli di sviluppo: 1° Livello: navigazione attraverso metodo post che permette al form di funzionare correttamente anche in assenza di javascript; 2° Livello: caratterizzazione e creatività di programmazione utilizzando chiamate asincrone via ajax.N.B.Per essere un form accessibile il 1° livello è SEMPRE obbligatorio poiché oltre a favorire gente con handicap facilita lanavigazione per chi utilizza più la tastiera del mouse (e sono in tanti).Nel caso specifico, manca il tasto "submit". Obbligatorio in ogni caso.IN SOSTANZA:Il primo livello di sviluppo deve essere concepito come un livello sicuramente funzionante in ognicasistica possibile ed immagibabile. (es. Menu a tendina, slider jquery, e cosi via).
  11. 11. Sfatiamo alcuni tabù:Posso sicuramente: Non posso: ● Non porre freno alla creatività ● Utilizzare html5; grafica; ● Utilizzare javascript; ● Utilizzare AJAX; ● Utilizzare flash e/o video in generale. ● Utilizzare CSS3; ● Utilizzare framework facilitativi come bootstrap, boilerplate, 960gs ecc... Semplicemente: Organizzando le parti non accessibili in livelli o contenuti alternativi.
  12. 12. Linee guida tecniche da seguire:Layout; a. Colori e contrasto; b. Impaginazione; c. Cross browsing;1. Tag e semantica;2. Navigazione nascosta;3. Tabindex;4. Form dati;5. Video e contenuti multimediali;6. Access key.
  13. 13. Linee guida tecniche da seguire:1. Layout a. Colori e contrastoGli elementi grafici e i testi devono essere contrastati a sufficienza. Un sito pococontrastato potrebbe non rispettare i requisiti wcag 1.0 e 2.0;Assicuratevi che testi e grafica siano comprensibili se visti senza colore;_________________________________________________________________Sono disponibili online software per lanalisi preliminare dei colori:Contrast Analyser 2.2 è quello più accreditato e disponibile sia per osx che perwindows.
  14. 14. Linee guida tecniche da seguire:1. Layout b. Impaginazione- I contenuti grafici e testuali devono potersi adattare alle dimensioni della finestradel browser utilizzata dallutente. Soluzioni: ● Realizzare un layout liquido basato sulle percentuali anziché sui pixel; ● Adottare tecniche di design reattivo (responsive design) anche utilizzando i pixel;- I font vanno dichiarati in unità di misura "em".- Eseguire i test su risoluzioni che partono da 800x600;In questo caso framework come Bootstrap sono lideale poiché gestiscono in automatico le diverse risoluzioni diuna pagina. Il Css non è totalmente validato ma è un problema minore.
  15. 15. Linee guida tecniche da seguire:1. Layout c. Cross browsing- Bisogna garantire la fruibilità anche per browser meno recenti. Non è detto che icontenuti devono essere correttamente visualizzabili ma quanto meno bisognapreparare dei messaggi alternativi o pagine più semplici. Soluzioni: ● In questo i commenti condizionali di Internet Explorer possono tornare utili;
  16. 16. Linee guida tecniche da seguire:2. Tag e semantica- In una pagina spazio per un solo tag H1 ed utilizzare h2 per i titoli più rilevanti;Il titolo di un quotidiano è lelemento preponderante rispetto a tutte le informazioni.Analogamente la soluzione ideale è quella di inserire il titolo del sito comeelemento h1 a cui attribuiamo unimmagine di sfondo (logo del sito).Chi leggerà con strumenti ausiliari o senza css il lettore capirà automaticamenteche lh1 (tag di rilevanza) è lelemento che contraddistingue il titolo del sito;<h1><span>Il mio sito</span></h1> h1{ width:320px; height:90px; background-image:url(logo.jpg); } h1 span{ display:none; }
  17. 17. Linee guida tecniche da seguire:3. Navigazione nascosta- E consigliato inserire un menu in navigazione nascosta ancorato a 2 o 3contenuti più importanti allinterno di una pagina.Solitamente questo menu va inserito subito dopo lapertura del tag body comeprima istruzione e nascosto via css, in modo tale da far fruire meglio il contenutoper chi utilizza screen reader e saltare elementi inutili e ripetitivi nella natura di unsito web.<ul class="hidden_menu"> .hidden_menu{ display:none; } <li><a href="#menu">Menu principale</a></li> <li><a href="#contenuto">Vai al contenuto dellapagina</a></li></ul>
  18. 18. Linee guida tecniche da seguire:4. Tabindex- La navigazione attraverso la tabulazione è obbligatoria.La tecnica è quella di individuare gli elementi più importanti del sito e attribuirgli untabindex. Solitamente le voci di menu sono le più importanti ma se dopo avernavigato un sito entro nella pagina "contatti" mi aspetto che cliccando tasto tab ilfocus si setti direttamente sul primo campo del form contatti in modo tale daraggiungere lo scopo per il quale ho navigato la pagina ossia quello di contattare.<ul class="menu"> <li><a href="home.php" tabindex="10">Home</a></li> <li><a href="chi_siamo.php" tabindex="11">Chi siamo</a></li> <li><a href="contatti.php" tabindex="12">Contatti</a></li></ul><form method="post" action="contattaci.php"> <label>Inserisci il nome</label> <input tabindex="1" type="text" name="nome" /></form>
  19. 19. Linee guida tecniche da seguire:5. Form datiLa corretta anatomia di un form è la seguente:<form method="post" action="contattaci.php"> <fieldset> <label for="nome">Inserisci il nome</label> <input tabindex="1" id="nome" type="text" name="nome" /> <label for="cognome">Inserisci il cognome</label> <input tabindex="2" id="cognome" type="text" name="cognome" /> <label for="testo">Testo</label> <textarea tabindex="3" name="testo" id="testo"></textare> </fieldset></form> - Con fieldset identifico un set di campi appartenente ad un form; - Label e campi devono essere legati da un attributo for e id; N.B. Nei casi in cui si ha a che fare con campi a selezione multipla (checkbox, radio button, ecc...) utilizzare tag "legend" anziché "label".
  20. 20. Linee guida tecniche da seguire:6. Video e contenuti multimedialiContenuti non fruibili da tutti come ad esempio i video, gli audio e le immagini complesse devonoessere descritti e contestualizzati.Soluzioni: ● Utilizzare il tag "longdesc" per le immagini più complesse; <img src="immagine.jpg" alt="Leggi la descrizione dellimmagine" longdesc="descrizione_immagine_colline_azzurre.html" /> ● In alternativa fornire un buon tag alternativo; ● I video e gli audio devono essere descritti testualmente e contestualizzati per favorire la fruibilità a chi non può visualizzare i contenuti multimediali; ● Utilizzare tag <object> anziché <iframe> per includere oggetti audio o video; <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/URLVIDEO"> <param name="movie" value="http://www.youtube.com/v/URLVIDEO" /> </object>
  21. 21. Linee guida tecniche da seguire:7. Access keyLe scorciatoie da tastiera sono obbligatorie e descrivono le aree principali del sito.La tecnica più comune è quella di individuare unaccess key attraverso liniziale della voce associata. A - Azienda <a accesskey="A" href="azienda.html">Azienda</a> C - Chi siamo <a accesskey="C" href="chi_siamo.html">Chi siamo</a> E - Eventi <a accesskey="E" href="eventi.html">Eventi</a> N - News <a accesskey="N" href="news.html">News</a>Soluzioni: ● Utilizzare il tag "accesskey" per i link di maggior rilevanza; ● Realizzare una pagina a margine con una tabella descrittiva di riepilogo; Soluzione facoltativa ma preferenziale sarebbe quella di evidenziare il primo carattere di un link collegato ad un accesskey in modo tale da facilitare la navigazione da tastiera. #menu li a:first-letter{ text-decoration:underline; }
  22. 22. Web Accessibility Requisiti tecnici e logici per rendere un prodotto conforme ai requisiti della "Legge Stanca"A cura di:Mario Concina

×