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 obiettivo
Interventi 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 soddisfatto
2. Priorità 2: Dovrebbe (should) essere soddisfatto
3. 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)
2)
3)
4)
5)
6)
Fornire alternative equivalenti al contenuto audio e visivo.
Non fare affidamento sul solo colore.
Usare marcatori e fogli di stile e farlo in modo appropriato.
Chiarire l'uso di linguaggi naturali.
Creare tabelle che si trasformino in maniera elegante.
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 HTML
Per 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
Cenni su HTML:struttura della
pagina
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.
<!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 HTML
Impostare 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 HTML
RIENTRI: 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>
LINK
Per 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
Questo codice serve per generare una tabella di tre righe e due colonne.
<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>
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 percentuale
consente di adattare le dimensioni a una qualsiasi risoluzione dello schermo.
E' possibile esprimere anche la larghezza delle celle, sia in percentuale
che 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