Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
1
WWW
Accessibilità del WebAccessibilità del Web
WWW
1Marco Porta - CIM: Web Design & Technologies
Cos'è l'accessibilità?Cos'è l'accessibilità?
Il W3C ha promosso la Web Accessibility Initiative (WAI)http://www.w3.org/WAI/
Definizioni
http://www.w3.org/WAI/
Secondo il W3C accessibilità del Web significa che "persone con disabilità possono usare il Web"
tutti dovrebbero avere accesso alle informazioni disponibili in rete…
Usabilità vs. Accessibilità: strettamente correlate, ma:
2Marco Porta - CIM: Web Design & Technologies
– l'usabilità ha più a che fare con la logica e la comprensioneraramente può essere valutata in modo automatico…
– l'accessibilità (anche se non sempre) ha più a che fare con aspetti "tecnici" e regole ben definite
2
14 linee guida (WCAG = Web Content Accessibility Guidelines)
WCAG WCAG 1.01.0W3C Web Accessibility Initiative
Guidelines)articolate in "checkpoint", diventate una raccomandazione ufficiale nel 1999; sono in via di definizione le WCAG 2.0 (http://www.w3.org/TR/WCAG10/)
Sono la base di diversi standard di accessibilità d l W b
3Marco Porta - CIM: Web Design & Technologies
del Web
Ogni checkpoint ha un livello di prioritàP i ità 1 d ( t) ddi f tt
Priorità e conformitàPriorità e conformitàWCAG 1.0
– Priorità 1: deve (must) essere soddisfatto
– Priorità 2: dovrebbe (should) essere soddisfatto
– Priorità 3: può (may) essere soddisfatto
Livello di conformità di un sito– Livello A: soddisfatti tutti i checkpoint di Priorità 1
– Livello AA: soddisfatti tutti i checkpoint di Priorità 1 e 2
4Marco Porta - CIM: Web Design & Technologies
– Livello AA: soddisfatti tutti i checkpoint di Priorità 1 e 2
– Livello AAA: soddisfatti tutti i checkpoint di Priorità 1, 2 e 3
3
Non fare affidamento solo sul colorei i h il t t l t fi i ibili
Esempio di WCAG Esempio di WCAG -- Linea guida 2Linea guida 2WCAG 1.0 – Esempi di linee guida
assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il colore
• Checkpoint 2.1: assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempiograzie al contesto o ai marcatori [Priorità 1]
• Checkpoint 2.2: assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficientecontrasto se visti da qualcuno con deficit percettivi sul colore
5Marco Porta - CIM: Web Design & Technologies
o se visti su uno schermo in bianco e nero [Priorità 2 per le immagini, Priorità 3 per il testo]
Linee guida basate sulle WCAG 1.0, ma definite secondo una nuova "filosofia"
WCAG 2.0…WCAG 2.0…W3C Web Accessibility Initiative
non sono più "technique-centered" ma "principle-centered"…(2008, http://www.w3.org/TR/WCAG20/)
I principi passano da 14 a 4:• Perceivable
• Operable
6Marco Porta - CIM: Web Design & Technologies
• Understandable
• Robust
Ogni principio ha dei success criteria
4
Principle 1: PerceivableInformation and user interface components must be presentable to
PrincipiPrincipiWCAG 2.0
Information and user interface components must be presentable to users in ways they can perceive
Principle 2: OperableUser interface components and navigation must be operable
Principle 3: UnderstandableInformation and the operation of user interface must be understandable
7Marco Porta - CIM: Web Design & Technologies
understandable
Principle 4: Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people
Esempio di WCAG 2.0 Esempio di WCAG 2.0 -- Linea guida 1.1Linea guida 1.1WCAG 2.0 – Esempi di linee guida
need, such as large print, braille, speech, symbols or simpler language
Success Criterion 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below (Level A)
• Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose
8Marco Porta - CIM: Web Design & Technologies
p p
• …
• Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology
5
Provvedimento legislativo promulgato nel 1973 a favore delle persone portatrici di disabilità
Stati Uniti Stati Uniti –– Il Il Rehabilitation ActRehabilitation ActLegislazione USA
delle persone portatrici di disabilità
Section 508– direttive per l'eliminazione di barriere all'accesso
ad informazioni e servizi nel campo dell'Information Technology
– ai dipendenti federali disabili deve essere garantito l'accesso el' tili d i f i i d ti f t bil l'
9Marco Porta - CIM: Web Design & Technologies
l'utilizzo ad informazioni e dati confrontabile con l'accesso e l'utilizzo di cui godono i dipendenti federali non disabili (in vigore dal 21 giugno 2000)
9 gennaio 2004emanazione della "Legge Stanca" (legge 04/2004)
Italia Italia –– La La Legge StancaLegge StancaLegislazione italiana
1° marzo 2005decreto del Presidente della Repubblica per l'attuazione della legge Stanca
8 luglio 2005decreto ministeriale sui "Requisiti tecnici e i diversi livelli per l'accessibilità agli strumenti informatici"
10Marco Porta - CIM: Web Design & Technologies
l accessibilità agli strumenti informatici
8 agosto 2005pubblicazione sulla Gazzetta Ufficiale numero 183 del Decreto dell'8 luglio 2005
6
http://www.pubbliaccesso.it/normative/legge_20040109_n4.htm
A t 1
Legge Stanca: scopi e definizioniLegge Stanca: scopi e definizioniLegislazione italiana – La Legge Stanca
Art. 1 (Obiettivi e finalità)
ogni persona ha il diritto di accesso a tutte le fonti di informazione ed ai relativi servizi; in particolare, è garantito il diritto di accesso dei disabili alle risorse informatiche e ai servizi telematici della Pubblica Amministrazione
Art. 2 (Definizioni)
l'accessibilità è la capacità dei sistemi informatici di erogare servizi e
11Marco Porta - CIM: Web Design & Technologies
l accessibilità è la capacità dei sistemi informatici di erogare servizi e fornire informazioni fruibili anche da chi necessita di "tecnologie assistive" (cioè strumenti e soluzioni tecniche che permettono alla persona disabile di accedere alle informazioni erogate dai sistemi informatici)
Art. 3 (Soggetti erogatori)
Legge Stanca: chi la Legge Stanca: chi la devedeve applicare?applicare?Legislazione italiana – La Legge Stanca
la legge si applica alle pubbliche amministrazioni di cui al comma 2 dell'articolo 1 del decreto legislativo 30 marzo 2001, n. 165, agli enti pubblici economici, alle aziende private concessionarie di servizi pubblici, alle aziende municipalizzate regionali, agli enti di assistenza e di riabilitazione pubblici, alle aziende di trasporto e di telecomunicazione a prevalente partecipazione di capitale pubblico
12Marco Porta - CIM: Web Design & Technologies
telecomunicazione a prevalente partecipazione di capitale pubblico e alle aziende appaltatrici di servizi informatici
7
http://www.pubbliaccesso.it/normative/DM080705.htm
22 requisiti (da rispettare)
Legge Stanca: requisiti Legge Stanca: requisiti (DM 08/07/2005)(DM 08/07/2005)Legislazione italiana – La Legge Stanca
q ( p )
Esempi:• Requisito n. 3: fornire una alternativa testuale
equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti; l’alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall’oggetto originale
13Marco Porta - CIM: Web Design & Technologies
essere commisurata alla funzione esercitata dall oggetto originale nello specifico contesto
• Requisito n. 11: usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati
1° livello di accessibilitàè ll i i li il t d ll ifi
Legge Stanca: livelli di accessibilitàLegge Stanca: livelli di accessibilitàLegislazione italiana – La Legge Stanca (DM 08/07/2005)
è quello necessario; implica il superamento della verifica tecnica (22 requisiti)
2° livello di accessibilitàimplica anche una verifica soggettiva (fatta da esperti)
• 1 asterisco: superamento della verifica tecnica e attribuzione del primo livello di qualità nella verifica soggettiva
2 asterischi: superamento della verifica tecnica e attribuzione
14Marco Porta - CIM: Web Design & Technologies
• 2 asterischi: superamento della verifica tecnica e attribuzione del secondo livello di qualità nella verifica soggettiva
• 3 asterischi: superamento della verifica tecnica e attribuzione del terzo livello di qualità nella verifica soggettiva
8
Dipendono dal tipo di disabilitài i
Tecnologie assistiveTecnologie assistiveAccessibilità e disabilità
– visiva
– motoria
– uditiva
– cognitiva
Richiedono particolari accorgimenti nella progettazioneogni tipologia di user agent ha le sue particolarità
principali
15Marco Porta - CIM: Web Design & Technologies
ogni tipologia di user agent ha le sue particolarità…
Sono utili/necessarie anche per gli anzianicalo della vista, movimenti difficoltosi, …
Persone con vista limitatai dit i di h
Disabilità visiveDisabilità visiveTecnologie assistive
ingranditori di schermo
Persone non vedenti– screen reader (browser vocali) – Tra i più diffusi:
• JAWS (freedomscientific.com)
• Homepage Reader (www-306.ibm.com)
16Marco Porta - CIM: Web Design & Technologies
– lettori Brailledispositivi tattili (particolarmente utili per i sordo-ciechi)
9
A seconda del grado di disabilità:– difficoltà di puntamento col mouse
Disabilità motorieDisabilità motorieTecnologie assistive
p
– impossibilità di usare il mouse
– impossibilità di usare la tastiera
Soluzioni:– rendere il sito indipendente (o non totalmente dipendente)
dal mouse
17Marco Porta - CIM: Web Design & Technologies
– riconoscimento vocale
– uso di tastiere speciali
– uso di mouth stick o head wand
– uso di eye tracker
Requisito n. 1 (DM 08/07/2005, Legge Stanca)
li l i li tti l l i t
StandardStandardAlcune regole di progettazione accessibile
realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate, nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico
In pratica:
18Marco Porta - CIM: Web Design & Technologies
pusare almeno la versione 4.01 dell'HTML (o, ancora meglio, l'XHTML 1.0), evitare tag e attributi deprecati, usare i tag in modo semanticamente consistente, …
10
Indicare nei documenti la lingua usataes <ht l l "it> o < l " ">fil </ >
TestiTestiAlcune regole di progettazione accessibile
es. <html lang="it>, o <span lang="en">file</span>
Usare titoli significativi per le paginetag <title>; chi "ascolta" la pagina potrà comprenderne meglio il contenuto…
Usare i tag in modo semanticamente correttol i i i ( ) li fi
19Marco Porta - CIM: Web Design & Technologies
es. le intestazioni (<h1>, <h2>, ecc.), liste, paragrafi, …
Usare un linguaggio chiarofacilita la comprensione dei contenuti…
Usare sempre dimensioni relative per i font (e non solo…)ì l' t t t à idi i i tt i
DimensioniDimensioniAlcune regole di progettazione accessibile
così l'utente potrà ridimensionare i caratteri
Il miglioramento per un ipovedente può essere
20Marco Porta - CIM: Web Design & Technologies
ipovedente può essere notevole…
11
Usare colori contrastanti per testo e sfondoi d ffi i t diff di l i ità t lità
ContrastoContrastoAlcune regole di progettazione accessibile
ci deve essere una sufficiente differenza di luminosità e tonalità
Il W3C ha reso disponibili algoritmi per il calcolo della differenza di luminosità e del contrasto tra i colori
– luminosità = ((R * 299) + (G * 587) + (B * 114)) / 1000 Regola: | lumin. sfondo – lumin. testo | > 125
– tonalità = [Max(R1, R2) – Min (R1, R2)] +
21Marco Porta - CIM: Web Design & Technologies
[ ( ) ( )][Max(G1, G2) – Min (G1, G2)] +[Max(B1, B2) – Min (B1, B2)]
Regola: tonalità > 500
Non basare la comprensione del contenuto solo sui colorii bl i di i d i l i (d lt i ) lt diff i
ColoriColoriAlcune regole di progettazione accessibile
i problemi di percezione dei colori (daltonismo) sono molto diffusi…
Test:
22Marco Porta - CIM: Web Design & Technologies
12
Se l'elemento multimediale è significativo per la comprensione del contenuto fornire una descrizione
Immagini e contenuti MM in genereImmagini e contenuti MM in genereAlcune regole di progettazione accessibile
comprensione del contenuto, fornire una descrizione testuale
per le immagini, con l'attributo alt; inutile se l'elemento è decorativo (ma occorre comunque alt="")
Il testo alternativo non va inteso come didascaliala didascalia serve per chi può vedere…
23Marco Porta - CIM: Web Design & Technologies
es. "Grafico delle vendite nel 2006"oppure
"Vendite nel 2006: libri 69%, CD 11%,cartoleria 15%, dolciumi 5%" ?
Fornire descrizioni e titoli per le tabellees <t bl "O i i l d ll li 7
Contenuto tabulare…Contenuto tabulare…Alcune regole di progettazione accessibile
es. <table summary="Orario invernale della linea 7suddiviso in…" ...><caption>Orario della linea 7</caption>
......
Un browser vocale legge il contenuto delle tabelle da sinistra a destra e dall'alto verso il basso (linearizzazione)
24Marco Porta - CIM: Web Design & Technologies
si passa da una a due dimensioni; l'uso dell'attributo headersfacilita l'associazione di quanto letto dal browser vocale con la specifica cella
13
Esempio d'uso dell'attributo headers
… contenuto tabulare… contenuto tabulareAlcune regole di progettazione accessibile
<tr><th id="prod">Descrizione prodotto</th><th id="pre">Prezzo in Euro</th>
</tr><tr><th id="p1" headers="prod">Detersivo XYZ</th><td headers="prod p1 pre">1,50</td>
</tr>
25Marco Porta - CIM: Web Design & Technologies
<tr><th id="p2" headers="prod">Spaghetti</th><td headers="prod p2 pre">2,30</td>
</tr>
Iniziare con il contenuto principaleesempio tipico di layout tabulare:
Layout tabulare…Layout tabulare…Alcune regole di progettazione accessibile
esempio tipico di layout tabulare:
<table width="50%" border="1" align="center" cellpadding="10"><tr><th colspan="2" bgcolor="#c0c0c0">Il mio sito</th>
</tr><tr><td width="20%" bgcolor="yellow"><br><ul><li><a href="">Link 1</a></li>......
26Marco Porta - CIM: Web Design & Technologies
</ul></td><td width="80%"><h1>Benvenuti nel mio sito!</h1><p>Qui troverete...</p>...
14
Per fare in modo che venga letto prima il contenuto e poi il menù di sinistra:
… layout tabulare… layout tabulareAlcune regole di progettazione accessibile
<table width="50%" align="center"><table width= 50% align= center ><tr><th colspan="2" bgcolor="#c0c0c0">Il mio sito</th>
</tr><tr>
<td><img src="tr.gif" width="1" height="1" alt=""></td><td rowspan="2" width="80%">
<h1>Benvenuti nel mio sito!</h1><p>Qui troverete...</p>......
</td></tr><tr>
cella fittizia contenente una GIF trasparente
27Marco Porta - CIM: Web Design & Technologies
<tr><td width="20%" bgcolor="yellow"><br />
<ul><li><a href="">Link 1</a></li>......
</ul></td>
</tr></table>
Iniziare col contenuto principale è facile…i
Layout coi CSSLayout coi CSSAlcune regole di progettazione accessibile
esempio:<html>
<head><title>Esempio layout</title><style type="text/css">
body {padding: 0px; margin: 0px;
}#intestazione {
background-color: lime; height: 70px;
#menu {width: 190px; border: blue 1px dashed; background-color: aqua; position: absolute; top: 70px ;bottom: 0px;
}</style>
</head><body>
<div id="intestazione">Intestazione</div><div id="contenuto">
28Marco Porta - CIM: Web Design & Technologies
}#contenuto {
margin-left: 200px; background-color: yellow;
}
<div id= contenuto >...
</div><div id="menu">
Menu</div>
</body></html>
… quindi è meglio usare i CSS per il layout (e, ovviamente, si devono evitare i frame…)
15
Usare testi significativi per i linked evitare nella maniera più assoluta il "clicca qui"!!!
NavigazioneNavigazioneAlcune regole di progettazione accessibile
ed evitare nella maniera più assoluta il clicca qui !!!
Aggiungere titoli ai linkattributo title; es. <a href="b.html" title="La biografia di…">…</a>
Evitare (o limitare) link JavaScriptun browser vocale potrebbe non supportarli…
29Marco Porta - CIM: Web Design & Technologies
p pp
Evitare di aprire nuove finestrepossono confondere nella navigazione
Le barre di navigazione, le parti ripetute, ecc. si dovrebbero poter saltare
Scorciatoie di navigazioneScorciatoie di navigazioneAlcune regole di progettazione accessibile
poter saltaretipicamente con link "nascosti"… es. nel CSS: .nascosto {display: none}
nell'HTML: <a class="nascosto" href="#contenuto">Vai al contenuto
</a>
I link (e i campi dei form) si dovrebbero poter selezionare
30Marco Porta - CIM: Web Design & Technologies
( p ) panche con la tastiera
attributo accesskey; es. <a href="p2.html" accesskey="2">Pagina 2</a>
16
Per i non udenti:d f it t i i i di di l t
Audio e videoAudio e videoAlcune regole di progettazione accessibile
devono sempre essere fornite trascrizioni di audio parlato e sottotitoli per i filmati
Per i non vedenti:– devono essere fornite descrizioni testuali (che saranno lette da
un browser vocale) o parlate
– a seconda dei casi, può essere utile/necessario descrivere anche(
31Marco Porta - CIM: Web Design & Technologies
la scena in cui si svolge l'azione (un po' come le descrizioni deitesti teatrali…)
Altre regole riguardano:i f
E inoltre…E inoltre…Alcune regole di progettazione accessibile
– i form
– le mappe immagine
– l'interazione con tecnologie lato client JavaScript, Flash, Java, ... script essenziali vs. script non essenziali…
– i plug-in
– …
32Marco Porta - CIM: Web Design & Technologies
17
Wavehttp://wave webaim org/
StrumentiStrumentiValidazione (quasi) automatica dell'accessibilità
http://wave.webaim.org/
Cynthia Sayswww.contentquality.com, gratuito, analizza la singola pagina
Ocawawww.ocawa.com, francese, gratuito
Barre dell'accessibilità
33Marco Porta - CIM: Web Design & Technologies
Barre dell'accessibilitàInternet Explorer: www.webaccessibile.org/argomenti/argomento.asp?cat=474. Firefox: https://addons.mozilla.org/it/firefox/addon/5809/