Linee guida per l’accessibilità

Prof.ssa Stefania Pinnelli

Università del Salento

Linee guida W3C

Tre tipologie di linee guida:

• Web Content Accessibility Guidelines (WCAG 1.0, 1999,

Recommendation): come creare contenuti Web accessibili

e ora ... WCAG 2.0 (Working Draft)

• Authoring Tool Accessibility Guidelines (ATAG 1.0, 2000,

Recommendation): come progettare strumenti di authoring utilizzabili da

autori disabili, e che producono contenuti Web accessibili

• User Agent Accessibility Guidelines (Browser, UAAG 1.0, 2002,

Recommendation): cosa devono fare gli sviluppatori di software per

migliorare l' accessibilità dei browser a dei multimedia player per consentire

un migliore accesso alle risorse Web per le persone affette da deficit uditivi,

cognitivi, visivi, fisici.

WCAG 1.0

Raccolta di raccomandazioni (esattamente 14 linee guida)

destinate ai "content developers”, ossia chi produce

pagine Web.

Sono dunque rivolte a:

• il progettista dell'interfaccia grafica delle pagine o del sito

• chi traduce il progetto grafico in codice usando i linguaggi

HTML, XHTML, CSS, XML, SMIL, SVG, ecc.

• chi scrive i testi e struttura logicamente i contenuti

WCAG 1.0

Pongono due obiettivi:

• assicurare una trasformazione gradevole

della pagina Linee guida 1-11

• rendere i contenuti comprensibili e navigabili Linee guida 12-14

WCAG 1.0: Primo obiettivoInterventi sul codice per rendere la struttura della pagina

flessibile i contenuti possono essere fruiti senza perdita d'informazioni per mezzo dei più diversi dispositivi di navigazione.

Le regole principali sono:• separare la struttura dalla presentazione del documento• fornire equivalenti testuali per i contenuti grafici e multimediali • creare alternative equivalenti per i contenuti che si rivolgono ad un

solo canale sensoriale • non progettare per uno specifico tipo di hardware • non affidare le informazioni esclusivamente al colore

WCAG 1.0: Secondo obiettivo

Per rendere i contenuti comprensibili e navigabili i metodi sono:

• fornire informazioni contestuali e di orientamento • fornire chiari meccanismi di navigazione • rendere i documenti il più possibile chiari e

semplici

Il raggiungimento dell'accessibilità non è solo una questione di lavoro sul codice

Le tre priorità e i relativi bollini di conformità

• Per ogni guideline una serie di check point (punto di controllo): svariate situazioni concrete che possono occorrere durante lo sviluppo di pagine Web.

• Ogni checkpoint ha un livello di priorità

1. Priorità 1: Deve (must) essere soddisfatto2. Priorità 2: Dovrebbe (should) essere soddisfatto3. Priorità 3: Può (may) essere considerato

Conformance level: Level "A": sono soddisfatti tutti i checkpoint di Priorità 1 Level "AA": sono soddisfatti tutti i checkpoint dipriorità 1 e 2 Level "AAA": sono soddisfatti tutti i checkpoint di livello 1,2,3

Le 14 Linee guida per l'accessibilità WCAG 1.0

1) Fornire alternative equivalenti al contenuto audio e visivo. 2) Non fare affidamento sul solo colore. 3) Usare marcatori e fogli di stile e farlo in modo appropriato. 4) Chiarire l'uso di linguaggi naturali. 5) Creare tabelle che si trasformino in maniera elegante. 6) Assicurarsi che le pagine che danno spazio a nuove tecnologie si

trasformino in maniera elegante. 7) Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di

contenuto nel corso del tempo. 8) Assicurare l'accessibilità diretta delle interfacce utente incorporate. 9) Progettare per garantire l'indipendenza da dispositivo. 10)Usare soluzioni provvisorie. 11)Usare le tecnologie e le raccomandazioni del W3C. 12)Fornire informazione per la contestualizzazione e l'orientamento. 13)Fornire chiari meccanismi di navigazione. 14)Assicurarsi che i documenti siano chiari e semplici.

Linea guida 1: Fornire alternative equivalenti al contenuto audio e visivo Fornire un contenuto che trasmetta all'utente essenzialmente la stessa

funzione o scopo del contenuto audio o visivo.

Equivalente testuale

Linea guida 2: Non fare affidamento sul solo colore

Assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il colore.

Linea guida 3: Usare marcatori e fogli di stile e farlo in modo appropriato

Marcare i documenti con i corretti elementi strutturali.

Controllare la presentazione con fogli di stile piuttosto che con elementi e attributi di presentazione.

Linea guida 4: Chiarire l'uso di linguaggi naturali

Utilizzare marcatori che facilitino la pronuncia o l'interpretazione di testi stranieri o

abbreviati.

Linea guida 5: Creare tabelle che si trasformino in maniera elegante

Assicurarsi che le tabelle abbiano la marcatura

necessaria per essere trasformate dai browser

accessibili e da altri interpreti.

Linea guida 6: Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante

Assicurarsi che le pagine siano accessibili anche quando le

tecnologie più recenti non sono supportate o sono

disabilitate.

Linea guida 7: Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti

di contenuto nel corso del tempo

Assicurarsi che gli oggetti in movimento, lampeggianti,

scorrevoli o che si autoaggiornano possano essere

arrestati temporaneamente o definitivamente.

Linea guida 8: Assicurare l'accessibilità diretta delle interfacce utente incorporate

Assicurarsi che la progettazione delle interfacce

utente segua i principi dell'accessibilità: accesso

alle diverse funzionalità indipendente dai

dispositivi usati, possibilità di operare da

tastiera, comandi vocali, ecc.

Linea guida 9: Progettare per garantire l'indipendenza da dispositivo

Usare caratteristiche che permettono di attivare gli

elementi della pagina attraverso una molteplicità di

dispositivi di input

Linea guida 10: Usare soluzioni provvisorie

Usare soluzioni provvisorie in modo che le tecnologie

assistive e i browser più vecchi possano operare

correttamente

Linea guida 11: Usare le tecnologie e le raccomandazioni del W3C

Usare le tecnologie del W3C (in conformità con le specifiche) e seguire

le raccomandazioni sull'accessibilità. Nei casi in cui non sia

possibile usare una tecnologia del W3C, oppure se nell'utilizzarla si

ottenesse materiale che non si trasforma in maniera elegante,

fornire una versione alternativa del contenuto che sia accessibile.

Linea guida 12: Fornire informazione per la contestualizzazione e l'orientamento

Fornire informazione per la contestualizzazione e

l'orientamento, per aiutare gli utenti a

comprendere pagine od elementi complessi

Linea guida 13: Fornire chiari meccanismi di navigazione

Fornire chiari e coerenti meccanismi di navigazione --

informazione per l'orientamento, barre di navigazione,

una mappa del sito, ecc. -- per aumentare le probabilità

che una persona trovi quello che sta cercando in un sito

Linea guida 14: Assicurarsi che i documenti siano chiari e semplici

Assicurarsi che i documenti siano chiari e semplici

in modo che possano essere compresi più

facilmente

Cenni su HTML• HTML: Hypertext Markup Language ("Linguaggio di

contrassegno per gli Ipertesti")

• Non è un linguaggio di programmazione

• E’ un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare attraverso degli appositi marcatori, detti "tag". come disporre gli elementi all'interno di una pagina

• Non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione

• W3C si occupa di standardizzare la sintassi del linguaggio HTML

Cenni su HTMLPer iniziare a scrivere pagine web si ha bisogno di:

• uno o più browser per visualizzare le pagine

• un editor testuale per scrivere il codice HTML

• durante questo corso non utilizzeremo editor visuali: né FrontPage, né DreamWeaver, né GoLive, o altri.

In pratica si tratta di:

1. Aprire una pagina con il blocco note e scrivere il codice HTML

2. Salvare il file in qualche cartella del vostro computer con estensione .html o .htm

3. Il browser può così aprire il file in automatico cliccandoci su due volte

Un documento HTML è normalmente diviso in due sezioni:• Testa (<head>): Contiene informazioni non immediatamente

percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato.

• Corpo (<body>): Qui è racchiuso il contenuto vero e proprio del documento.

Cenni su HTML:struttura della pagina

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head>   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">   <title>HTML.it</title></head><body>   <!-- Scriveremo qui -->   Qui il nostro contenuto</body></html>

Guida ai tag HTMLImpostare grandezza dei titoli<h1>titolo 1 </h1><h2>titolo 2 </h2><h3>titolo 3 </h3><h4>titolo 4 </h4><h5>titolo 5 </h5><h6>titolo 6 </h6>

Impostare un paragrafo (va a capo da uno all'altro e lascia uno spazio).< p align="left|right|justify|center">paragrafo </p>

Impostare un blocco di testo (non lascia lo spazio)<div align="left|right|justify|center"> Blocco di testo</div>

Andare a capo (non va chiuso)<br>

Stili del testo: Grassetto <strong>parola</strong>Corsivo <em>parola</em>Lampeggiante <BLINK>Testo lampeggiante</BLINK>

Guida ai tag HTMLRIENTRI: creare dei blocchi di testo rientrati.<BLOCKQUOTE> Paragrafo rientrato<BR> Paragrafo rientrato<BR></BLOCKQUOTE>

MODIFICA DEI FONT: Con l'ausilio degli attributi size=, face= e color= è possibile modificare le dimensioni, il tipo di font e il colore.<FONT size=1 face="Arial, Helvetica“ color="BLUE" >Testo</FONT>

LINKPer creare un link specificare : - l'indirizzo della pagina che si vuole associare;- il testo o l'immagine che dovrà essere visualizzato nella pagina.Il tag è il seguente:<A HREF="URL">....</A>. inserendo al posto di URL (Universal Resource Locator) l'indirizzo della nuova pagina e tra il tag di apertura e chiusura il testo o l'immagine che rappresenteranno il link.

IMMAGINI<IMG SRC="gif/julia.gif“ WIDTH="100" HEIGHT="75“ALT="testo alternativo“ BORDER="5" HSPACE="20"VSPACE="30“ALIGN="middle" >

Guida ai tag HTML: le tabelle

<table> <tr> <td> Contenuto della prima cella, prima riga</td> <td> Contenuto della seconda cella, prima riga </td> </tr> <tr> <td> Contenuto della prima cella, seconda riga</td> <td> Contenuto della seconda cella, seconda riga </td> </tr> <tr> <td> Contenuto della prima cella, terza riga</td> <td> Contenuto della seconda cella, terza riga </td> </tr></table>

Questo codice serve per generare una tabella di tre righe e due colonne.

Guida ai tag HTML: Esempio1<html> <head> <title>Tabella semplice</title> </head> <body> <h1>Tag fondamentali di creazione di una tabella</h1> <p align="justify"> Le <strong>tabelle</strong> sono una delle parti più importanti di tutto il codice HTML.<br> L'attributo <strong>border</strong> imposta la dimensione in pixel del bordo della tabella. </p> <table border="1"> <tr> <td><strong>Cella 1, Riga 1</strong></td> <td><strong>Cella 2, Riga 1</strong></td> </tr> <tr> <td><em>Cella 1, Riga 2</em></td> <td><em>Cella 2, Riga 2</em></td> </tr> <tr> <td><em>Cella 1, Riga 3</em></td> <td><em>Cella 2, Riga 3</em></td> </tr> </table> </body></html>

Guida ai tag HTML: Esempio2<html> <head> <title>Pagina con tabella a grandezza fissa</title> </head> <body> <h1>Tabella impostata a grandezza fissa</h1> <p align="justify"> Si costruisce una tabella a grandezza fissa.L'altezza <strong>(height)</strong> e la larghezza <strong>(with)</strong>,attributi del tag table, sono espresse in pixel. </p> <table width="300" height="200" border="1"> <tr> <td><strong>Cognome</strong></td> <td><strong>Nome</strong></td> </tr> <tr> <td><em>Rossi</em></td> <td><em>Antonio</em></td> </tr> <tr> <td><em>Bianchi</em></td> <td><em>Loredana</em></td> </tr></table></body></html>

Guida ai tag HTML: Esempio3<html> <head> <title>Pagina con tabella a grandezza percentuale, larghezza delle celle e colori di bordi e sfondi</title> </head> <body> <h1>Tabella impostata a grandezza percentuale, una certa larghezza delle celle e determinati colori e bordi</h1> <p align="justify">

La grandezza di un elemento, in questo caso la tabella, espressa in percentualeconsente di adattare le dimensioni a una qualsiasi risoluzione dello schermo.E' possibile esprimere anche la larghezza delle celle, sia in percentualeche in pixel.Le tabelle possono essere colorate.

</p> <table width="75%" border="3" bordercolor="#FA45DD" bgcolor="#AA21DE" cellpadding="5"cellspacing="10"> <tr> <td width="30%" bgcolor="#DA00AD"> <strong><div align="center">Link</strong> </td> <td width="70%" bgcolor="#DA00AD"> <strong><div align="center">Categoria</div></strong> </td> </tr>………………………………………………….

Guida ai tag HTML: Esempio3

<tr> <td> <a href="http:\\www.google.it"> <div align="center">Google.it</div> </a> </td> <td><em><div align="center">Motore di ricerca</div></em></td> </tr> <tr> <td><a href="http:\\www.yahoo.it"><div align="center">Yahoo.it</div></a></td> <td><em><div align="center">Motore di ricerca</div></em></td> </tr></table></body></html>

Cosa significa separare il contenuto dalla presentazione

«Il contenuto di un documento è ciò che questo comunica all'utente attraverso linguaggio naturale, immagini, suoni, filmati, animazioni, ecc.»

«La presentazione di un documento è il modo in cui il documento è riprodotto (ad es. come uno stampato, come una presentazione grafica bi-dimensionale, come una presentazione solo testuale, come discorso riprodotto da un sintetizzatore, come braille, ecc.)»

Tutti i possibili tipi di presentazione di un documento devono riuscire a mostrare all'utente, se non proprio lo stesso contenuto, almeno un suo valido equivalente

Cosa significa separare il contenuto dalla presentazione

Sono necessarie due condizioni:

-che siano stati preparati degli equivalenti per quei contenuti che, per loro natura, si

rivolgono ad un solo canale sensoriale.

-che non vi siano vincoli all'interno del documento che consentono un'adeguata

presentazione del contenuto solo su certi programmi utente

Eliminare dal codice HTML gli elementi e gli attributi di presentazione

elemento di presentazione: specifica la presentazione del documento

attributo di presentazione: specifica un modo di presentare un certo contenuto

Tutti questi criteri di formattazione possono oggi tranquillamente essere

applicati per mezzo dei fogli di stile o CSS

Perché eliminare dal codice HTML gli elementi di presentazione

Definire la presentazione per mezzo dei CSS consente di:

• ridurre il peso della pagina, talvolta del 50-60% .

• specificare una serie di presentazioni alternative,

ciascuna adatta alla riproduzione su una differente

periferica (schermo, stampa, sintetizzatori vocali, ecc.)

• ottenere un codice HTML più lineare e pulito

L'uso del colore secondo le WCAG 1.0

Le WCAG 1.0 dedicano all'uso del colore la linea guida numero 2

Testo sufficientemente contrastato rispetto allo sfondo come un requisito fondamentale per un sito ad elevata accessibilità

I colori più problematici da discriminare sono innanzitutto il rosso e poi il verde

Il tipo di cecità ai colori:

• protanopia (cecità più accentuata per il colore rosso,

• deuteranopia (cecità più accentuata per il colore verde,

• tritanopia (confonde tra loro il giallo e il blu,

• acromatopsia (un'estrema sensibilità alla luce, completa cecità ai colori e bassissima acuità visiva,

Raccomdandazioni nell'uso dei colori - 1

Tra primo piano e sfondo massimo contrasto possibile non come

semplice differenza di tono dei colori, ma piuttosto il risultato di una

differenza di luminosità.

Tra il rosso e il verde del campione di destra c'è solo una differenza di tonalità. Eliminate le componenti cromatiche, i due colori diventano una

medesima tonalità di grigio. Tra il marrone e il verde del campione di sinistra c'è invece anche una differenza di luminosità, che, una volta eliminate le componenti cromatiche, rende visibile la differenza tra i due grigi che si

ricavano.http://www.diodati.org/scritti/2002/ipovisione/ipo_02.asp#a06

Raccomdandazioni nell'uso dei colori - 1

Evitare assolutamente di inserire sfondi grafici compositi sotto i testi

La leggibilità peggiora poi ulteriormente, quando si blocca la posizione dell'immagine di sfondo: il movimento disaccoppiato del testo rispetto allo sfondo rende ancora più penoso lo sforzo di chi tenta di leggere i contenuti

Uso dei font

Caratteri molto ben disegnati, che non siano troppo sottili (light) né troppo

compressi (condensed)

Evitare grafie in corsivo, mentre il bold o grassetto è sempre assai indicato e

gradito da un utente ipovedente.

Caratteri consigliabili: nell'ordine, arial, Verdana, Tahoma e simili - font 14 punti

• HTML.it, il primo sito italiano sul Web Publishing

• HTML.it, il primo sito italiano sul Web Publishing

• HTML.it, il primo sito italiano sul Web Publishing

Caratteri da evitare: nell'ordine, Impact, Lucida Handwriting, Matisse ITC e simili -

font 14 punti.

• HTML.it, il primo sito italiano sul Web Publishing

• HTML.it, il primo sito italiano sul Web Publishing

• HTML.it, il primo sito italiano sul Web Publishing

Una pagina Web deve essere adattabile Una pagina web priva di vincoli deve adattarsi completamente alle nostre esigenze: • possiamo ingrandire o rimpicciolire i caratteri del testo • cambiare il tipo di font • cambiare i colori di primo piano e di sfondo • ridimensionare a nostro piacimento la finestra del browser, ottenendo che i contenuti

della pagina si adattino alle nuove dimensioni della finestra • cambiare la risoluzione dello schermo conservando entro certi limiti una buona

leggibilità • far scorrere la pagina su un monitor da 21 pollici o sullo schermo minuscolo di

un'agendina elettronica, riuscendo in entrambi i casi a trovare l'informazione che cerchiamo

• farci leggere la pagina da un sintetizzatore vocale • leggerla con le mani per mezzo di una barra braille • stamparla su una normale stampante o su una stampante braille e leggerla poi

comodamente a letto prima di addormentarci

Evitare qualsiasi vincolo di presentazione, che impedisca all'utente di personalizzare nel modo che preferisce l'aspetto della pagina web

Valorizzare la struttura logica del documento

Comunicare la struttura logica unicamente per mezzo della presentazione visuale non è una soluzione accessibile

Il non vedente ha bisogno piuttosto di un codice di marcatura che dia rilievo e chiarezza all'ordine e alla gerarchia dei contenuti

Esistono apposite funzioni degli screen reader che consentono all'utente di esplorare una pagina saltando da un titolo all'altro, da un collegamento all'altro, da un campo modulo ad un altro. Altre funzioni avvertono l'utente che un certo blocco è un paragrafo di testo, un altro un elenco puntato, un altro ancora una tabella, un altro un elenco numerato.

una buona strutturazione dei contenuti con un'organizzazione di pagina semplice e chiara è di aiuto anche per gli utenti affetti da deficit cognitivi

una valida strutturazione dei contenuti è importante ai fini dell'indicizzazione da parte dei motori di ricerca