Web accessibility e legge Stanca

22
Web accessibility (WAI) Requisiti tecnici e logici per rendere un prodotto conforme ai requisiti della "Legge Stanca"

description

 

Transcript of Web accessibility e legge Stanca

Page 1: Web accessibility e legge Stanca

Web accessibility (WAI)Requisiti tecnici e logici per rendere un prodotto

conforme ai requisiti della "Legge Stanca"

Page 2: Web accessibility e legge Stanca

Legge stanca● D.M. 9 luglio 2004 formato da 9 articoli che regola

l'accessibilità dei siti web in Italia;

IN SOSTANZALa 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 all'indirizzo: www.governo.it/Presidenza/web/regolamento09072004.html

Page 3: Web accessibility e legge Stanca

Tecnologie assistive:

Tecnologie utilizzate da chi possiede handicap visivi o motori: ● Screen reader;● Facilitatori hw per disabilità

motorie.

Configurazioni particolari:

Quelle configurazioni che per errore o per sicurezza vengono disabilitate a priori: Assenza di:● Javascript;● Flash reader;● Immagini;● Css;

Possiamo dire che:Un sito web è accessibile se rispetta soluzioni alternative a

configurazioni particolari ed è conforme a tecnologie assistive.

Page 4: Web accessibility e legge Stanca

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.

Page 5: Web accessibility e legge Stanca

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.

Page 6: Web accessibility e legge Stanca

Requisiti tecnici:

w3c

Scrivere correttamente codice XHTML

Buona stesura del CSS

● Evitare duplicazioni logiche (rispetto della semantica);

● Evitare errori fatali (rispetto

della grammatica).

* Dichiarare un doctype di tipo "strict"; all'interno del quale indico la versione dell'xhtml;

● 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 l'apprezzabilità da parte dei più grandi motori di ricerca (Google, Yahoo,...mamma.com :)

Page 7: Web accessibility e legge Stanca

Requisiti tecnici:

wcagWeb Content Accessibility Guidelines

Le Web Content Accessibility Guidelines (WCAG) 2.0 contengono una ampia gamma di recommendation studiate 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à e l'ipovisione, la sordità e la perdita di udito, limitazioni cognitive e dell'apprendimento, ridotte capacità di movimento, disabilità della parola, fotosensibilità e combinazioni di queste. Il rispetto di linee guida spesso renderà i vostri contenuti Web più usabili per tutti gli utenti in generale.

IN SOSTANZAWcag prevede in fase di brief un'attenta analisi tecnica preliminare

all'impaginazione del sito. Studiare soluzioni alternative a mezzi tecnici abituali.

Page 8: Web accessibility e legge Stanca

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 in partenza 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:

Page 9: Web accessibility e legge Stanca

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 singolo item compaiono i risultati di ricerca:

Page 10: Web accessibility e legge Stanca

Livelli di sviluppo:

L'ideale 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 la navigazione 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 ogni casistica possibile ed immagibabile. (es. Menu a tendina, slider jquery, e cosi via).

Page 11: Web accessibility e legge Stanca

Sfatiamo alcuni tabù:

Non posso:● Utilizzare html5;

Posso sicuramente:● Non porre freno alla creatività

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.

Page 12: Web accessibility e legge Stanca

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.

Page 13: Web accessibility e legge Stanca

Linee guida tecniche da seguire:

1. Layouta. Colori e contrasto

Gli elementi grafici e i testi devono essere contrastati a sufficienza. Un sito poco contrastato 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 l'analisi preliminare dei colori: Contrast Analyser 2.2 è quello più accreditato e disponibile sia per osx che per windows.

Page 14: Web accessibility e legge Stanca

1. Layoutb. Impaginazione

- I contenuti grafici e testuali devono potersi adattare alle dimensioni della finestra del browser utilizzata dall'utente.

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;

Linee guida tecniche da seguire:

In questo caso framework come Bootstrap sono l'ideale poiché gestiscono in automatico le diverse risoluzioni di una pagina. Il Css non è totalmente validato ma è un problema minore.

Page 15: Web accessibility e legge Stanca

1. Layoutc. Cross browsing

- Bisogna garantire la fruibilità anche per browser meno recenti. Non è detto che i contenuti devono essere correttamente visualizzabili ma quanto meno bisogna preparare dei messaggi alternativi o pagine più semplici.

Soluzioni:● In questo i commenti condizionali di Internet Explorer possono tornare

utili;

Linee guida tecniche da seguire:

Page 16: Web accessibility e legge Stanca

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 è l'elemento preponderante rispetto a tutte le informazioni. Analogamente la soluzione ideale è quella di inserire il titolo del sito come elemento h1 a cui attribuiamo un'immagine di sfondo (logo del sito).Chi leggerà con strumenti ausiliari o senza css il lettore capirà automaticamente che l'h1 (tag di rilevanza) è l'elemento che contraddistingue il titolo del sito;

Linee guida tecniche da seguire:

<h1><span>Il mio sito</span></h1> h1{ width:320px; height:90px;background-image:url('logo.jpg');

} h1 span{

display:none;}

Page 17: Web accessibility e legge Stanca

3. Navigazione nascosta - E' consigliato inserire un menu in navigazione nascosta ancorato a 2 o 3 contenuti più importanti all'interno di una pagina. Solitamente questo menu va inserito subito dopo l'apertura del tag body come prima istruzione e nascosto via css, in modo tale da far fruire meglio il contenuto per chi utilizza screen reader e saltare elementi inutili e ripetitivi nella natura di un sito web.

Linee guida tecniche da seguire:

<ul class="hidden_menu"><li><a href="#menu">Menu principale</a></li><li><a href="#contenuto">Vai al contenuto della

pagina</a></li></ul>

.hidden_menu{ display:none; }

Page 18: Web accessibility e legge Stanca

4. Tabindex - La navigazione attraverso la tabulazione è obbligatoria. La tecnica è quella di individuare gli elementi più importanti del sito e attribuirgli un tabindex. Solitamente le voci di menu sono le più importanti ma se dopo aver navigato un sito entro nella pagina "contatti" mi aspetto che cliccando tasto tab il focus si setti direttamente sul primo campo del form contatti in modo tale da raggiungere lo scopo per il quale ho navigato la pagina ossia quello di contattare.

Linee guida tecniche da seguire:

<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>

Page 19: Web accessibility e legge Stanca

5. Form dati La corretta anatomia di un form è la seguente:

Linee guida tecniche da seguire:

<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".

Page 20: Web accessibility e legge Stanca

6. Video e contenuti multimediali

Linee guida tecniche da seguire:

Contenuti non fruibili da tutti come ad esempio i video, gli audio e le immagini complesse devono essere descritti e contestualizzati. Soluzioni:

● Utilizzare il tag "longdesc" per le immagini più complesse;

● 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;

<img src="immagine.jpg" alt="Leggi la descrizione dell'immagine" longdesc="descrizione_immagine_colline_azzurre.html" />

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/URLVIDEO"> <param name="movie" value="http://www.youtube.com/v/URLVIDEO" /></object>

Page 21: Web accessibility e legge Stanca

7. Access key

Le scorciatoie da tastiera sono obbligatorie e descrivono le aree principali del sito.La tecnica più comune è quella di individuare un'access key attraverso l'iniziale della voce associata. Soluzioni:

● Utilizzare il tag "accesskey" per i link di maggior rilevanza;● Realizzare una pagina a margine con una tabella descrittiva di riepilogo;

Linee guida tecniche da seguire:

A - AziendaC - Chi siamoE - EventiN - News

<a accesskey="A" href="azienda.html">Azienda</a><a accesskey="C" href="chi_siamo.html">Chi siamo</a><a accesskey="E" href="eventi.html">Eventi</a><a accesskey="N" href="news.html">News</a>

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; }

Page 22: Web accessibility e legge Stanca

A cura di:Mario Concina

Web AccessibilityRequisiti tecnici e logici per rendere un prodotto conforme ai requisiti della "Legge Stanca"