2. Legge stanca
● D.M. 9 luglio 2004 formato da 9 articoli che regola
l'accessibilità 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 all'indirizzo: www.governo.it/Presidenza/web/regolamento09072004.
html
3. Tecnologie assistive: Configurazioni particolari:
Tecnologie utilizzate da chi possiede Quelle configurazioni che per errore o
handicap 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. 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. 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. Requisiti tecnici:
w3c
Scrivere correttamente codice Buona stesura del
XHTML CSS
● Evitare duplicazioni logiche
* Dichiarare un doctype di tipo (rispetto della semantica);
"strict"; all'interno del quale indico
la versione dell'xhtml; ● 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 l'apprezzabilità da parte dei più grandi motori di ricerca (Google,
Yahoo,...mamma.com :)
7. Requisiti tecnici:
wcag
Web 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 SOSTANZA
Wcag prevede in fase di brief un'attenta analisi tecnica preliminare
all'impaginazione del sito. Studiare soluzioni alternative a mezzi tecnici
abituali.
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 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:
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 singolo
item compaiono i risultati di ricerca:
10. 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).
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. 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. Linee guida tecniche da seguire:
1. Layout
a. 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.
14. Linee guida tecniche da seguire:
1. Layout
b. 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;
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.
15. Linee guida tecniche da seguire:
1. Layout
c. 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;
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 è 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;
<h1><span>Il mio sito</span></h1> h1{
width:320px;
height:90px;
background-image:url('logo.jpg');
}
h1 span{
display:none;
}
17. Linee guida tecniche da seguire:
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.
<ul class="hidden_menu"> .hidden_menu{ display:none; }
<li><a href="#menu">Menu principale</a></li>
<li><a href="#contenuto">Vai al contenuto della
pagina</a></li>
</ul>
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 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.
<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. Linee guida tecniche da seguire:
5. Form dati
La 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. Linee guida tecniche da seguire:
6. Video e contenuti multimediali
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;
<img src="immagine.jpg" alt="Leggi la descrizione dell'immagine" 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. Linee guida tecniche da seguire:
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.
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. Web Accessibility
Requisiti tecnici e logici per rendere un prodotto conforme ai requisiti
della "Legge Stanca"
A cura di:
Mario Concina
