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à Priorità 1: Deve (must) essere soddisfatto Priorità 2: Dovrebbe (should) essere soddisfatto 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 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. Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo. Assicurare l'accessibilità diretta delle interfacce utente incorporate. Progettare per garantire l'indipendenza da dispositivo. Usare soluzioni provvisorie. Usare le tecnologie e le raccomandazioni del W3C. Fornire informazione per la contestualizzazione e l'orientamento. Fornire chiari meccanismi di navigazione. 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.

Marcare i documenti con i corretti elementi strutturali. 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: Aprire una pagina con il blocco note e scrivere il codice HTML Salvare il file in qualche cartella del vostro computer con estensione .html o .htm 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> <td> Contenuto della prima cella, seconda riga</td> <td> Contenuto della seconda cella, seconda riga </td> <td> Contenuto della prima cella, terza riga</td> <td> Contenuto della seconda cella, terza riga </td> </table>

Guida ai tag HTML: Esempio1 <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> <td><em>Cella 1, Riga 2</em></td> <td><em>Cella 2, Riga 2</em></td> <td><em>Cella 1, Riga 3</em></td> <td><em>Cella 2, Riga 3</em></td> </table> </body> </html>

Guida ai tag HTML: Esempio2 <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> <td><em>Rossi</em></td> <td><em>Antonio</em></td> <td><em>Bianchi</em></td> <td><em>Loredana</em></td> </table> </body> </html>

Guida ai tag HTML: Esempio3 <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> </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> <td><a href="http:\\www.yahoo.it"><div align="center">Yahoo.it</div></a></td> </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 Caratteri da evitare: nell'ordine, Impact, Lucida Handwriting, Matisse ITC e simili - font 14 punti.

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