Accessibilità del Web Tecnologie assistive Accessibilità e disabilità – visiva – motoria –...

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:


– 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


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


– 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


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


• 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


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


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'


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"


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


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


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


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


• 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


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)


– 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


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


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


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


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)] +


[ ( ) ( )][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:


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…


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)


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>


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


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


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


}#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…


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


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


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

– …


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à


Barre dell'accessibilitàInternet Explorer: www.webaccessibile.org/argomenti/argomento.asp?cat=474. Firefox: https://addons.mozilla.org/it/firefox/addon/5809/

Accessibilità del Web Tecnologie assistive Accessibilità e disabilità – visiva – motoria –...

Documents

Transcript of Accessibilità del Web Tecnologie assistive Accessibilità e disabilità – visiva – motoria –...