Lungo la strada accessibilità - · PDF fileparticolare della struttura navigazionale e...

��

Lungo la strada dell'accessibilità: 22 requisiti per sviluppare pagine web accessibili

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

�

Testo a cura di Marcello Savino (Aldebra S.p.A.) e Valentina Marchetti (Ufficio stampa - PAT) �

�

�

�

�

Documento basato sulla versione di dicembre 2004 dello studio del Cnipa "Linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità dei siti internet"

� �

�

materiale a uso interno © Provincia autonoma di Trento - ottobre 2004 (revisione: gennaio 2005)

Introduzione Le coordinate di questo documento sull'accessibilità: cosa offre e come Usabilità e accessibilità sono le parole d'ordine oggi, specie per un portale pubblico. Ma cosa si intende in generale con questi due termini e soprattutto quali aspetti di usabilità e accessibilità dovranno essere particolarmente curati nel nuovo portale provinciale?

Innanzitutto l'usabilità. Spesso nel parlare di usabilità si ricorre alla norma ISO 9241 che la definisce come "il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione, in uno specifico contesto d'uso".

Questa definizione molto astratta va poi calata a seconda, appunto, del contesto d'uso. Nell'ambito dei siti web, l'usabilità si può connotare come "l'adeguatezza dei contenuti/funzionalità e degli strumenti tecnici fra di loro, e rispetto ai fruitori e al contesto (il mondo). Tale adeguatezza va peraltro misurata tenendo in considerazione gli obiettivi di chi commissiona, progetta, realizza, promuove e gestisce il sito"¹ . Quindi l'usabilità ha a che fare prevalentemente con aspetti di tipo progettuale relativi alle interazioni con l'utenza prescelta attraverso il disegno delle interfacce e in particolare della struttura navigazionale e della disposizione dei contenuti nell'ambiente sito.

A sua volta, l'accessibilità riguarda la conformità a determinate linee guida (punto di riferimento essenziale le specifiche del W3C nell'ambito della Web Accessibility Initiative (WAI)) allo scopo di consentire la fruibilità dell'informazione online all'universalità degli utenti, compresi i diversamente abili fisici, cognitivi, tecnologici, con molte modalità di accesso e con mezzi differenti (il PC, il palmare, il cellulare, totem informativi, ...).

Un sito è posto da qualcuno per qualcuno al fine di comunicare qualcosa. In tal senso un grosso spazio dell'usabilità di un sito web è quello della "comprensibilità" dei contenuti che al tempo stesso è uno degli ambiti di applicazione delle linee guida per l'accessibilità. E' precisamente in quest'area di sovrapposizione tra i due domini dell'usabilità e dell'accessibilità che l'Amministrazione provinciale intende concentrare gli sforzi da compiere nell'ambito della comunicazione online.

Ma, tornando all'accessibilità - pur senza dimenticare che uno dei principi guida della prossima versione 2.0 delle Web Content Accessibility Guideline² è precisamente la comprensibilità dei contenuti (ottenuta attraverso l'uso di un linguaggio semplice e chiaro, di lineari meccanismi di navigazione, della preparazione di ben percepibili ed evidenti contesti dell'informazione...) - occorre dire che, in prima battuta, essa trova il suo campo di applicazione in uno spazio assai tecnico che riguarda la scrittura del codice delle pagine web.

In Italia, in particolare dopo la "legge Stanca" (legge n. 4 del 9 Gennaio 2004 "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici"), su questo piano è successo un fatto importante per le pubbliche amministrazioni. E cioè due gruppi di lavoro della Segreteria tecnico-scientifica della Commissione Interministeriale permanente per l'impiego delle ICT a favore delle categorie deboli o svantaggiate (CNIPA) hanno appositamente individuato un insieme di requisiti tecnici e di metodologie per la verifica dell'accessibilità.

Analogamente a quanto avvenuto in altri paesi europei (come ad esempio il Regno Unito), grazie al lavoro di questi gruppi - in cui hanno trovato voce anche alcune amministrazioni locali e regionali

che da sempre sperimentano nell'ambito della comunicazione pubblica digitale - si è cominciato a depositare un bagaglio di indicazioni e strumenti operativi, validi in generale nel settore pubblico, a cui fare riferimento per una materia - l'accessibilità - sotto certi aspetti non solo tecnica ma anche difficile da padroneggiare.

Ciò significa che le pubbliche amministrazioni italiane hanno davanti a sé un percorso tracciato e nell'invito a seguirlo c'è tutto il vantaggio che può derivare dal fatto di non dovere fare gli apripista e di partire da una base di precisi requisiti capaci di rendere la prestazione dei siti pubblici conforme al livello di accessibilità previsto dalla "legge Stanca" e dal suo regolamento attuativo. Come dire che in tema di accessibilità, almeno sotto il profilo squisitamente tecnico, c'è uno standard.

Proprio dall'importanza che si riconosce a questo fatto ha preso forma il documento sull'accessibilità preparato dalla Provincia. A uno a uno i 22 requisiti indicati dai gruppi di lavoro del CNIPA sono stati ripresi e corredati di indicazioni che ne concretizzino il significato, unendo esempi visivi e, per i più esperti o interessati, anche il codice html relativo.

Il lavoro è stato sviluppato tenendo in mente soprattutto l'esigenza di comunicare con una certa chiarezza ma anche semplicità - a questo è servito appunto il ricorso alla visualizzazione delle buone (o cattive) prassi - gli aspetti da tenere sotto controllo nella preparazione di pagine accessibili, cercando il più possibile anche di offrire la motivazione sottostante a certe prescrizioni.

Prima di chiudere un'avvertenza: questo documento non sarà mai definitivo. Ciò per due motivi: uno, scontato, legato al fatto che è sicuramente sempre migliorabile in termini di chiarezza e di comprensibilità (leggi anche usabilità/accessibilità!); l'altro è che il lavoro che si sta conducendo a livello ministeriale prosegue e infatti questo documento si basa già sulla terza versione dello Studio sulle linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità (legge 4 del 2004, art. 11 comma a e b). Per questo motivo esso non potrà mai essere conclusivo dovendo essere per forza di cose costantemente aggiornato ai risultati della riflessione condotta in seno ai gruppi di lavoro del CNIPA incaricati di "fondare" lo standard pubblico per l'accessibilità.

Valentina Marchetti

¹ Cfr. L. Cantoni, N. Di Blas, D. Bolchini, Comunicazione, qualità, usabilità, Milano, 2003, cit. p. 28.

² Cfr. Web Content Accessibility Guidelines 2.0 , W3C Working Draft, 30 luglio 2004 in http://www.w3.org/TR/2004/WD-WCAG20-20040730/.

� [La legge Stanca sull’accessibilità]

� [Risorse W3C sull'accessibilità (WAI)]

� [Valutare l'accessibilità dei siti web]

� [Pagina del Ministro per l'innovazione e le tecnologie contenenti le linee d'azione in merito all'accessibilità]

� [Web Content Accessibility Guidelines 1.0]

� [Techniques for Web Content Accessibility Guidelines 1.0]

� [Web Content Accessibility Guidelines 2.0 , W3C Working Draft, 30 luglio 2004]

� Sanjay J. Konyant, Robert W. Balley, Janke R. Nall, Research-Based Web Design & Usability Guidelines, 2003

� Emilio Simonetti (a cura di), Guida alla comunicazione istituzionale on line per gli URP e gli altri servizi di comunicazione pubblica, Dipartimento della Funzione Pubblica Regione Emilia Romagna.

� [Studio sulle linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità dei siti internet.],Cnipa, Dicembre 2004.

� L. Cantoni, N. Di Blas, D. Bolchini, Comunicazione, qualità, usabilità, Milano, 2003, cit. p. 28.

Riferimenti: bibliografia e sitografia

Introduzione - Lungo la strada dell'accessibilità

Con riferimento al documento Studio sulle Linee Guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità (legge 4 del 2004, art. 11 comma a e b), vengono date, per ogni requisito elencato in Tabella A, brevi indicazioni che permettono di soddisfare il requisito stesso. Le indicazioni fornite sono quasi esclusivamente di natura tecnica e riguardano principalmente la codifica con appropriato linguaggio di marcatura (es.: XHTML). Tali indicazioni corrispondono ai "punti di controllo" indicati nelle Techniques for Web Content Accessibility Guidelines 1.0.Per raggiungere gli obiettivi di accessibilità, tali indicazioni devono essere corredate da un approccio progettuale e da un disegno del "layout" appropriato. Dove possibile le indicazioni sono accompagnate da script di esempio. Tutti gli script presenti in questo documento (salvo dove diversamente indicato) sono stati validati utilizzando:

� “W3C Markup Validation Service v0.67” per la verifica della conformità con XHTML 1.0.

� Versione “online” di Bobby (Watchfire) per la verifica della conformità alle Guidelines WCAG 1.0 e U.S. Section 508.

� Versione “online” di Cynthia Says™ per la verifica della conformità alle Guidelines WCAG 1.0 e U.S. Section 508.

Le pagine create negli esempi sono state visualizzate utilizzando il browser testuale “lynx” per verificare l’accessibilità dei contenuti anche con un browser che visualizzi solo testo; i browser Microsoft IE (ver. 6.0 sp2), Mozilla FireFox (ver. 0.9.1), Opera (ver. 7.54) e Netscape (ver. 7.2) per verificare la compatibilità del codice.

Attenzione: i singoli esempi potrebbero non essere conformi alle linee guida della legge Stanca. I singoli esempi sono focalizzati sull'utilizzo di una particolare tecnica e potrebbero non soddisfare altri requisiti. La conformità è ottenuta quando tutti i 22 requisiti sono soddisfatti per ogni pagina.

Alla fine di ogni capitolo, relativo ai singoli requisiti, si troveranno i listati del codice degli esempi citati nel capitolo stesso. Per gli esempi che implicano l'utilizzo dei fogli di stile si veda il listato dei file utilizzati per la stesura di questo documento e degli esempi (manuale.ccs, print.css) nei capitoli successivi all'elenco dei requisiti.

I termini del testo che sono sottolineati rimandano ai riferimenti elencati nel glossario.

I riferimenti ad altre fonti appaiono in corsivo e fanno riferimento ai documenti e siti elencati nell'apposita sezione di questo documento.

Note tecniche relative ai requisiti da sottoporre a verifica.

Marcello Savino

Introduzione - Lungo la strada dell'accessibilità

Requisito 1

Realizzare le pagine web conformemente alle specifiche XHTML 1.0 (quella maggiormente utilizzata negli esempi di questo documento), o altra grammatica formale pubblicata (es.: HTML 4.01) utilizzando una Definizione del Tipo di Documento di tipo rigoroso (strict). Vanno utilizzate le versioni più recenti disponibili quando sono supportate dai programmi utente (ad esempio, allo stato attuale non tutti i browser supportano le specifiche dei fogli di stile CSS2, o XHTML 1.1).

Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico.

Tutti gli script d'esempio che corredano questo documento hanno in testa la Definizione del Tipo di Documento e la sintassi utilizzata si attiene strettamente alle specifiche relative. Per un elenco completo delle DTD si veda il seguente indirizzo: http://www.w3.org/QA/2002/04/valid-dtd-list.html.

Requisito 1 - Lungo la strada dell'accessibilità

Il requisito 1 ci richiede la verifica dei seguenti punti:

� Utilizzare XHTML 1.0 per sviluppare i nuovi siti web e dare una definizione del tipo documento di tipo rigoroso, cioè "strict" (vedi [glossario]). A tal proposito si veda anche il capitolo successivo (requisito 2) relativo all'utilizzo dei frame.

[Vedi esempio (Definizione Tipo Documento)]

� Se esiste un appropriato linguaggio di marcatori usare i marcatori, piuttosto che immagini per trasportare le informazioni es.: per includere simboli matematici si utilizzi MATHML. Nel mostrare formule matematiche ci si assicuri che l’utente sappia cosa rappresentano le variabili, per esempio nell’equazione “F = m * a “ indicare che F = forza, m = massa, a = accelerazione. E' bene anche fornire una descrizione della formula.

[Esempio (Formula)]

In questo esempio (vedi codice) è stato usato un tipo di documento XHTML 1.1 + MathML 2.0 + SVG 1.1.

N.B.: non tutti i browser supportano le specifiche relative a questo tipo documento.

E=Energia, m=massa c=velocità della luce

E = mc 2


� Allo scopo di identificare le varie sezioni del documento si utilizzino gli elementi di intestazione (h1, h2,.., h6). Questi elementi possono essere arricchiti da altre indicazioni di tipo visuale (es.: riga orizzontale), ma non rimpiazzate da esse.

[Esempio (Sezioni Documento)]

Spiegazione dell' esempio

In questo documento l'intestazione è stata evidenziata da una barra e posta nell'elemento di intestazione h1.


� Evitare l’uso di immagini per rappresentare testi, utilizzare testi e fogli di stile per formattare il testo e controllarne la disposizione. I testi generati dai fogli di stile non fanno parte del documento sorgente e di conseguenza sono "saltati" dalle tecnologie assistive per diversamente abili. La cosa importante è quindi includere i contenuti rilevanti nel documento. Esempi di utilizzo dei fogli di stile saranno fatti più avanti.

[Esempio (Immagine come testo)]


� Utilizzare elementi di heading esclusivamente per strutturare il documento (es.: <h2> per indicare una sezione di <h2>) e non per aggiungere effetti tipografici. Annidare opportunamente gli elementi di heading, per esempio un elemento <h2> dovrebbe seguire un elemento <h1>, l’elemento <h3> seguire l’ elemento <h2>. Non saltare i livelli di annidamento (es.: da <h1> direttamente ad <h3>). Per aggiungere effetti tipografici occorre usare fogli di stile. Esempi di utilizzo dei fogli di stile saranno fatti più avanti.

[Esempio (Struttura documento tramite header)]

Livello 1

Livello 1.1

Livello 1.1.1

Livello 1.1.2

Livello 1.2

Livello 1.2.1

Livello 1.2.2

Livello 2

Livello 2.1

Livello 2.1.1

Livello 2.1.2

Livello 2.2

Livello 2.2.1

Livello 2.2.2


� Per le liste numerate occorre utilizzare i tag appropriati e numeri composti (1, 1.1, 1.2, 2. 2.1,…). Importante: i tag <dl> <ul> e <ol> devono essere usati solo per creare liste e non per formattare il testo. Evitare le liste non ordinate (<ul>) con annidamenti, dal momento che esse non sono prefissate da numeri che ne chiariscano la struttura.

[Esempio (Utilizzo errato di liste numerate)]

[Esempio (Utilizzo corretto di liste numerate)]

NB.: la capacità di numerare le liste attraverso i fogli di stile dipende dal browser e dalla sua versione (ad esempio, attualmente le implementazioni per MS-Windows di Internet Explorer e di Mozilla non supportano i contatori tramite CSS utilizzati nell’esempio "Utilizzo corretto di liste numerate"). Per questo motivo è opportuno trovare un'alternativa (vedi esempio successivo).

Esempio lista

1. Uno

1. uno punto uno

2. uno punto due

2. Due

1. due punto uno


Dove possibile inserire la numerazione direttamente nella parte testuale degli elementi della lista come nel seguente esempio.

[Esempio (Lista numerata manualmente)]

Esempio lista

� 1 Prima lista

� 1.1 Primo elemento

� 1.2 Secondo elemento

� 2 Seconda lista

� 2.1 Primo elemento

� 2.2 Secondo elemento


� Non utilizzare i tag <q> o <blockquote> per formattare il testo (es.: rientro), ma solo per fare lunghe o brevi citazioni.

� Utilizzare tecnologie W3C se adeguate per un determinato compito. E' meglio sempre utilizzare l'ultima versione, se supportata. Si suggerisce di utilizzare le tecnologie W3C in quanto sono state riviste per l'accessibilità e forniscono caratteristiche a supporto delle tecnologie assistive. Le tecnologie attualmente disponibili sono:

� MathML per equazioni matematiche;

� HTML, XHTML, XML per strutturare le pagine web;

� RDF per meta dati;

� SMIL per creare presentazioni multimediali;

� CSS e XSL per definire fogli di stile;

� XSLT per creare trasformazioni di stile;

� PNG per grafica (tuttavia in alcuni casi è preferibile l'utilizzo di JPG, anche se non è una specifica W3C).

Si faccia anche riferimento al documento: Studio sulle linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità dei siti internet] per un elenco più completo di tecnologie definite da grammatiche formali.


� Evitare l'utilizzo di caratteristiche delle tecnologie W3C disapprovate:

� HTML: nella seguente tabella appare l'elenco degli elementi e attributi da non utilizzare perché disapprovati.

� CSS: le specifiche CSS2, grazie all'operatore "!important", permettono all'utente di applicare stili personalizzati in sostituzione di quelli previsti dall'autore o dal distributore (provider) delle pagine web. Pertanto si raccomanda l'utilizzo di tali specifiche nella stesura dei fogli di stile.

ES.: /* Sets the text color to black and the background color to white for the document body. */ BODY { color: black ! important ; background: white ! important }

Elementi ed attributi da non utilizzare

Elementi HTML Attributi strutturali Altri attributi

APPLET START ALIGN

BASEFONT VALUE VALIGN

CENTER CLEAR

DIR NOWRAP

FONT HSPACE

ISINDEX VSPACE

MENU COMPACT

S FACE

STRIKE SIZE

U BACKGROUND

BGCOLOR

COLOR

TEXT

LINK

ALINK

VLINK

NOSHADE

SIZE (disapprovato in base all'elemento a cui è riferito


� FONT:

� specificare sempre un font generico;

� al posto di elementi di presentazione e di attributi disapprovati (vedi sopra) usare le proprietà CSS che controllano le caratteristiche dei font: 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', e 'font-weight';

� al posto dei seguenti elementi e attributi dei font: "font", "basefont", "face", "size"; usare le seguenti proprietà CSS2 per controllare i font: 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant' e 'font-weight';

� nel caso si utilizzino elementi HTML per controllare i font, si usino "big" a "small" che non sono disapprovati.

[Esempio (Controllo caratteristiche dei font)]

NB.: la capacità di visualizzare correttamente questo esempio è legata al browser utilizzato

Testo con font generico

Testo con font generico paragrafo

Testo grosso con font generico paragrafo

Testo importante

Testo meno importante


Codice esempi

Definizione Tipo Documento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 1 (Definizione Tipo Documento rigroroso)</title> </head> <body> <div class="corpo"> <p>REQUISITO 1 :</p> <p>Realizzare pagine e oggetti in esse contenuti con tecnologie definite da grammatiche formali pubblicate, utilizzando le ultime versioni disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche. Per l'HTML o l'XHTML utilizzare una Definizione del Tipo di Documento (Document Type Definition - DTD) di tipo rigoroso (Strict) </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl1a.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Immagine come testo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <link rel="stylesheet" media="screen" href="manuale.css" type="text/css" /> <title>Esempio per requisito 1 (utilizzo deprecato di immagini come testi) </title> </head> <body> <div class="corpo"> <img src="immagini/TestoImg.GIF" alt="Immagine contente testo (deprecato)"></img> </div> <div class="footer"> <form action="./TxtCode/DTmpl1a.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Formula

<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it"> <head> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <title>Utilizzo appropriato linguaggio di marcatori</title> </head> <body> <div class="corpo"> <p>E=Energia, m=massa c=velocità della luce</p> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mtable> <mtr> <mtd> <mrow> <mi>E</mi> <msup> <mrow> <mo>=</mo> <mi>mc</mi> </mrow> <mn>2</mn> </msup> </mrow> </mtd> </mtr> </mtable> </mrow> </math> </div> <div class="footer"> <form action="./TxtCode/Tmpl1am.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Sezioni Documento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 1 (Utilizzo sezioni di intestazione)</title> </head> <body> <div class="corpo"> <h1 id="intestazione">Spiegazione dell' esempio</h1> <hr></hr> <p> In questo documento l'intestazione è stata evidenziata da una barra e posta nell'elemento di intestazione h1. </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl1e.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Struttura documento tramite header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 1 (Utilizzo di intestazioni annidate)</title> </head> <body> <div class="corpo"> <h1 id="Prima-intestazione">Livello 1 </h1> <h2 id="L1.1">Livello 1.1</h2> <h3 id="L1.1.1">Livello 1.1.1</h3> <h3 id="L1.1.2">Livello 1.1.2</h3> <h2 id="L1.2">Livello 1.2</h2> <h3 id="L1.2.1">Livello 1.2.1</h3> <h3 id="L1.2.2">Livello 1.2.2</h3> <h1 id="Seconda-intestazione">Livello 2</h1> <h2 id="L2.1">Livello 2.1</h2> <h3 id="L2.1.1">Livello 2.1.1</h3> <h3 id="L2.1.2">Livello 2.1.2</h3> <h2 id="L2.2">Livello 2.2 </h2> <h3 id="L2.2.1">Livello 2.2.1</h3> <h3 id="L2.2.2">Livello 2.2.2</h3> </div> <div class="footer"> <form action="./TxtCode/Tmpl1f.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Utilizzo corretto di liste numerate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Esempio per requisito 1 (Lista: numeratori nei figli di stile)</title> <style type="text/css"> ul, ol { counter-reset: item } li { display: block } li:before { content: counters(item, "."); counter-increment: item } </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div id="Lista"> Esempio lista <ol> <li> Uno <ol> <li> uno punto uno </li> <li> uno punto due </li> </ol> </li> <li> Due <ol> <li> due punto uno </li> </ol> </li> </ol> </div> <div class="footer"> <form action="./TxtCode/Tmpl1b.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Utilizzo errato di liste numerate

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Esempio per requisito 1 (Lista: utilizzo deprecato)</title> <style type="text/css"> .sovrapposto{position: absolute; left: 0px; top: 0px;z-index: -1;} </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div id="Lista"> Esempio lista <ol> <li> Uno <ol> <li> uno punto uno </li> <li> uno punto due </li> </ol> </li> <li> Due <ol> <li> due punto uno </li> </ol> </li> </ol> <p class="sovrapposto"> <img src="immagini/No.GIF" width="100%" height="100%" alt="NO"/> </p> </div> <div class="footer"> <form action="./TxtCode/DTmpl1b.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Lista numerata manualmente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Requisito 1 (Utilizzo di liste)</title> </head> <body> <div class="corpo"> <h1 id="Titolo">Esempio lista</h1> <ul> <li id="L1">1 Prima lista <ul> <li id="L1.1">1.1 Primo elemento</li> <li id="L1.2">1.2 Secondo elemento</li> </ul> </li> <li id="L2">2 Seconda lista <ul> <li id="L2.1">2.1 Primo elemento</li> <li id="L2.2">2.2 Secondo elemento</li> </ul> </li> </ul> </div> <div class="footer"> <form action="./TxtCode/Tmpl1b_1.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Controllo caratteristiche dei font

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Esempio per requisito 1 (Font) </title> <style type="text/css"> ul, ol { counter-reset: item } li { display: block } li:before { content: counters(item, "."); counter-increment: item } body { font-family: "Gill Sans", sans-serif } p { font-family: Verdana } P.important { font-weight: bold } P.less-important { font-weight: lighter; font-size: smaller } H2.subsection { font-family: Helvetica, sans-serif } </style> <link rel="stylesheet" media="print" href="print.css" type="text/css"/> </head> <body> <div class="corpo"> <h1>Testo con font generico</h1> <p>Testo con font generico paragrafo </p> <p><big>Testo grosso con font generico paragrafo</big></p> <p class="important">Testo importante</p> <p class="less-important">Testo meno importante</p> </div> <div class="footer"> <form action="./TxtCode/Tmpl1c.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Requisito 2

Non è consentito l’utilizzo dei frame. In caso di prima applicazione per siti esistenti già realizzati con frame è consentito l'uso di DTD "frameset" seguendo le indicazioni fornite.

Il requisito 2 ci richiede la verifica dei seguenti punti nel caso si utilizzino i frame:

� Usare l’attributo “title” per nominare i frame e dare una descrizione sullo scopo e la loro

interazione.

� Utilizzare l'attributo "longdesc" per specificare una pagina contenente la descrizione dei

frame.

� Utilizzare il tag <noframes> per fornire un'alternativa ai browser che non supportano

l'utilizzo di frame.

[Esempio (Utilizzo di frame)]

REQUISITO 1 :

Realizzare pagine e

Esempio lista

1. Uno

1. uno punto uno

2. uno punto due

2. Due

1. due punto uno




Testo importante


REQUISITO 1 :

Realizzare pagine e oggetti in esse contenuti con

tecnologie definite da grammatiche formali


[Esempio (Descrizione dei frame)]

� Evitare di utilizzare elementi ed attributi che definiscano gli aspetti grafici delle pagine

(caratteristiche dei caratteri del testo, colori di sfondo, ecc.) e utilizzare, invece, i fogli di

stile.

#Requisito1 - Questo frame contiene una parte della definizione per il requisito 1

#lista - Questo frame contiene una lista numerata

#font - Questo frame contiene l' esempio di utilizzo di font

#Codice - Questo frame contiene un bottone per poter visualizzare il codice


Codice esempi

Utilizzo di frame

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html lang="it">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<meta name="author" content="Marcello Savino"/>

<meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/>

<title>Esempio di documento con l' utilizzo di frame</title>

</head>

<frameset rows="75%, *">

<frameset cols="30%, *" title="La collezione di esempi precedenti">

<frameset rows="20%, *">

<frame src="Tmpl1a.html" name="Requisito1"

title="Frame requisito 1" longdesc="Tmpl2a-desc.html">

</frame>

<frame src="Tmpl1b.html" name="Lista"

title="Frame lista" longdesc="Tmpl2a-desc.html">

</frame>

</frameset>

<frameset rows="*, 20%">

<frame src="Tmpl1c.html" name="Font" title="Frame font"

longdesc="Tmpl2a-desc.html">

</frame>

<frame src="Tmpl1a.html" name="Requisito1" title="Frame requisito 1"

longdesc="Tmpl2a-desc.html">

</frame>

</frameset>

</frameset>

<frame src="Footer.html" name="Codice"

title="Frame per la visualizzazione codice">

</frame>

<noframes>

<body>

<div class="corpo">

<ol>

<li><a href="Tmpl1a.html">Frame requisito 1</a></li>

<li><a href="Tmpl1b.html">Frame lista</a></li>

<li><a href="Tmpl1c.html">Frame font</a></li>

<li><a href="Footer.html">Frame visualizzazione codice</a></li>

<li><a href="Tmpl2a-desc.html">Descrizione dei frames.</a></li>

</ol>

</div>

<div class="footer">

<form action="./TxtCode/Tmpl2a.html">

<p><input type="submit" value="Visualizza il codice"/></p>

</form>

</div>

</body>

</noframes>

</frameset>

</html>


Descrizione dei frame

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="it">

<head>




<title>Descrizione dei frames della pagina esempio frame per requisito 2

</title>

</head>

<body>

<p>#Requisito1 - Questo frame contiene una parte della definizione per il requisito 1 </p>

<p>#lista - Questo frame contiene una lista numerata</p>

<p>#font - Questo frame contiene l' esempio di utilizzo di font</p>

<p>#Codice - Questo frame contiene un bottone per poter visualizzare il codice</p>

</body>

</html>


Requisito 3

Fornire un'alternativa testuale equivalente per ogni oggetto non testuale presente in una pagina

e assicurarsi che al variare dinamico di un contenuto non testuale siano anche aggiornati gli

equivalenti testuali.


� Aggiungere una descrizione testuale agli oggetti non testuali in base alla seguente tabella:

Tabella modalità per descrizione

Elemento Attributo o altra modalità per descrizione

Img alt

Input alt

Applet alt / testo equivalente nel contenuto dell’elemento

Object testo equivalente nel contenuto dell’elemento


� Evitare di usare immagini come “punti” nelle liste create con <dl>, <dt>, <dd>. Se questo metodo è utilizzato, fornire un'equivalente testuale per l'immagine.

[Esempio (Lista puntata con immagini)]

In questo esempio sono visibili delle immagini (stelle) che fungono da punti per la lista. Per ogni immagine è stato valorizzato l'attributo "alt" con un asterisco. In questo modo un browser testuale mostrerà un asterisco al posto dell'immagine (vedi codice relativo).

Adriana

Laura

Alice

* Adriana * Laura * Alice


� Quando un'immagine è usata come contenuto di un collegamento ipertestuale, si specifichi il testo equivalente per l'immagine.

[Esempio (Collegamento ipertestuale con immagine)]

In questo esempio sono state utilizzate due tecniche:

� la prima utilizza <alt> per fornire l’equivalente testuale al link;

� la seconda scrive il testo che descrive il link subito dopo l’immagine ponendo <alt> uguale a uno spazio bianco.

1.

2. Primo esempio


� Quando si usa <img> specificare un testo corto equivalente utilizzando l’attributo “alt”.

[Esempio (Testo descrittivo di immagine)]

� Quando si utilizza <object> specificare un testo equivalente nel corpo dell’elemento <object>.

[Vedi codice esempio "Testo nel corpo dell'elemento object"]

NB.: la capacità di visualizzare correttamente questo esempio dipende dal browser, dalla sua versione e dalla macchina su cui è installato (in alcuni casi, ad esempio, Internet Explorer non mostra correttamente il logo o il testo specificato nell’elemento <object>).

� Per contenuti complessi (es.: un diagramma) o comunque, se un testo corto non fornisce adeguate informazioni, fornire una descrizione aggiuntiva usando l’attributo “longdesc” con gli elementi <img> o <frame>. Per i browser che non supportano l’attributo “longdesc” occorre fornire anche un collegamento ipertestuale alla pagina descrittiva. Utilizzare un collegamento ipertestuale all’interno di un elemento <object>. All’interno di un elemento <object> è possibile fornire, in alternativa al collegamento ipertestuale con un foglio descrittivo, un’adeguata descrizione con un testo più lungo.

Provincia Autonoma di Trento

Provincia Autonoma di Trento Logo P.A.T.


[Esempio (Descrizione immagini complesse)]

[ collegamento versione accessibile]

Organigramma Ministero per l'Innovazione e le Tecnologie

Versione testo


Il collegamento ipertestuale al foglio di descrittivo (nell'esempio "Versione testo") deve essere visibile in ogni caso.

L'utilizzo di collegamenti ipertestuali "invisibili" realizzati, ad esempio con immagini di dimensioni minime (1 pixel), non va utilizzato.


� La scansione del testo effettuata da tecnologie assistive può generare output incomprensibili e indesiderati nel caso di utilizzo di caratteri per creare immagini o effetti particolari. Si eviti, quindi, l’utilizzo di ASCII art (illustrazioni realizzate tramite caratteri), si utilizzino, invece, immagini reali più facilmente “corredabili” con un testo equivalente. Se, tuttavia, non è possibile fare altrimenti, occorre fornire un collegamento per saltare oltre l’immagine realizzata con caratteri ASCII e/o un collegamento ipertestuale alla descrizione dell’illustrazione. Per immagini ASCII di piccole dimensioni è possibile anche utilizzare l’elemento <abbr> con l’attributo “alt”.

[Esempio (Utilizzo di ASCII-art)]

Diagramma realizzato con caratteri

Diagramma della funzione Y=2x

Descrizione testuale del diagramma

Passa oltre diagramma ASCII

10 9 8 * 7 6 * 5 4 * 3 2 * 1 0 1 2 3 4 5 6 7 8 9 10 y=2x

fine ASCII art

;-)


� Per mappe di immagini (immagini con regioni "attive") usare o l'attributo "alt" con "area", o l'elemento "map" con elemento "a" e altro testo come contenuto.

[Vedi esempio: "Mappe con regioni attive"]

� Se si utilizza un elemento <applet> occorre fornire una descrizione equivalente attraverso l’attributo “alt” e nel contenuto dell’elemento stesso. Questo per garantire l’equivalenza “testuale” anche per i browser che non supportino uno dei due metodi (“alt” o contenuto dell’elemento).

[Vedi codice esempio: "Descrizione per applet"]

� Se necessario, fornire un contenuto testuale equivalente per informazioni visive in modo da permettere la comprensione della pagina:

� brevi descrizioni per semplici animazioni ripetitive;

� informazioni esaustive quando il contenuto informativo della presentazione visiva deve essere spiegata per permettere a chiunque di comprenderla appieno.

� Descrivere lo scopo dei frame (se utilizzati) e le relazioni che li legano l'uno all'altro (vedi esempi per il requisito 2). Le pagine devono essere scritte in modo da essere funzionanti anche in browser che non supportano i frame (vedi esempi per il requisito 2).


� L'utilizzo di immagini come bottoni è ammesso a patto di fornire l'equivalente testuale tramite l'attributo "alt".

[Esempio (Utilizzo di immagini come bottoni)]

� Assicurarsi che l'equivalente per un contenuto dinamico sia aggiornato al variare del contenuto stesso:

� il sorgente di un frame ("src") deve sempre essere un file "html" che può contenere immagini e testo che varino concordemente.

Bottone Submit


[Esempio (Sorgente di un frame)]




Testo

importante





� Assicurarsi che le pagine siano utilizzabili anche quando script, applet o altri oggetti programmabili siano disattivati o non supportati. Se ciò non è possibile, fornire le informazione equivalenti in pagine alternative. Utilizzare l'elemento "noscript" il cui contenuto è processato dall'interprete (browser) se gli script non sono abilitati.


Codice esempi

Lista puntata con immagini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Esempio per requisito 3 (Liste con immagini come "punti")</title> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div class="corpo"> <dl> <dd><img src="immagini/star.jpg" alt="* "></img>Adriana</dd> <dd><img src="immagini/star.jpg" alt="* "></img>Laura</dd> <dd><img src="immagini/star.jpg" alt="* "></img>Alice</dd> </dl> </div> <div class="footer"> <form action="./TxtCode/Tmpl3c.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Collegamento ipertestuale con immagine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Collegamenti ipertestuali con immagini) </title> </head> <body> <div class="corpo"> <ol> <li> <a href="Tmpl1a.html"> <img src="immagini/one.jpg" alt="Primo esempio"></img> </a> </li> <li> <a href="Tmpl1a.html"> <img src="immagini/one.jpg" alt=" "></img>Primo esempio </a> </li> </ol> </div> <div class="footer"> <form action="./TxtCode/Tmpl3d.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Testo descrittivo di immagine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Immagine con testo alternativo)</title> </head> <body> <div class="corpo"> <h1> <img src="immagini/logo.jpg" alt="Logo P.A.T."></img> Provincia Autonoma di Trento </h1> </div> <div class="footer"> <form action="./TxtCode/Tmpl3e.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Testo nel corpo dell'elemento object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Immagine come oggetto)</title> </head> <body> <div class="corpo"> <h1> <object data="immagini/Logo.jpg" type="image/png">Logo P.A.T.</object> </h1> </div> <div class="footer"> <form action="./TxtCode/Tmpl3f.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Descrizione immagini complesse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Alternative testuali per immagini complesse) </title> </head> <body> <div class="corpo"> <p>[<a href="longdesc/organigramma_090304txt.html"> collegamento versione accessibile</a>]</p> <h1>Organigramma Ministero per l'Innovazione e le Tecnologie</h1> <p> <img src="immagini/organigramma_090304.gif" longdesc="longdesc/organigramma_090304txt.html" alt="Organigramma M.I.T."> </img> </p> <p> <a href="longdesc/organigramma_090304txt.html" title="Organigramma Ministero perl'Innovazione e le Tecnologie">Versione testo</a> </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl3g.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Utilizzo di ASCII-art

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (ASCII Art)</title> </head> <body> <div class="corpo"> <h1>Diagramma realizzato con caratteri</h1> <h2>Diagramma della funzione Y=2x </h2> <h3><a href="longdesc/DescrAscii3h.html">Descrizione testuale del diagramma </a> </h3> <h3><a href="#post-art">Passa oltre diagramma ASCII</a></h3> <pre> 10 9 8 * 7 6 * 5 4 * 3 2 * 1 0 1 2 3 4 5 6 7 8 9 10 y=2x </pre> <p><a name="post-art">fine ASCII art</a></p> <p><abbr title="Faccina sorridente che fà l'occhiolino">;-)</abbr></p> </div> <div class="footer"> <form action="./TxtCode/Tmpl3h.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Mappe con regioni attive

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Mappe di immagini)</title> </head> <body> <div class="corpo" > <img src="immagini/navbar.gif" alt="Mappa di navigazione del sito (link testuali di seguito)" usemap="#map1"> </img> <map name="map1" id="map1"> <p>Navigazione nel sito. [<a href="guide.html" shape="rect" coords="0,0,70,120">Guida al sito</a>] [<a href="shortcut.html" shape="rect" coords="70,0,180,120">Entra</a>] [<a href="search.html" shape="rect" coords="0,120, 180,180">Cerca</a>] [<a href="top10.html" shape="rect" coords="0, 180, 180, 380"> Primi 10</a>]</p> </map> </div> <div class="footer"> <form action="./TxtCode/Tmpl3i.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Descrizione per applet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Utilizzo di applet)</title> </head> <body> <div class="corpo"> <applet code="yavs.class" width="50%" height="50%" alt="Applet java : News del giorno: è attivo un link alle informazioni accluse" > <param name="MSGTEXT" value="news.html"></param> <param name="BGCOLOR" value="#FFFFFF"></param> <param name="FGCOLOR" value="#000099"></param> <param name="HREFCOLOR" value="#0000FF"></param> <param name="LINKCOLOR" value="#CC0000"></param> <param name="FONTNAME" value="Verdana"></param> <param name="FONTSIZE" value="15"></param> <param name="SPEED" value="30"></param> <a href="News.html">[News del giorno]<a> </applet> </div> <div class="footer"> <form action="./TxtCode/Tmpl3m.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Utilizzo di immagini come bottoni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Bottone grafico</title> <script type="text/javascript"> function submitform(){return true;} </script> </head> <body> <div class="corpo"> <p> <input type="image" src="immagini/submit.jpg" onclick="submitform()" onkeypress="submitform()" name="submitgif" alt="Bottone Submit"/> </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl3a.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Sorgente di un frame

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio di documento con l' utilizzo corretto di frame</title> </head> <frameset rows="90%, *"> <frameset cols="30%, *" title="Frame che evolvono"> <frame src="Tmpl1c.html" name="Font" title="Frame font"></frame> <frame src="Tmpl3g.html" name="Organigramma" title="Frame organigramma"> </frame> </frameset> <frameset> <frame src="footer.html" name="Codice" title="Visualizza codice"></frame> </frameset> </frameset> <noframes> <p><a href="Tmpl1c.html">Frame font</a></p> <p><a href="Tmpl3g.html">Frame organigramma</a></p> </noframes> </html>


Requisito 4

Assicurarsi che tutta l'informazione e tutte le funzionalità veicolate dal colore siano disponibili anche senza l'uso dello stesso.


� Non usare frasi del tipo "Scegliere un campo tra quelli color verde".

� Non affidare l'evidenziazione di errori esclusivamente al colore (es.: dato di input non valido in rosso), ma mostrare un messaggio che spieghi chiaramente la natura dell'errore stesso.

� Assicurare che l'informazione sia disponibile tramite effetti di stile (es.: un effetto sui font) e deducibile dal contesto (es.: collegamenti ipertestuali con testo comprensibile).

� Esaminare le pagine con un monitor monocromatico.

� Stampare le pagine su stampante in bianco e nero e fotocopiarne più volte le stampe per verificare il degrado e le zone che hanno bisogno di essere ulteriormente evidenziate. Questa tecnica permette di verificare se il contrasto utilizzato nella pagina è sufficiente, infatti, via via che si fotocopiano le pagine, il contrasto diminuisce. Se un lieve degrado della qualità di stampa rende la stessa illeggibile, andranno rivisti i caratteri e i colori utilizzati.


Requisito 5

Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di funzionamento

possono provocare disturbi da epilessia fotosensibile, disturbi della concentrazione o che

possono causare il malfunzionamento delle tecnologie assistive. Quando le esigenze informative

richiedono comunque il loro utilizzo, avvisare l'utente del rischio e predisporre metodi che

consentano di evitare tali oggetti.


� Fino a quando gli interpreti (browser) non permetteranno agli utenti di controllare lo sfarfallio, evitare di causare lo sfarfallio dello schermo.

� Fino a quando gli interpreti (browser) non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto. Utilizzare sempre i fogli di stile per cambiare le proprietà dei contenuti:

� in CSS 'text-decoration: blink' causa il lampeggiamento del contenuto. L'utente può disabilitare il foglio di stile o sovrascrivere la regola con un foglio stile utente.

� Non usare gli elementi <BLINK> e <MARQUEE> che non fanno parte delle specifiche W3C.

� Fino a quando gli interpreti (browser) non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento delle pagine:

� usare fogli di stile insieme con gli script per creare il movimento permettendo agli utenti di disabilitare oppure tenere sotto controllo gli effetti con maggiore facilità.


[Esempio (Lampeggiamento)]

In questo esempio è stato utilizzato un foglio di stile (vedi ["Manuale.css"], sezione blinking) per far lampeggiare la scritta e per colorarla di rosso.

Disabilitando i fogli di stile e/o applicando un foglio di stile adeguato, il lampeggiamento e il colore vengono disabilitati raggiungendo lo scopo.

Esempi

Per disabilitare l'effetto di lampeggiamento disabilitare il foglio di stile dal browser o applicare un foglio di stile utente e riaprire la pagina. Nota che non tutti i browser supportano il text-decoration: blink.

Testo rosso e lampeggiante.


Codice esempi

Lampeggiamento

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="it">

<head>


<title>

Esempio per requisito 5 (Effetti di lampeggiamento e scorrimento testo )

</title>



<link rel="stylesheet" media="print" href="print.css" type="text/css" />

<link rel="stylesheet" media="screen" href="Manuale.css" type="text/css" />

</head>

<body>

<div class="corpo">

<h1>Esempi</h1>

<h2>Per disabilitare l'effetto di lampeggiamento disabilitare il

foglio di stile dal browser o applicare un foglio di stile utente

e riaprire la pagina. Nota che non tutti i browser supportano

il text-decoration: blink.</h2>

<p class="blinking">Testo rosso e lampeggiante.</p>

</div>




</form>

</div>

</body>

</html>


Requisito 6

Assicurare che la combinazione di colori tra sfondo e contenuto informativo fornisca sufficiente contrasto per essere visto anche da chi ha deficit percettivi sul colore e per essere correttamente visualizzato con schermo monocromatico.


� Usare numeri al posto dei nomi per definire i colori.

� Usare le seguenti proprietà CSS per specificare i colori:

� ‘color’ per il colore dei testi;

� ‘background-color’ per il colore di sfondo;

� ‘border-color’, ‘outline-color’ per il colore dei bordi;

� per il colore dei collegamenti ipertestuali si faccia riferimento alle pseudo-classi ‘:link’, ‘:visited’, ‘:active’.

[Esempio (Specifica colori)]

Si vedano i fogli di stile utilizzati in questo esempio :Manuale.css (Video), Print.css (Stampante).




Testo importante


Link all' esempio 2 a

Premi

1


� Ci si assicuri che i colori del contenuto informativo (foreground) e quelli di sfondo (background) abbiano un contrasto sufficiente. Se si specifica un colore per il testo, si specifichi sempre anche il colore di sfondo (e viceversa). Per verificare se luminosità e contrasto dei colori usati rispondano al requisito in oggetto si possono utilizzare le seguenti formule:

� Luminosità : ((valore del colore rosso X 299) + (valore del colore verde X 587) + (valore del colore blue X 114)) / 1000. Per una corretta luminosità, la differenza dell'indice calcolato per il colore di background rispetto all'indice di luminosità del colore di foreground dovrebbe essere superiore a 125.E' estremamente importante il rispetto di questo valore perchè i soggetti con problemi nella visione dei colori mantengono la capacità di discriminare la diversa luminosità degli stimoli e possono quindi servirsene per differenziare gli oggetti sul web¹

� Contrasto : (massimo (valore rosso 1, valore rosso 2) - minimo (valore rosso 1, valore rosso 2)) + (massimo (valore verde 1, valore verde 2) - minimo (valore verde 1, valore verde 2)) + (massimo (valore blu 1, valore blu 2) - minimo (valore blu 1, valore blu 2)). Per un corretto contrasto, il valore restituito dovrebbe essere superiore a 400 (valore di soglia utilizzato dalla Hewlett Packard, possibilmente maggiore a 500 (valore di soglia tutlizzato dal W3C).

¹ Cfr. A. Farini, Visione dei colori e accessibilità, 2005.

L'utilizzo di tali formule richiede, dato un codice colore (es#FF0088), di attribuire i corretti valori al rosso, verde e blu che lo compongono. Il codice colore dell'esempio è in base esadecimale ed in notazione RGB (Red Green Blue per l'appunto) e va letto a coppie: la prima coppia di numeri indica il valore del rosso , la seconda quello del verde la terza quello del blu. Nell' esempio riportato (#FF0088) al rosso corrisponde il valore 255 (esadecimale FF), al verde 0, al blu 136 (esadecimale 88).

Le tabelle successive schematizzano l'abbinamento di una serie di colori. Alle colonne corrispondono i colori del contenuto informativo (foreground) alle righe i colori dello sfondo. Le celle sono valorizzate con 'SI' e 'NO' a seconda che abbiano o meno sufficiente contrasto e luminosità.

Nelle prime due tabelle sono utilizzati i codici numerici, La terza tabella utilizza dei codici mnemonici che corrispondono al nome in inglese di alcuni colori principali e la sua presenza ha lo scopo di riassumere le combinazioni di colori più comunemente usate.

2


Tabella abbinamento colori con codici numerici

000000 0000FF 008080 00FFFF 800080 808000 808080

000000 NO NO NO SI NO NO NO

0000FF NO NO NO NO NO NO NO

008080 NO NO NO NO NO NO NO

00FFFF SI NO NO NO SI NO NO

800080 NO NO NO SI NO NO NO



8080FF SI NO NO NO NO NO NO

80FF80 SI SI NO NO NO NO NO

FF0000 NO NO NO NO NO NO NO

FF8080 SI SI NO NO NO NO NO

FF80FF SI NO NO NO NO NO NO

FFFF00 SI SI SI NO SI NO NO

FFFFFF SI SI SI NO SI SI NO

Tabella abbinamento colori con codici numerici

8080FF 80FF80 FF0000 FF8080 FF80FF FFFF00 FFFFFF

000000 SI SI NO SI SI SI SI

0000FF NO SI NO SI NO SI SI

008080 NO NO NO NO NO SI SI

00FFFF NO NO NO NO NO NO NO

800080 NO NO NO NO NO SI SI

808000 NO NO NO NO NO NO SI


8080FF NO NO NO NO NO NO NO

80FF80 NO NO SI NO NO NO NO

FF0000 NO SI NO NO NO NO SI

FF8080 NO NO NO NO NO NO NO

FF80FF NO NO NO NO NO NO NO

FFFF00 NO NO NO NO NO NO NO

FFFFFF NO NO SI NO NO NO NO

3


NB.: le tabelle hanno il solo scopo di fornire alcuni esempi. Vi sono molte altre combinazioni di colore in grado di fornire l'adeguato contrasto. All'utilizzo di un codice mnemonico del colore è preferibile l'utiilzzo del codice numerico.

Tabella abbinamento colori con codici mnemonici

Black Silver Gray White Maroon Red Purple Fuchsia

Black NO SI NO SI NO NO NO NO

Silver SI NO NO NO NO NO NO NO

Gray NO NO NO NO NO NO NO NO

White SI NO NO NO SI SI SI NO

Maroon NO NO NO SI NO NO NO NO

Red NO NO NO SI NO NO NO NO

Purple NO NO NO SI NO NO NO NO

Fuchsia NO NO NO NO NO NO NO NO

Green NO NO NO SI NO NO NO NO

Lime NO NO NO NO NO NO NO NO

Olive NO NO NO SI NO NO NO NO

Yellow SI NO NO NO NO NO SI NO

Navy NO NO NO SI NO NO NO NO

Blue NO NO NO SI NO NO NO NO

Teal NO NO NO SI NO NO NO NO

Aqua SI NO NO NO SI NO SI NO

Tabella abbinamento colori con codici mnemonici

Green Lime Olive Yellow Navy Blue Teal Aqua

Black NO NO NO SI NO NO NO SI

Silver NO NO NO NO NO NO NO NO

Gray NO NO NO NO NO NO NO NO

White SI NO SI NO SI SI SI NO

Maroon NO NO NO NO NO NO NO SI

Red NO NO NO NO NO NO NO NO

Purple NO NO NO SI NO NO NO SI

Fuchsia NO NO NO NO NO NO NO NO

Green NO NO NO NO NO NO NO NO

Lime NO NO NO NO NO NO NO NO

Olive NO NO NO NO NO NO NO NO

Yellow NO NO NO NO SI SI SI NO

Navy NO NO NO SI NO NO NO NO

Blue NO NO NO SI NO NO NO NO

Teal NO NO NO SI NO NO NO NO

Aqua NO NO NO NO NO NO NO NO

4


Approfondimenti e metodologie per la verifica tecnica

Segnaliamo alcuni collegamenti a pagine contenenti approfondimenti sull' argomento

� Percezione del colore e leggibilità dei testi su video

� COLOR PHENOMENA

� Effective Color Contrast (Designing for People with Partial Sight and Color Deficiencies)

Per la valutazione di questo punto esistono programmi che aiutano a verificare la rispondenza dei colori scelti all’algoritmo indicato. Ecco un elenco di collegamenti ad alcuni strumenti di valutazione del contrasto colori:

� Color Scheme Generator 2

� Juicy Studio: test di accessibilità nei CSS

� Controlla la luminosità e il contrasto dei colori del tuo sito (Bazzmann|Mag)

� Color contrast verification tool (Hewlett Packard)

5


Codice esempi

Specifica colori



<html lang="it">

<head>


<title>Esempio requisito 6</title>





</head>

<body class="r6">

<div class="r6">

<h2>Testo con font generico</h2>

<p>Testo con font generico paragrafo </p>

<div>

<p><big>Testo grosso con font generico paragrafo</big></p>

</div>

<p class="important">Testo importante</p>

<p class="less-important">Testo meno importante</p>

<p><input type="button" value="Premi"/></p>

<p><a href="Tmpl2a.html">Link all' esempio 2 a</a></p>

</div>




</form>

</div>

</body>

</html>

6


Requisito 7

Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, eccetto il caso in

cui le zone sensibili non possano essere definite con una forma geometrica valida.


� Fornire collegamenti ipertestuali ridondanti di tipo testuale per ogni regione attiva della

mappa:

� includere i collegamenti alternativi nel corpo di un elemento <object>;

� se viene utilizzato il tag <img> si fornisca una lista alternativa di collegamenti

ipertestuali e se ne indichi l'esistenza tramite l'attributo "alt".

[Vedi codice esempio: "Alternative testuali per mappatura immagini"]

In questo esempio, l'immagine ha una mappa sottostante di collegamenti ipertestuali. Le

diverse zone dell'immagine hanno un collegamento a diverse pagine.

NB: non tutti gli interpreti (browser) gestiscono correttamente la mappa di collegamenti


Codice esempi

Alternative testuali per mappatura immagini



<html lang="it">

<head>





<title>Esempio per requisito 3 (Mappe di immagini)</title>

</head>

<body>

<div class="corpo" >

<img src="immagini/navbar.gif"

alt="Mappa di navigazione del sito (link testuali di seguito)"

usemap="#map1">

</img>

<map name="map1" id="map1">

<p>Navigazione nel sito.

[<a href="guide.html" shape="rect"

coords="0,0,70,120">Guida al sito</a>]

[<a href="shortcut.html" shape="rect"

coords="70,0,180,120">Entra</a>]

[<a href="search.html" shape="rect"

coords="0,120, 180,180">Cerca</a>]

[<a href="top10.html" shape="rect"

coords="0, 180, 180, 380">

Primi 10</a>]</p>

</map>

</div>


<form action="./TxtCode/Tmpl3i.html">


</form>

</div>

</body>

</html>


Requisito 8

Se sono utilizzate mappe immagine lato server, fornire i collegamenti di testo alternativi

necessari per ottenere tutte le informazioni e/o i servizi raggiungibili tramite azioni sulla mappa.


� Fornire collegamenti ipertestuali ridondanti di tipo testuale per ogni area attiva della mappa:

� includere collegamenti ipertestuali alternativi nel corpo di un elemento "object".

[Vedi codice esempio: "Collegamenti ipertestuali alternativi con object"]

NB.: non tutti gli interpreti (browser) sono in grado di visualizzare l'oggetto immagine di questo esempio.

Utilizzando questa tecnica, un interprete (browser) testuale, mostrerà l'elenco dei link su cui è mappata l'immagine producendo un output simile a questo:

Navigate the site. [Access Guide] [Go] [Search] [ Top Ten]


� Se si utilizza "img" per inserire un'immagine si fornisca un'alternativa dopo l'immagine indicandone esistenza e posizione tramite l'attributo "alt".

[Esempio (Collegamenti ipertestuali alternativi all'immagine)]

[ Link alle linee guida per l'accessibilità consorzio W3C ]


Codice esempi

Collegamenti ipertestuali alternativi con object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per il requisito 8</title> </head> <body> <div class="corpo"> <object data="immagini/navbar.gif" type="image/gif" usemap="#map1"> <map name="map1" id="map1"> <p>Navigate the site. [<a href="guide.html" shape="rect" alt="Access guide" coords="0,0,70,120">Access Guide</a>] [<a href="shortcut.html" shape="rect" alt="Go" coords="70,0,180,120">Go</a>] [<a href="search.html" shape="rect" alt="Search" coords="0,120, 180,180">Search</a>] [<a href="top10.html" shape="rect" alt="Top Ten" coords="0, 180, 180, 380"> Top Ten</a>]</p> </map> </object> </div> <div class="footer"> <form action="./TxtCode/Tmpl8a.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Collegamenti ipertestuali alternativi all'immagine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title> Esempio requisito 8 (utilizzo dell' attributo "alt" con immagine) </title> </head> <body> <div class="corpo"> <p> <a href="http://www.w3.org/TR/WAI-WEBCONTENT/"> <img src="immagini/w3c_home.png" alt="WCAG 1.0 (Segue link testuale)"> </img> </a> </p> <p>[ <a href="http://www.w3.org/TR/WAI-WEBCONTENT/"> Link alle linee guida per l'accessibilità consorzio W3C </a>] </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl8b.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Requisito 9

Nelle tabelle dati identificare le righe e le colonne utilizzando gli appositi marcatori.


� Utilizzare l’attributo “headers” per associare a ogni cella dati la corrispondente

descrizione.

� Ogni descrittore (“th”) deve avere l’attributo “id” valorizzato per permettere

l’associazione.

� Fornire l’attributo “summary” per riassumere il contenuto della tabella.

� Utilizzare l’attributo “abbr” per fornire descrizioni corte delle celle.

[Esempio (Dati identificativi tabella)]

Cibo consumato da ogni gatto

Nome Grammi Marca del cibo Tipo

Liu 250 Cat Delice Bocconcini

Tigre 500 Cat super Bocconcini

Gio' 200 Cat crock Croccantini


Codice esempi

Dati identificativi tabella



<html lang="it">

<head>





<title>Requisitio 9: Utilizzo di tabelle dati</title>

</head>

<body>

<div class="corpo">

<table border="1" summary="Questa tabella mostra il tipo e la quantita'

media di cibo ingerita dai gatti giornalmente nella pensione 'il paradiso

del gatto' durante il soggiorno estivo">

<caption>Cibo consumato da ogni gatto</caption>

<tr>

<th id="header1">Nome</th>

<th id="header2">Grammi</th>

<th id="header3" abbr="marca">Marca del cibo</th>

<th id="header4">Tipo</th>

</tr>

<tr>

<td headers="header1">Liu</td>

<td headers="header2">250</td>

<td headers="header3">Cat Delice</td>

<td headers="header4">Bocconcini</td>

</tr>

<tr>

<td headers="header1">Tigre</td>


<td headers="header3">Cat super</td>

<td headers="header4">Bocconcini</td>

</tr>

<tr>

<td headers="header1">Gio'</td>


<td headers="header3">Cat crock</td>

<td headers="header4">Croccantini</td>

</tr>

</table>

</div>




</form>

</div>

</body>

</html>


Requisito 10

Usare elementi (marcatori) per associare le celle di dati e le celle di intestazione nelle tabelle di dati che hanno due o più livelli logici di intestazione di righe o colonne.


� Per le tabelle di dati con struttura complessa (2 o più livelli logici) usare marcatori appropriati per associare celle di intestazione alle celle dati:

� usare “thead”, “tfoot” a “tbody” per raggruppare righe, “col” e “colgroup” per raggruppare colonne;

� usare gli attributi “axis”, “scope” e “headers” per descrivere relazioni più complesse tra i dati;

� non usare <pre> per creare rappresentazioni tabellari di testo, utilizzare <table>.

[Esempio (Dati identificativi per tabelle complesse)]

Spese viaggio

Cibo Albergo Trasporti totali parziali

Firenze

25-Agosto-04 37.74 112.00 45.00

26-Agosto-04 27.28 112.00 45.00

totali parziali 65.02 224.00 90.00 379.02

Siracusa

27-Agosto-04 96.25 109.00 36.00

28-Agosto-04v 35.00 109.00 36.00

totali parziali 131.25 218.00 72.00 421.25

Totale 196.27 442.00 162.00 800.27


Codice esempi

Dati identificativi per tabelle complesse


<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN"

"http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">

<html lang="it">

<head>





<title>Requisito 10: Esempio di tabella dati con struttura complessa</title>

</head>

<body>

<div class="corpo">

<table border="1" summary="Tabella rapporto spese">

<caption>Spese viaggio</caption>

<tr> <th></th><th id="header2" axis="spese">Cibo</th>

<th id="header3" axis="spese">Albergo</th>

<th id="header4" axis="spese">Trasporti</th>

<td>totali parziali</td>

</tr><tr>

<th id="header6" axis="Localita'">Firenze</th>

<th></th> <th></th> <th></th><td></td>

</tr><tr>

<td id="header7" axis="data">25-Agosto-04</td>

<td headers="header6 header7 header2">37.74</td>


<td headers="header6 header7 header4">45.00</td><td></td>

</tr><tr>

<td id="header8" axis="date">26-Agosto-04</td>



<td headers="header6 header8 header4">45.00 </td><td></td>

</tr><tr>

<td>totali parziali </td>

<td>65.02</td> <td>224.00</td> <td>90.00</td> <td>379.02</td>

</tr><tr>

<th id="header10" axis="location">Siracusa</th>

<th></th> <th></th> <th></th> <td></td>

</tr><tr>

<td id="header11" axis="date">27-Agosto-04</td>



<td headers="header10 header11 header4">36.00</td> <td></td>

</tr><tr>

<td id="header12" axis="date">28-Agosto-04v</td>



<td headers="header10 header12 header4">36.00</td> <td></td>

</tr><tr>

<td>totali parziali</td>

<td>131.25</td> <td>218.00</td> <td>72.00</td> <td>421.25</td>

</tr><tr>

<th>Totale</th> <td>196.27</td> <td>442.00</td> <td>162.00</td>

<td>800.27</td>

</tr>

</table>

</div>




</form>

</div>

</body>

</html>


Requisito 11

Usare fogli di stile per controllare la presentazione. Organizzare le pagine in modo che possano

essere lette anche quando i fogli di stile sono disabilitati o non supportati.


� Usare fogli di stile per controllare la presentazione:

� usare gli elementi "em" e "strong" per enfatizzare l'informazione. Tali elementi possono essere risolti in molte maniere e interpretati opportunamente da diversi dispositivi (es.: variazione dell'inflessione nel parlato di un sintetizzatore vocale).

[Esempio (Enfatizzare il testo)]

� Utilizzare fogli di stile per aggiungere stile al testo piuttosto di rappresentare il testo con immagini. Se è necessario usare immagini per creare effetti particolari occorre aggiungere l'equivalente testuale o fornire una pagina alternativa.

[ Vedi codice esempio: "Stile di testo"]

Testo normale

Testo enfatizzato con em

Testo enfatizzato con strong


� Usare i fogli di stile per controllare la formattazione e la posizione del testo:

� rientro: usare 'text-indent'. Non usare "blockquote" o altri elementi strutturali per rientrare il testo;

� spaziatura tra lettere e/o parole: utilizzare 'letter-spacing' e/o 'word-spacing', non aggiungere caratteri di spazio per spaziare le lettere;

� spazi bianchi: utilizzare 'white-space';

� direzione del testo: utilizzare 'direction' e 'unicode-bidi';

� paragrafi: utilizzare i pseudo elementi ':first-letter' e ':first-line' per riferirsi alla prima lettera o alla prima riga di un paragrafo.


[Esempio (Utilizzo di fogli di stile per la formattazione del testo)]

Paragrafo con rientro. Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.

P a r a g r a f o c o n r i e n t r o e s p a z i a t u r a t r a c a r a t t e r i . Q u e s t o p a r a g r a f o è f o r m a t t a t o t r a m i t e f o g l i o d i s t i l e ( v e d i c o d i c e s o r g e n t e d i q u e s t a p a g i n a ) . L a p a g i n a d i m o s t r a l ' u t i l i z z o d e i f o g l i d i s t i l e p e r f o r m a t t a r e i l t e s t o .

Paragrafo con rientro e spaziatura tra parole. Questo paragrafo e' formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.

Questo paragrafo dimostra la diversa gestione della spaziatura in base allo stile definito. Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.

Questo paragrafo dimostra la diversa gestione della spaziatura in base allo stile definito. Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.

Questo paragrafo dimostra la diversa gestione della spaziatura in base allo stile definito.

Utilizzo dell'attributo direction nel paragrafo (si noti che il rientro parte da destra o da sinistra a seconda della direzione definita)

Utilizzo dell'attributo direction nel paragrafo (si noti che il rientro parte da destra o da sinistra a seconda della direzione definita (

PARAGRAFO CHE MOSTRA L'UTILIZZO DEI PSEUDO-ELEMENTI first-line (in maiuscolo) e first-letter (carattere molto grande). E' il browser che risolve il test per decidere quale sia la prima linea (in base al dimensionamento della finestra) a meno di utilizzo di tag appositi.


� Formattazione, posizione, allineamento e strutturazione devono essere realizzati tramite fogli di stile:

� per controllare la spaziatura utilizzare text-indent', 'text-align', 'word-spacing', 'font-stretch' al posto di spazi addizionali. Usare 'text-align: center' al posto dell'elemento disapprovato 'center'.

[Esempio (Utilizzo di fogli di stile per la spaziatura)]

Paragrafo con attributi per controllare la spaziatura. Questo paragrafo è formattato

tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra

l'utilizzo dei fogli di stile per formattare il testo.

Paragrafo con attributi per controllare la spaziatura.

Questo paragrafo è formattato tramite foglio di stile

(vedi codice sorgente di questa pagina). La pagina

dimostra l'utilizzo dei fogli di stile per formattare il

testo.

Paragrafo con attributi per controllare la spaziatura.


(vedi codice sorgente di questa pagina. La pagina

dimostra l'utilizzo dei fogli di stile per formattare il

testo.


� Per creare spazi sui quattro lati del contenuto di un elemento utilizzare le proprietà 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', invece che aggiungere spazi ( ).

[Esempio (Utilizzo dei fogli di stile per margini)]

Paragrafo con attributi per controllare i margini. Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.



� Per controllare la posizione dei vari elementi, in maniera indipendente da dove gli elementi appaiono nel documento, utilizzare le proprietà 'float', 'position', 'top', 'right', 'bottom', 'left'. L'autore dovrebbe disegnare i documenti in modo da ottenere una struttura sensata anche senza l'utilizzo di fogli di stile (rispettare un ordine logico). Le proprietà per il posizionamento possono essere usate per creare note a margine, barre laterali, effetti uguali ai frame, semplici testate, piedi e altro.


[Esempio (Utilizzo fogli di stile per il posizionamento)]

Questa è la testata della pagina


Paragrafo con attributi per controllare la posizione. Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.

Pie' di pagina


� Per poter lasciare celle vuote e ottenere i bordi appropriati utilizzare la proprietà 'empty-cell'. Le celle vuote non devono essere riempite con spazi solo allo scopo di ottenere effetti visuali.

[Vedi codice esempio: "Riempimento celle vuote"]

Attenzione la proprietà "empty-cell" non è risolta da tutti i browser, per cui la possibilità di visualizzare correttamente l'esempio dipende dal browser utilizzato.

� Organizzare i documenti in modo che possano essere letti senza l'utilizzo di fogli di stile:

� fornire un equivalente testuale per ogni immagine o testo generato dal foglio di stile (es.: proprietà 'background-image', 'list-style' o 'content');

� assicurarsi che tutti i contenuti importanti appaiano negli oggetti del documento. Il testo generato dai fogli di stile può non essere processato dalle tecnologie assistive che accedono ai contenuti.

[Vedi Esempio: "Fogli di stile disabilitati"]

Per verificare la leggibilità e la persistenza dell'informazione, si leggano i documenti disabilitando i fogli di stile.


Codice esempi

Enfatizzare il testo



<html lang="it">

<head>





<title>Esempio requisito 11 (enfatizzazione testo con appositi marcatori)

</title>

</head>

<body>

<div class="corpo">

<p>Testo normale</p>

<p><em>Testo enfatizzato con em </em></p>

<p><strong>Testo enfatizzato con strong </strong></p>

</div>




</form>

</div>

</body>

</html>


Stile di testo



<html lang="it">

<head>





<title>Esempio requisito 11 (Testo in immagine con testo alternativo)</title>

</head>

<body>

<div class="corpo">

<p><img src="Immagini/EffettoTesto.gif" alt="Esempio di effetto"></img></p>

</div>


<form action="./TxtCode/Tmpl11b.html">


</form>

</div>

</body>

</html>


Utilizzo di fogli di stile per la formattazione del testo



<html lang="it">

<head>




<title>Esempio requisito 11 (fogli di stile per controllare la formattazione

del testo)

</title>

<style type="text/css">

body { font-family: "Gill Sans", sans-serif }

p { font-family: Verdana; text-indent: 3em }

p.spaziato {letter-spacing: 0.5em}

p.parole-spaziate {word-spacing: 2em}

p.pre { white-space: pre}

p.normal { white-space: normal}

p.nowrap { white-space: nowrap}

p.DaSinistraADestra {direction:ltr}

p.DaDestraASinistra {direction:rtl}

p.prima:first-letter { font-size: x-large}

p.prima:first-line { text-transform: uppercase}

</style>


</head>

<body>

<div class="corpo">

<p>Paragrafo con rientro. Questo paragrafo è formattato tramite

foglio di stile (vedi codice sorgente di questa pagina).

La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo. </p>

<p class="spaziato">Paragrafo con rientro e spaziatura tra caratteri.

Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.</p>

<p class="parole-spaziate">Paragrafo con rientro e spaziatura tra

parole. Questo paragrafo e' formattato tramite foglio di stile (vedi codice sorgente di questa pagina). La pagina dimostra l'utilizzo dei fogli di stile per

formattare il testo. </p>

<p class="pre">Questo paragrafo dimostra la diversa gestione della

spaziatura in base allo stile definito.


(vedi codice sorgente di questa pagina).


<p class="normal">Questo paragrafo dimostra la diversa gestione della

spaziatura in base allo stile definito.




<p class="nowrap">Questo paragrafo dimostra la diversa gestione

della spaziatura in base allo stile definito.




<p class="DaSinistraADestra">Utilizzo dell'attributo direction

nel paragrafo (si noti che il rientro parte da destra o da sinistra

a seconda della direzione definita)</p>

<p class="DaDestraASinistra">Utilizzo dell'attributo direction nel

paragrafo (si noti che il rientro parte da destra o da sinistra

a seconda della direzione definita) </p>

<p class="prima">Paragrafo che mostra l'utilizzo dei pseudo-elementi

first-line (in maiuscolo) e first-letter (carattere molto grande).

E' il browser che risolve il test per decidere quale sia la prima linea

(in base al dimensionamento della finestra) a meno di utilizzo di tag appositi.

</p>

</div>


Utilizzo di fogli di stile per la spaziatura

<?xml version="1.0"?>

<?xml-stylesheet type="text/xsl" href="pmathml.xsl"?>



<html lang="it">

<head>


<title>Esempio requisito 11 (controllo spaziatura tramite fogli di stile)

</title>


p.def { text-indent: 3em; text-align: center; word-spacing: 2em ; }

p.condensed {font-family: courier; font-stretch: ultra-condensed}

p.expanded {font-family: courier; font-stretch: ultra-expanded}

</style>


</head>

<body>

<div class="corpo">

<p class="def">Paragrafo con attributi per controllare la spaziatura.

Questo paragrafo è formattato tramite foglio di stile (vedi codice sorgente di questa pagina).

La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.

</p>

<p class="condensed">Paragrafo con attributi per controllare la spaziatura. Questo paragrafo



</p>

<p class="expanded">Paragrafo con attributi per controllare la spaziatura.


(vedi codice sorgente di questa pagina.


</p>

</div>


<form action="./TxtCode/Tmpl11d.html">


</form>

</div>

</body>

</html>


Utilizzo dei fogli di stile per margini



<html lang="it">

<head>




<title>Esempio requisito 11 (spaziatura elementi)</title>


p { margin: 1em }

p.Margini { margin: 6em }

</style>


</head>

<body>

<div class="corpo">

<p>Paragrafo con attributi per controllare i margini.




</p>

<p class="Margini">Paragrafo con attributi per controllare i margini.



La pagina dimostra l'utilizzo dei fogli di stile per formattare il testo.</p>

</div>


<form action="./TxtCode/Tmpl11e.html">


</form>

</div>

</body>

</html>


Utilizzo fogli di stile per il posizionamento



<html lang="it">

<head>




<title>Esempio requisito 11 (posizionamento elementi)</title>


p { margin: 2em }

p.Margini { float: right; width: 30% }

p.testata {position: fixed;width: 100%; height: 5%;

top: 0; right: 0; bottom: 95%; left: 0}

div.corpo {position: fixed; width: 100%; height: 80%;

top: 10%; right: 0; bottom: auto; left: 0}

p.piede{ position: fixed; width: 100%; height: 100px;

top: 90%; right: 0; bottom: 0; left: 0; }

.footer{ position: fixed; width: 100%; height: 100px;

top: auto; right: auto; bottom: 0; left: 0; }

</style>


</head>

<body>

<p class="testata">Questa è la testata della pagina</p>

<div class="corpo">

<p>Paragrafo con attributi per controllare i margini.




</p>

<p class="Margini">Paragrafo con attributi per controllare la posizione.




</p>

</div>

<p class="piede">Pie' di pagina</p>


<form action="./TxtCode/Tmpl11f.html">


</form>

</div>

</body>

</html>


Riempimento celle vuote



<html lang="it">

<head>




<title>Esempio requisito 11 (Utilizzo proprietà empty-cell)</title>


table {border: 2px solid}

table.mostra {empty-cells: show}

td{border: 1px solid}

</style>


</head>

<body>

<div class="corpo">

<table summary="Tabella generica">

<tr>

<th id="h1">Col 1</th>

<th id="h2">Col 2</th>

</tr>

<tr>

<td headers="h1">1</td><td headers="h2">2</td>

</tr>

<tr>

<td headers="h1">3</td><td headers="h2"></td>

</tr>

<tr>

<td headers="h1"></td><td headers="h2"></td>

</tr>

</table>

<table class="mostra" summary="Tabella classe mostra">

<tr>

<th id="h1m">Col 1</th>

<th id="h2m">Col 2</th>

</tr>

<tr>

<td headers="h1m">1</td><td headers="h2m">2</td>

</tr>

<tr>

<td headers="h1m">3</td><td headers="h2m"></td>

</tr>

<tr>

<td headers="h1m"></td><td headers="h2m"></td>

</tr>

</table>

</div>


<form action="./TxtCode/Tmpl11g.html">


</form>

</div>

</body>

</html>


Fogli di stile disabilitati



<html lang="it">

<head>




<title>Esempio requisito 11 (leggibilità documenti anche senza fogli di stile) </title>


.menu1 { position: absolute; top: 3em; left: 0em;

margin: 0px; font-family: sans-serif;

font-size: 120%; color: red; background-color: white }

.menu2 { position: absolute; top: 3em; left: 10em;

margin: 0px; font-family: sans-serif;

font-size: 120%; color: red; background-color: white }

.item1 { position: absolute; top: 7em; left: 0em; margin: 0px }





#box { position: absolute; top: 5em; left: 5em }

</style>



</head>

<body>

<div class="box">

<dl>

<dt class="menu1">Products</dt>

<dd class="item1">Telephones</dd>

<dd class="item2">Computers</dd>

<dd class="item3">Portable MP3 Players</dd>

<dt class="menu2">Locations</dt>

<dd class="item4"><span>Idaho</span></dd>

<dd class="item5"><span>Wisconsin</span></dd>

</dl>

</div>


<form action="./TxtCode/Tmpl11h.html">


</form>

</div>

</body>

</html>


Requisito 12

La presentazione e i contenuti testuali di una pagina devono potersi adattare all'interfaccia

utilizzata dall'utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali

da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o

riduzione dell'area di visualizzazione e/o dei caratteri rispetto ai valori di default di tali

parametri.


� Utilizzare unità relative piuttosto che assolute negli attributi dei marcatori e nei valori delle proprietà dei fogli di stile. Ad esempio utilizzare in CSS 'em' o lunghezze espresse in percentuale piuttosto che 'pt' o 'cm'. Se vengono utilizzate unità di misura assolute, verificare che il documento ottenuto risponda a requisiti di usabilità. Utilizzare unità di misura assolute solo quando le caratteristiche fisiche del media sono note come, ad esempio, un'immagine bitmap.

[ Vedi codice esempio: "Utilizzo unità di misura relative per layout a tre colonne"]

[ Vedi codice esempio: "Utilizzo unità di misura relative per layout a due colonne"]

� L'unità di misura relativa em, se utilizzata per indicare le dimensioni dei font, indica le dimensioni del font relativamente alle dimensioni del font dell'elemento padre. Per cui 2em indica un font le cui dimensioni sono il doppio di quelle del font dell' elemento padre 0.5em la metà e così via. In mancanza di esplicite indicazione le dimensioni del font di base dipendono dalle impostazioni del browser e dipendono dalla preferenze dell'utente.

[ Vedi codice esempio: "Esempio per mostrare l'utilizzo dell'unità di misura em"]


Codice esempi

Utilizzo unità di misura relative: layout a tre colonne



<html lang="it">

<head>




<title>Requisito 12 (layout a tre colonne impaginato tramite div con dimensioni relative )

</title>


.right {

text-align : justify;

margin : 0; padding-left : 1%; padding-right : 1%;

width : 30%; float : right; min-height:100%;

height:auto!important;

height:100%

}

.middle { position:relative;



width : 43%; float : left; min-height:100%;


height:100%

}

.left { position:relative;





height:100%

}

.footer{ clear: both;

text-align: center;

padding: 0;

margin: 0;

}

</style>


</head>

<body>

<div class="corpo">

<div class="left">

<p>Scelta 1</p>

<p> Scelta 2</p>

</div>

<div class="middle">Prova a ridimensionare questa finestra ,

l' impaginazione e la presentazione si adatteranno all' interfacia

utilizzata, senza sovrapposizioni o perdita di informazioni

</div>

<div class="right">Le tre colonne sono realizzate utilizzando il tag "DIV"

</div>

</div>




</form>

</div>

</body>

</html>


Utilizzo unità di misura relative: layout a due colonne



<html lang="it">

<head>




<title>Requisito 12 (Layout a due clonne impaginato tramite div con dimensioni relative)

</title>


.middle {



width : 70%; float : right; min-height:100%;


height:100%

}

.left {





height:100%

}

.footer{ clear: both;

text-align: center;

padding: 0;

margin: 0;

}

</style>


</head>

<body>

<div class="corpo">

<div class="left">

<p>Scelta 1</p>

<p> Scelta 2</p>

</div>

<div class="middle">Prova a ridimensionare questa finestra ,

l' impaginazione e la presentazione si adatteranno all' interfacia

utilizzata, senza sovrapposizioni o perdita di informazioni

</div>

</div>




</form>

</div>

</body>

</html>


Utilizzo unità di misura relative: utilizzo unità di misura em



<html lang="it">

<head>




<title>Requisito 12 (Esempio per mostrare l'utilizzo dell'unità di misura em)

</title>


div{border-style: solid; margin: 0.5em; padding : 0.5em;}

.em1{font-size: 1em;}

.em2{font-size: 2em;}

div.footer{border-style: none;}

</style>


</head>

<body>

<div class="em1">Testo 1 em

<div class="em2">Testo 2 em

<div class="em1">Testo 1 em </div>

<div class="em2">Testo 2 em </div>

</div>

</div>


<form action="./TxtCode/Tmpl12c.html">


</form>

</div>

</body>

</html>


Requisito 13

Qualora si utilizzino le tabelle a scopo di impaginazione:

� assicurarsi che il loro contenuto sia comprensibile anche quando sono lette in modo linearizzato;

� utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato.


� Non utilizzare tabelle per strutturare le pagine, a meno che le tabelle non abbiano senso se linearizzate. Altrimenti, se le tabelle non hanno un senso, fornire un equivalente alternativo (che può essere una versione linearizzata):

� le celle della tabella diventano una serie di paragrafi. Tali paragrafi hanno lo stesso ordine delle celle. Le celle devono avere senso se lette di seguito e devono includere elementi strutturali (che creino paragrafi, testate, liste, ecc.) in modo che la pagina conservi la struttura dell'informazione anche dopo la linearizzazione.

[Esempio (Linearizzazione tabelle)]

Il paradiso dei cuccioli.

Via Pioppi 23, Milano.

Tutti i cuccioli da appartamento, vaccinazioni e pulitura.

Cani & gatti. Via Platani 23, Roma.

Amici a quattro zampe di tutte le razze, consegne a domicilio. Vendita cibo per cani e gatti.


In questo esempio la tabella è stata linearizzata eliminando l'elemento <table>. Come si può vedere il senso dell'informazione è rimasto inalterato.

� Se una tabella è usata per l'impaginazione non utilizzare marcatori per la formattazione (es .: "th"), ma utilizzare i fogli di stile per formattare gli elementi.

Il paradiso dei cuccioli.

Via Pioppi 23, Milano.

Tutti i cuccioli da appartamento, vaccinazioni e pulitura.

Cani & gatti.

Via Platani 23, Roma.

Amici a quattro zampe di tutte le razze, consegne a domicilio. Vendita cibo per cani e gatti.


Codice esempi

Linearizzazione tabelle



<html lang="it">

<head>





<title>Requisito 13 (Esempio di tabella linearizzata)</title>


table{ border-style: solid ; border-color: #000000; border-width: 1px;}

td{ border-style: solid ; border-color: #000000; border-width: 1px;}

</style>

</head>

<body>

<div class="corpo">

<table summary="Indirizzi negozi di animali">

<tr>

<td axis="nome"><h1>Il paradiso dei cuccioli.</h1></td>

<td axis="Indirizzo"><p>Via Pioppi 23, Milano.</p></td>

<td axis="Note"><p>Tutti i cuccioli da appartamento, vaccinazioni e pulitura.</p>

</td>

</tr>

<tr><td><p></p></td></tr>

<tr>

<td axis="nome"><h1>Cani & gatti.</h1></td>

<td axis="Indirizzo"><p>Via Platani 23, Roma.</p></td>

<td axis="Note"><p>

Amici a quattro zampe di tutte le razze, consegne a domicilio.

Vendita cibo per cani e gatti.</p>

</td>

</tr>

</table>

</div>


<noscript>



</form>

</div>

</body>

</html>


Requisito 14

Nei moduli (form), associare in maniera esplicita le etichette ai loro controlli, posizionandole in

modo da agevolare la compilazione dei campi a chi utilizza le tecnologie assistive


� A meno che le interfacce utente di navigazione non supportino l'esplicita associazione di etichette ai controlli (elemento <label> con attributo "for") dei moduli (form), per tutti i controlli dei moduli con etichette associate implicitamente, occorre assicurarsi che l'etichetta sia posizionata adeguatamente:

� nel caso vi siano più controlli per riga, l'etichetta è posizionata sulla riga stessa e precede immediatamente il controllo. Nel caso vi sia un solo controllo per riga è possibile posizionare l'etichetta nella riga immediatamente precedente.

� [Esempio (Utilizzo etichette)]

Nell'esempio precedente, oltre a posizionare opportunamente le etichette, si è utilizzato l'elemento <label> con l'attributo "for" per associare esplicitamente l'etichetta al controllo del modulo (vedi codice).

Nome : Cognome :

Indirizzo:


Codice esempi

Utilizzo etichette



<html lang="it">

<head>





<title>Requisito 14: Esempio di utilizzo controlli</title>

<style>

p {width: 100%;}

label {width: 25%;}

input {width: 25%;}

</style>

</head>

<body>

<div class="coprpo">

<p>

<label for="Nome">Nome :

<input type="text" id="Nome" tabindex="1" value="Inserire il nome">

</input>

</label>

<label for="Cognome">Cognome :

<input type="text" id="Cognome" tabindex="2" value="Inserire il cognome">

</input>

</label>

</p>

<p><label for="Indirizzo">Indirizzo:</label></p>

<p>

<input type="text" id="Indirizzo" tabindex="3" value="Inserire l'indirizzo">

</input>

</p>

</div>




</form>

</div>

</body>

</html>


Requisito 15

Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile:

� fornire una spiegazione della funzionalità fornita;

� garantire l'alternativa testuale equivalente in modo analogo a quanto indicato nel requisito n. 3.


� Se si utilizza <object> occorre fornire un equivalente testuale nel contenuto

dell'elemento.

[Vedi codice esempio: Alternativa testuale a oggetti di programmazione]

� Se si utilizza <applet> occorre fornire un equivalente testuale con l'attributo "alt" e nel

contenuto dell'elemento in modo di ottenere l'adeguata informazione anche nel caso uno

dei due meccanismi non sia supportato.

[Vedi codice esempio: Alternativa testuale ad applet]


Codice esempi

Alternativa testuale a oggetti di programmazione



<html lang="it">

<head>





<title>Requisito 15 (testo nel corpo dell' elemento object</title>

</head>

<body>

<div class="corpo">

<p>

<object classid="Java:press.class">

Testo che descrive la funzionalità dell' oggetto i questione

(in questo caso un' applet che non fà nulla) .....

</object>

</p>

</div>




</form>

</div>

</body>

</html>


Alternativa testuale ad applet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="it">

<head>





<title>Esempio per requisito 3 (Utilizzo di applet)</title>

</head>

<body>

<div class="corpo">

<applet code="yavs.class" width="50%" height="50%"

alt="Applet java : News del giorno: è attivo un link alle informazioni accluse" >

<param name="MSGTEXT" value="news.html"></param>

<param name="BGCOLOR" value="#FFFFFF"></param>

<param name="FGCOLOR" value="#000099"></param>

<param name="HREFCOLOR" value="#0000FF"></param>

<param name="LINKCOLOR" value="#CC0000"></param>

<param name="FONTNAME" value="Verdana"></param>

<param name="FONTSIZE" value="15"></param>

<param name="SPEED" value="30"></param>

<a href="News.html">[News del giorno]<a>

</applet>

</div>


<form action="./TxtCode/Tmpl3m.html">


</form>

</div>

</body>

</html>


Requisito 16

Assicurarsi che i gestori di eventi che attivano script, applet oppure altri oggetti di

programmazione o che possiedono comunque una loro specifica interfaccia, siano indipendenti

da uno specifico dispositivo di input.


� Utilizzare gestori di eventi a livello applicativo. Gli attributi per gestire eventi a livello

applicativo sono "onfocus", "onblur", "onselect". Questi attributi sono disegnati per essere

indipendenti dal dispositivo di input, anche se, attualmente, sono implementati per

rispondere ad eventi specifici generati dalla tastiera nella maggior parte dei browser

correnti. Altrimenti, nel caso si debba utilizzare eventi che dipendono dal dispositivo di

input si forniscano meccanismi di input ridondanti

Ad esempio specificare due gestori per lo stesso elemento:

� usare "onmousedown" con "onkeydown";

� usare "onmouseup" con "onkeyup";

� usare "onclick" con "onkeypress".

� Non scrivere gestori di eventi che utilizzino le coordinate del mouse

[Esempio (Gestione eventi)]

Utilizzo di eventi applicativi (onblur):

Utilizzo di eventi applicativi (on select) :

Utilizzo di eventi applicativi (onfocus) :

Eventi ridondanti (on mouse down; on key down) :

Eventi ridondanti (on click, on key press) :


Codice esempi

Gestione eventi



<html lang="it">

<head>





<title>Requisito 16. Utilizzo gestori di eventi</title>

<script type="text/javascript">

function onf(){alert("on focus");}

function onb(){alert("on blur");}

function ons(){alert("on select");}

function onup(){alert("on mouse up");}

function ondo(){alert("on mouse down");}

function oncl(){alert("on click");}

</script>

</head>

<body>

<div class="corpo">

<p><label for="inp1">Utilizzo di eventi applicativi (onblur):

<input id="inp1" type="text" onblur="onb()" value="immettere valore">

</input></label>

</p>

<p><label for="inp3"> Utilizzo di eventi applicativi (on select) :

<input id="inp3" type="text" onselect="ons()" value="immettere valore">

</input></label>

</p>

<p> <label for="inp2"> Utilizzo di eventi applicativi (onfocus) :

<input id="inp2" type="text" onfocus="onf()" value="immettere valore">

</input></label>

</p>

<p><label for="inp5"> Eventi ridondanti (on mouse down; on key down) :

<input id="inp5" type="text" onmousedown="ondo()" onkeydown="ondo()"

value="immettere valore"></input></label>

</p>

<p><label for="inp6"> Eventi ridondanti (on click, on key press) :

<input id="inp6" type="text" onclick="oncl()" onkeypress="oncl()"

value="immettere valore"></input></label>

</p>

</div>




</form>

</div>

</body>

</html>


Requisito 17

Fare in modo che le funzionalità e le informazioni veicolate per mezzo di oggetti di programmazione, oggetti che utilizzino tecnologie non definite da grammatiche formali pubblicate, script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.


� Fare in modo che le informazioni generate da elementi di programmazione quali script ed applet siano accessibili direttamente o compatibili con le tecnologie assistive.

� Quando una pagina richiede che un'applet, un plug-in od un'altra applicazione sia presente sul client per interpretare il contenuto della pagina, la pagina stessa deve fornire un collegamento all'applet o plug-in richiesto. Tali oggetti devono soddisfare requisiti di accessibilità.


Requisito 18

Qualora un filmato o una presentazione multimediale temporizzata siano indispensabili alla informazione fornita o al servizio erogato, sincronizzare con essi l'alternativa testuale equivalente, in forma di sotto-titolazione o descrizione vocale, oppure associarvi un riassunto o una semplice etichetta, secondo il livello di importanza e delle difficoltà di realizzazione nel caso di presentazioni in tempo reale.


Requisito 19

Rendere chiara la destinazione di ogni collegamento ipertestuale (link) con testi significativi anche se letti fuori dal loro contesto oppure associare ai collegamenti testi alternativi che siano a loro volta esplicativi della destinazione del collegamento. Prevedere meccanismi che consentano di evitare letture ripetitive di sequenze di collegamenti comuni a più pagine


� Identificare chiaramente la destinazione di ogni collegamento ipertestuale:

� il testo del collegamento ipertestuale non dovrebbe essere generico, ma indicare chiaramente la natura della destinazione. Per collegamenti a documenti di un determinato formato o lingua gli sviluppatori dovrebbero utilizzare la negoziazione dei contenuti come di seguito indicato:

� includere collegamenti ad altre versioni di contenuto, come traduzioni;

� indicare il tipo di contenuto o lingua attraverso l'utilizzo dei marcatori appropriati (es.: "type", "hreflang");

� collegare documenti il cui contenuto sia servito in base alla richiesta del client. Ad esempio fornire la versione francese di un documento se la lingua preferita, impostata nelle configurazioni dell'interprete (browser), è la lingua francese.

� Oltre a un chiaro testo per il collegamento ipertestuale, va specificato un valore per l'attributo "title" che descriva chiaramente e accuratamente la destinazione del collegamento;

� se più collegamenti ipertestuali condividono lo stesso testo, devono puntare alla stessa risorsa;

� se più collegamenti puntano a diverse destinazioni, ma condividono lo stesso testo, distinguere i collegamenti con diversi valori dell'attributo "title" per ogni elemento "a".


[Esempio (Collegamenti ipertestuali)]

� Se c'è una serie di collegamenti ipertestuali correlati tra loro, occorre includere informazioni introduttive nel primo, quindi informazioni specifiche nei collegamenti che seguono in modo da fornire informazioni sul contesto per gli utenti che leggono in sequenza.

[Link all'esempio per Requisito 1]

[Link all'esempio per Requisito 1]

[Organigramma ministro per l'innovazione tecnologica]

[ Organigramma ministro per l'innovazione tecnologica (versione testo)]


� Raggruppare collegamenti ipertestuali correlati, identificare il gruppo e fornire il modo per escludere il gruppo:

� includere un collegamento ipertestuale che permetta all'utente di saltare oltre l'insieme di collegamenti;

� fornire un foglio di stile che permetta all'utente di nascondere l'insieme di collegamenti ipertestuali;

� usare l'elemento "map" per raggruppare l'insieme di collegamenti ipertestuali e identificare il gruppo con l'attributo "title".

[Esempio (Raggruppamento collegamenti ipertestuali)]

[Escludi la barra di navigazione] [Home] [Ricerca] [News] [Mappa del sito]

Esempio per il requisito 19


Codice esempi

Collegamenti ipertestuali

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Requisito 19 (testo per collegamenti ipertestuali)</title> <style type="text/css"> A:link { color: #A00000 } /* unvisited links */ A:visited { color: #FF1493 } /* visited links */ A:hover { color: #FF8C00 } /* user hovers */ A:active { color: #228B22 } /* active links */ </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div class="corpo"> <p>[<a href="Tmpl1a.html" title="Collegamento alla pagina Tmpl1a.html (esempio per Requisito 1)" type="text" hreflang="it">Link all'esempio per Requisito 1</a>] </p> <p>[<a href="Tmpl1a.html" title="Collegamento alla pagina Tmpl1a.html (esempio per Requisito 1)" type="text" hreflang="it">Link all'esempio per Requisito 1</a>] </p> <p>[<a href="Tmpl19a_1.html" title="Collegamento all'organigramma del ministro per l'innovazione tecnologica (versione con immagine bitmap)" hreflang="it">Organigramma ministro per l'innovazione tecnologica</a>] </p> <p>[<a href="longdesc/organigramma_090304txt.html" title="Collegamento all'organigramma del ministro per l'innovazione tecnologica (versione testo)" type="text" hreflang="it"> Organigramma ministro per l'innovazione tecnologica (versione testo)</a>] </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl19a.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Raggruppamento collegamenti ipertestuali

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Requisito 19 (Raggruppamento collegamenti ipertestuali)</title> <style type="text/css"> A:link { color: #A00000 } /* unvisited links */ A:visited { color: #FF1493 } /* visited links */ A:hover { color: #FF8C00 } /* user hovers */ A:active { color: #228B22 } /* active links */ </style> </head> <body> <div class="corpo"> <div id="Barra"> <map title="Barra di navigazione" id="NavBar"> <p> [<a href="#how">Escludi la barra di navigazione</a>] [<a href="home.html">Home</a>] [<a href="search.html">Ricerca</a>] [<a href="new.html">News</a>] [<a href="sitemap.html">Mappa del sito</a>] </p> </map> </div> <h1> <a name="how">Esempio per il requisito 19</a> </h1> </div> <div class="footer"> <form action="./TxtCode/Tmpl19b.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Requisito 20

Qualora per la fruizione di un servizio erogato in una pagina sia previsto un determinato intervallo di tempo per il compimento di determinate azioni, è necessario avvertire di ciò l'utente, indicando anche il tempo massimo utile e fornendo eventuali alternative per fruire del servizio stesso.


Requisito 21

Fare in modo che i collegamenti presenti in una pagina siano selezionabili e attivabili tramite

comandi da tastiera o tecnologia in emulazione di tastiera o tramite sistemi di puntamento

diversi dal mouse.


� La distanza verticale (interlinea) di liste di link deve essere di almeno 1 em

[Esempio (Interlinee tra collegamenti ipertestuali)]

[Link all'esempio 2 a ]

[Link all'esempio 2 a ]

[Organigramma ministro per l'innovazione tecnologica ]

[ Organigramma ministro per l'innovazione tecnologica (versione testo) ]


� La distanza orizzontale e quella verticale, tra i bottoni di un modulo (form), deve essere di

almeno 1 em

[Esempio (Distanza tra bottoni)]

Bottone A Bottone B

Bottone D

Bottone E

Bottone F


� Le dimensioni dei bottoni in un form devono essere tali da rendere chiaramente leggibile

l'etichetta in essi contenuta, per esempio utilizzando opportunamente il margine interno

(padding) tra l'etichetta e i bordi del bottone

[Esempio (Margini bottoni)]

Bottone A Bottone B

Bottone D

Bottone E

Bottone F


� Alle immagini sensibili si applicano gli stessi principi dei bottoni dei moduli, ricordando che

in questo caso le dimensioni definite non sono modificabili.

[Esempio (Immagini sensibili)]

[ ] [ ]

[ ]

[ ]

[ ]


Codice esempi

Interlinee tra collegamenti ipertestuali

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Requisito 21 (distanza tra collegamenti ipertestuali)</title> <style type="text/css"> p {padding: 0.5em;} </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div class="corpo"> <p>[<a href="Tmpl2a.html" title="Collegamento alla pagina Tmpl2a.html (esempio per Requisito 2)" type="text" hreflang="it">Link all'esempio 2 a </a>]</p> <p>[<a href="Tmpl2a.html" title="Collegamento alla pagina Tmpl2a.html (esempio per Requisito 2)" type="text" hreflang="it">Link all'esempio 2 a </a>]</p> <p>[<a href="Tmpl19a_1.html" title="Collegamento all'organigramma del ministro per l'innovazione tecnlogica (versione con immagine bitmap)" hreflang="it">Organigramma ministro per l'innovazione tecnologica </a>]</p> <p>[<a href="longdesc/organigramma_090304txt.html" title="Collegamento all'organigramma del ministro per l'innovazione tecnlogica (versione testo)" type="text" hreflang="it"> Organigramma ministro per l'innovazione tecnologica (versione testo) </a>]</p> </div> <div class="footer"> <form action="./TxtCode/Tmpl21a.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Distanza tra bottoni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Requisito 21 (distanza tra bottoni)</title> <style type="text/css"> input {margin: 0.5em;} </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div class="corpo"> <p> <input type="button" value="Bottone A"></input> <input type="button" value="Bottone B"></input> </p> <p><input type="button" value="Bottone D"></input></p> <p><input type="button" value="Bottone E"></input></p> <p><input type="button" value="Bottone F"></input></p> </div> <div class="footer"> <form action="./TxtCode/Tmpl21b.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Margini bottoni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Requisito 21 (margini bottoni)</title> <style type="text/css"> input {margin: 0.5em; padding: 0.5em;} </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div class="corpo"> <p> <input type="button" value="Bottone A"></input> <input type="button" value="Bottone B"></input> </p> <p><input type="button" value="Bottone D"></input></p> <p><input type="button" value="Bottone E"></input></p> <p><input type="button" value="Bottone F"></input></p> </div> <div class="footer"> <form action="./TxtCode/Tmpl21c.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Immagini sensibili

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <title>Requisito 21 (margini bottoni)</title> <style type="text/css"> a {margin: 0.5em; padding: 0.5em;} </style> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> <div class="corpo"> <p>[ <a href="r1.html"> <img src="immagini/r1.jpg" alt="link al requisito 1"></img> </a>] [ <a href="r2.html"> <img src="immagini/r2.jpg" alt="link al requisito 2"></img> </a>] </p> <p>[<a href="r3.html"> <img src="immagini/r3.jpg" alt="link al requisito 3"></img> </a>]</p> <p>[<a href="r4.html"> <img src="immagini/r4.jpg" alt="link al requisito 4"></img></a>]</p> <p>[<a href="r5.html"> <img src="immagini/r5.jpg" alt="link al requisito 5"></img> </a>]</p> </div> <div class="footer"> <form action="./TxtCode/Tmpl21d.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Requisito 22

In sede di prima applicazione, per i siti esistenti, in ogni pagina che non può essere ricondotta al rispetto dei presenti requisiti, fornire un collegamento a una pagina che li rispetti, contenga informazioni e funzionalità equivalenti, e sia aggiornata con la stessa frequenza della pagina originale, evitando la creazione di pagine di solo testo. Il collegamento alla pagina accessibile deve essere proposto come scelta in modo evidente all'inizio della pagina non accessibile.


� Se, nonostante ogni sforzo, non si riesce a creare una pagina accessibile, occorre fornire un collegamento ipertestuale a una pagina alternativa che abbia funzioni e informazioni equivalenti e che sia aggiornata il più spesso possibile:

� fornire il collegamento ipertestuale in cima ad entrambe le pagine per permettere all'utente di muoversi da una all'altra. Assicurarsi che questi collegamenti siano tra i primi raggiunti con il tasto "tab".


[Esempio (Collegamento a pagina alternativa 1)]



Versione testo


[Esempio (Collegamento a pagina alternativa 2)]

[Collegamento versione standard]

Il MINISTRO PER L'INNOVAZIONE E LE TECNOLOGIE Dott. Lucio Stanca, nello svolgimento delle sue funzioni si avvale delle seguenti strutture:

� UFFICI DI DIRETTA COLLABORAZIONE:

� Segretario particolare e capo della Segreteria dott.ssa Silvana Ardovino

� Capo di Gabinetto dott. Andrea Mancinelli

� Vice Capo di Gabinetto dott.ssa Anna Petrucci

� Capo della Segreteria Tecnica e Consigliere del Ministro dott. Paolo Vigevano

� Centro Studi

� Capo Ufficio Legislativo avv. Enrico De Giovanni

� Capo Ufficio Relazioni Esterne dott. Massimo Massimi

� Capo Ufficio Stampa e del Portavoce dott. Dario de Marchi

� Consigliere del Ministro dott. Francesco Leopardi Dittaiuti

� Consigliere Diplomatico e Capo Ufficio Affari Internazionali dott. Stefano Gatti

� Consigliere del Ministro dott. Ugo Guelfi


� Usare i tag "meta" per designare documenti alternativi. Il browser dovrebbe caricare la pagina automaticamente in base al tipo di interprete (browser) dell'utente e alle sue preferenze.


Codice esempi

Collegamento a pagina alternativa 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="author" content="Marcello Savino"/> <meta name="keywords" content="Accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> <title>Esempio per requisito 3 (Alternative testuali per immagini complesse) </title> </head> <body> <div class="corpo"> <p>[<a href="longdesc/organigramma_090304txt.html"> collegamento versione accessibile</a>]</p> <h1>Organigramma Ministero per l'Innovazione e le Tecnologie</h1> <p> <img src="immagini/organigramma_090304.gif" longdesc="longdesc/organigramma_090304txt.html" alt="Organigramma M.I.T."> </img> </p> <p> <a href="longdesc/organigramma_090304txt.html" title="Organigramma Ministero perl'Innovazione e le Tecnologie">Versione testo</a> </p> </div> <div class="footer"> <form action="./TxtCode/Tmpl3g.html"> <p><input type="submit" value="Visualizza il codice"/></p> </form> </div> </body> </html>


Collegamento a pagina alternativa 2


file:///D:/Sviluppo/Nuovo%20Sincronia%20file/Pagine%20web%20di%20test/Manuale.css

/* Foglio di stile documentazione accessibilità (Video) Autore: Marcello Savino Data : 12/10/2004

Revisione : 12/10/2004 Autore : Marcello Savino Descrizione: Rilascio */html {background-color: #FFFFFF;}body{ font-family: verdana sans-serif; }

body.index{ padding: 2em 1em 2em 70px; margin: 0;}

body.page {width: 100%;}body.r6 {color: #8C1717}

li{ margin-top: .25em; margin-bottom: .25em; font-family: verdana sans-serif;}li.checkpoint{page-break-before: always;}

p { font-family: verdana sans-serif; }

p.index{ Width: 95%; text-align: justify; margin-top: .25em; margin-bottom: .25em; padding-left: 2%;}

p.codart{ width: 95%; text-align: center;}

p.desart{ width: 95%; text-align: center; font-weight: bold;}p.intro{margin-top: 0.2em;margin-bottom: 0.2em;}p.pagebreak{page-break-before: always;}p.example {width: 100%}p.important { font-weight: bold; background-color: #F7F7F7 }p.less-important { font-weight: lighter; font-size: smaller }p.firma{text-align: right; padding-right: 1em; padding-top: 2em; width: 95%;}.credits {color: #808080;font-weight: bold;font-family: Trebuchet MS; margin-top: 0em;margin-bottom: 0em; margin-left: 2em;}.disclaimer {font-family: Trebuchet MS; margin-top: 0em; margin-bottom: 0em;margin-left: 2em; width: 100%}.note {font-family: Trebuchet MS; font-weight: lighter; font-size: 0.9em; margin-top: 0em; margin-bottom: 0em;margin-left: 2em; width: 100%}

table { width: 100%; empty-cells: show;}

dt { font-weight: bold; margin: 1em;}hr { margin-top: .5em}button { outline-color: #8C1717; }

h1.index{ width: 95%; text-align: center; padding-bottom: .25em;}

.title{ text-align: center; color: #A52A2A; font-family: Trebuchet MS; font-size: 1.4em; margin: 0em;}


.example { border-style: solid; border-width: 1px ; padding: .5em; color: #5D0091; background: #F9F5DE; border-color: #5D0091; width: 100%; margin-top: .25em; margin-bottom: .25em;}.anteprima { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 350px;}.anteprima-corta { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 150px;}.anteprima-lunga { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 890px;}

.anteprima-media { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 500px;}.anteprima-mediolunga { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 650px;}.code { display:none }.fcode { border-style: none; padding-left: 0; width: 21cm; height: 23cm; font-size: smaller;}.fcodeL{ border-style: none; padding-left: 0; width: 21cm; height: 29cm; font-size: smaller;}

.segnalazione { color: #FF0000;}

.blinking { color: #FF0000; text-decoration: blink;


}

.deprecated-example { border-style: solid; border-width: 1px ; padding: .5em; color: #5D0091; background: #F9F5DE; border-color: red; width: 75%; margin-top: .25em; margin-bottom: .25em;}

.elements { color: black; background: #E7FFFE }

.attributes { color: black; background: #FFFADF }

.off { display:none }

.footer{ position: fixed; width: 100%; height: 5%; top: auto; right: 0; bottom: 0; left: 0; }

.noscreen {display: none;}

a img { color: white }a:link { color: #A00000 } /* unvisited links */a:visited { color: #FF1493 } /* visited links */a:hover { color: #FF8C00 } /* user hovers */a:active { color: #228B22 } /* active links */

div.r6 { border-color: #808080; border-style: solid}div.requisito {font-style: oblique;}h2.subsection { font-family: Helvetica, sans-serif }

.right { text-align : justify; margin : 0; padding-left : 1%; padding-right : 1%; width : 48%; float : left; }.middle { text-align : justify; margin : 0; padding-left : 1%; padding-right : 1%; width : 30%; float : left; }.left { text-align : justify; margin : 0; padding-left : 1%; padding-right : 1%; width : 48%; float : left; }

.domain { text-align: right; font-family: Trebuchet MS; font-style: italic; }.corpo{height: 30%;}

file:///D:/Sviluppo/Nuovo%20Sincronia%20file/Pagine%20web%20di%20test/print.css

/* Foglio di stile documentazione accessibilità (Stampante) Autore: Marcello Savino Data : 12/10/2004

Revisione : 12/10/2004 Autore : Marcello Savino Descrizione: Rilascio */html {background-color: #FFFFFF;} body{ font-family: verdana sans-serif; }

body.index{ padding: 2em 1em 2em 70px; margin: 0;}

table { width: 100%; padding: .5em;}

li { margin-top: .25em; margin-bottom: .25em; font-family: verdana sans-serif;}

p.index{ Width: 95%; text-align: justify; margin-top: .25em; margin-bottom: .25em; padding-left: 2%;}

p.codart{ width: 95%; text-align: center;}

p.desart{ width: 95%; text-align: center; font-weight: bold;}p.intro{margin-top: 0.2em;margin-bottom: 0.2em;}li.checkpoint{page-break-before: always;}p.pagebreak{page-break-before: always;}p.firma{text-align: right; padding-right: 1em; padding-top: 2em; width: 95%;}.credits {color: #808080;font-weight: bold;font-family: Trebuchet MS; margin-top: 0em;margin-bottom: 0em; margin-left: 2em;}.disclaimer {font-family: Trebuchet MS; margin-top: 0em; margin-bottom: 0em;margin-left: 2em; width: 100%}.note {font-family: Trebuchet MS; font-weight: lighter; font-size: 0.9em; margin-top: 0em; margin-bottom: 0em;margin-left: 2em; width: 100%}

h1.index{ width: 95%; text-align: center; padding-bottom: .25em;}

.title{ text-align: center; color: #A52A2A; font-family: Trebuchet MS; font-size: 1.4em; margin: 0em;}

.example { border-style: solid; border-width: 1px ; padding: .5em; color: #5D0091; background: #F9F5DE; border-color: #5D0091; width: 100%; margin-top: .25em; margin-bottom: .25em;}.anteprima { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 350px;}.anteprima-corta { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 150px;}.anteprima-lunga { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 890px;}

.anteprima-media { border-style: double; border-width: 2px ; margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 500px;}.anteprima-mediolunga { border-style: double; border-width: 2px ;

file:///D:/Sviluppo/Nuovo%20Sincronia%20file/Pagine%20web%20di%20test/print.css

margin-top: 1.25em; margin-bottom: 1.25em; background: #F9F5DE; width: 95%; height: 650px;}

.segnalazione { color: #FF0000;}

.blinking { color: #FF0000;}p.example {width: 100%}.code { visibility: visible; }

.fcode { border-style: none; padding-left: 0; width: 21cm; height: 23cm; font-size: smaller;}.fcodeL{ border-style: none; padding-left: 0; width: 21cm; height: 29cm; font-size: smaller;}

.elements { color: black; background: #E7FFFE }

.attributes { color: black; background: #FFFADF }

.off { display:none }

hr { margin-top: .5em}

a img { color: #FFFFFF }

.noprint { display:none;}

.footer{ display: none; }table {empty-cells: show}body.r6 { font-family: "Gill Sans", sans-serif; color: #8C1717}div.r6 { border-color: #808080; border-style: solid}button { outline-color: #8C1717; outine-style: solid}p { font-family: Verdana }p.important { font-weight: bold; background-color: #F7F7F7 }p.less-important { font-weight: lighter; font-size: smaller }h2.subsection { font-family: Helvetica, sans-serif }a:link { color: #000000 } /* unvisited links */a:visited { color: #000000 } /* visited links */a:hover { color: #000000 } /* user hovers */a:active { color: #000000} /* active links */div.requisito {font-style: oblique;}.domain {align: right; text-align: right; font-family: Trebuchet MS; font-style: italic; }.corpo{height: 50%;}

� accessibilità al contenuto del servizio da parte dell’utente;

� fruibilità delle informazioni offerte, caratterizzata anche da:

1. facilità e semplicità d’uso, assicurando, fra l’altro, che le azioni da compiere per ottenere servizi e informazioni siano sempre uniformi tra loro;

2. efficienza nell’uso, assicurando, fra l’altro, la separazione tra contenuto, presentazione e modalità di funzionamento delle interfacce, nonché la possibilità di rendere disponibile l’informazione attraverso differenti canali sensoriali;

3. efficacia nell’uso e rispondenza alle esigenze dell’utente, assicurando, fra l’altro, che le azioni da compiere per ottenere in modo corretto servizi e informazioni siano indipendenti dal dispositivo utilizzato per l’accesso;

4. soddisfazione nell’uso, assicurando, fra l’altro, l’accesso al servizio e all’informazione senza ingiustificati disagi o vincoli per l’utente;

� compatibilità con le linee guida indicate nelle comunicazioni, nelle raccomandazioni e nelle direttive sull’accessibilità dell’Unione europea, nonché nelle normative internazionalmente riconosciute e tenendo conto degli indirizzi forniti dagli organismi pubblici e privati, anche internazionali, operanti nel settore, quali l’International Organization for Standardization (ISO) e il World Wide Web Consortium (W3C).

(“Schema di regolamento per l’applicazione della legge Stanca”)

Sono accessibili i servizi realizzati tramite sistemi informatici che presentano i seguenti requisiti:

Con apposito decreto del Ministro per l’innovazione e le tecnologie, di concerto con il Ministro dell’istruzione, dell’università e della ricerca, sentiti la Conferenza Unificata e il Centro nazionale per l’informatica nella pubblica amministrazione (Cnipa), sono dettate specifiche regole tecniche che disciplinano l’accessibilità, da parte degli utenti, agli strumenti didattici e formativi di cui all’articolo 5 della legge n. 4 del 2004.

Normativa - Lungo la strada dell'accessibilità

[...]

1. La presente legge si applica alle pubbliche amministrazioni [...] 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 e alle aziende appaltatrici di servizi informatici.

2. Le disposizioni della presente legge [...] non si applicano ai sistemi informatici destinati ad essere fruiti da gruppi di utenti dei quali [...], non possono fare parte persone disabili.

1. Nelle procedure svolte [...] per l'acquisto di beni e per la fornitura di servizi informatici, i requisiti di accessibilità [...] costituiscono motivo di preferenza a parità di ogni altra condizione nella valutazione dell'offerta tecnica[...]. La mancata considerazione dei requisiti di accessibilità o l'eventuale acquisizione di beni o fornitura di servizi non accessibili è adeguatamente motivata.

2. I soggetti di cui all'articolo 3, comma 1, non possono stipulare, a pena di nullità, contratti per la realizzazione e la modifica di siti INTERNET quando non è previsto che essi rispettino i requisiti di accessibilità [...], in caso di rinnovo, modifica o novazione, sono adeguati, a pena di nullità, alle disposizioni della presente legge circa il rispetto dei requisiti di accessibilità, con l'obiettivo di realizzare tale adeguamento entro dodici mesi dalla data di entrata in vigore del medesimo decreto.

[...]

Estratto della legge 9 gennaio 2004 n. 4

"Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici";

Art. 3

(Soggetti erogatori)

Art. 4

(Obblighi per l'accessibilità)


1. La Presidenza del Consiglio dei ministri - Dipartimento per l'innovazione e le tecnologie valuta su richiesta l'accessibilità dei siti INTERNET o del materiale informatico prodotto da soggetti diversi da quelli di cui all'articolo 3.

2. Con il regolamento di cui all'articolo 10 sono individuati:

1. le modalità con cui può essere richiesta la valutazione;

2. i criteri per la eventuale partecipazione del richiedente ai costi dell'operazione;

3. il marchio o logo con cui è reso manifesto il possesso del requisito dell'accessibilità;

4. le modalità con cui può essere verificato il permanere del requisito stesso.

[...]

1. L'inosservanza delle disposizioni della presente legge comporta responsabilità dirigenziale e responsabilità disciplinare ai sensi degli articoli 21 e 55 del decreto legislativo 30 marzo 2001, n. 165, ferme restando le eventuali responsabilità penali e civili previste dalle norme vigenti.

1. Entro novanta giorni dalla data di entrata in vigore della presente legge[...], sono definiti:

1. i criteri e i princìpi operativi e organizzativi generali per l'accessibilità;

2. i contenuti di cui all'articolo 6, comma 2;

3. i controlli esercitabili sugli operatori privati che hanno reso nota l'accessibilità dei propri siti e delle proprie applicazioni informatiche;

4. i controlli esercitabili sui soggetti di cui all'articolo 3, comma 1.

2. Il regolamento di cui al comma 1 è adottato previa consultazione con le associazioni delle persone disabili maggiormente rappresentative, con le associazioni di sviluppatori competenti in materia di accessibilità e di produttori di hardware e software e previa acquisizione del parere delle competenti Commissioni parlamentari, che devono pronunciarsi entro quarantacinque giorni dalla richiesta, e d'intesa con la Conferenza unificata di cui all'articolo 8 del decreto legislativo 28 agosto 1997, n. 281.

1. Entro centoventi giorni dalla data di entrata in vigore della presente legge il Ministro [...]stabilisce[...]:

1. le linee guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità;

2. le metodologie tecniche per la verifica dell'accessibilità dei siti INTERNET, nonchè i programmi di valutazione assistita utilizzabili a tale fine.

Art. 6

(Verifica dell'accessibilità su richiesta)

Art. 9

(Responsabilità)

Art. 10

(Regolamento di attuazione)

Art. 11

(Requisiti tecnici)


1. Il regolamento di cui all'articolo 10 e il decreto di cui all'articolo 11 sono emanati osservando le linee guida indicate nelle comunicazioni, nelle raccomandazioni e nelle direttive sull'accessibilità dell'Unione europea, nonchè nelle normative internazionalmente riconosciute e tenendo conto degli indirizzi forniti dagli organismi pubblici e privati, anche internazionali, operanti nel settore.

2. Il decreto di cui all'articolo 11 è periodicamente aggiornato, con la medesima procedura, per il tempestivo recepimento delle modifiche delle normative di cui al comma 1 e delle innovazioni tecnologiche nel frattempo intervenute.

[...]

Art. 12

(Normative internazionali)


� Studio sulle Linee Guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità (legge 4 del 2004, art. 11 comma a e b) Versione 1 Maggio 2004

http://www.innovazione.gov.it/ita/intervento/normativa/allegati/Accessibilita_lineeguida_040511.rtf

� Studio sulle Linee Guida recanti i requisiti tecnici e i diversi livelli per l'accessibilità e le metodologie tecniche per la verifica dell'accessibilità (legge 4 del 2004, art. 11 comma a e b) Versione Dicembre 2004

http://www.pubbliaccesso.it/biblioteca/documentazione/studio_lineeguida/Studio_Dic_2004.rtf

Ulteriori documenti


� Controlli dei moduli (form control) � Definizione del Tipo di Documento � Gestori di eventi � Heading � Linearizzazione tabelle � Mappe immagini sensibili � Negoziazione contenuti � Script � Tecnologia assistiva

e della precisazione sull'origine dei fogli di stile (CSS), questo glossario è un estratto del glossario (pp. 116-124) contenuto nel documento "Guida alla comunicazione istituzionale on line" citato nella [bibliografia].

- A -

Accessibilità Il W3C stabilisce che il contenuto di un sito web è accessibile "quando può essere usato da qualcuno che ha una disabilità"; cioè rendere accessibile un sito significa rendere i contenuti disponibili alla più vasta tipologia di persone e dispositivi; questo comporta adottare una serie di misure e di accorgimenti per cui le persone con disabilità di vario tipo (motorie, sensoriali ecc.) e che sono costrette ad usare software ed hardware particolari (anche di vecchio tipo) non siano penalizzate nell'uso della rete.

Alt text E' il breve testo che appare quando si passa il mouse su un'immagine e che prende il posto dell'immagine se questa non viene scaricata.

Applet Java Piccola applicazione Java inserita all’interno di una pagina web per includervi funzioni avanzate, come ad esempio animazioni o elementi interattivi. Viene scaricata dal browser e utilizzata immediatamente.

- B -

Banner Abbreviativo di Banner Advertisement, ovvero un'immagine o un grafico usato per pubblicizzarsi su internet.

Bookmark (Segnalibro) Sulla barra dei menu dei browser è presente un comando che consente di contrassegnare con un segnalibro gli indirizzi interessanti ai quali si desidera tornare facilmente in seguito.

- C -

Caption E’ una didascalia, un sottotitolo, ma anche il brevissimo testo che nelle impaginazioni più moderne accompagna o si insinua nel corpo del testo principale per evidenziare i messaggi più importanti.

Content editing (detto anche heavy editing o substantive editing) E’ l'editing che va oltre gli aspetti puramente formali per investire lo stile vero e proprio, l'organizzazione e la logica dei contenuti. Il content editor è un vero collaboratore dell'autore: la sua revisione mira ad arrivare ad un testo ben costruito, scritto con chiarezza, capace di comunicare con efficacia a quel particolare tipo di pubblico. Il suo compito è quindi quello di indicare e migliorare le carenze di logica, sottolineare ed eliminare le parole gergali che possono non venire capite, rimettere mano ai periodi, ai titoli e alle caption per rendere il testo più chiaro, più leggibile e, nei casi migliori, più accattivante.

Collegamento ipertestuale vedi Link.

Controlli dei moduli (form control) Elementi tramite i quali l'utente interagisce con i moduli. Tipicamente : bottoni, caselle di spunta a scelta singola (radio button), caselle di spunta a scelta multipla (checkbox), caselle di input, menu, caselle per selezionare un

Glossario

Ad esclusione della definizione dei seguenti termini:

Glossario - Lungo la strada dell'accessibilità

file, ecc. Cookie

E’ un file memorizzato nel PC che conserva alcune informazioni relative al sito visitato, come ad esempio quali sono i messaggi già visitati oppure il nickname (soprannome) con cui sia stato effettuato l'accesso, evitandoti di eseguirlo ogni volta che si entri nel forum.

Copyediting (detto anche "line editing") E’ la revisione di un testo per controllare che sia privo di errori. Errori di varia natura: errori di grammatica, refusi, punteggiatura, aderenza a determinati standard di comunicazione, concordanza tra numeri e note, correttezza dei nomi propri, numerazioni (tabelle, cifre, note, che siano in sequenza e che nessuna manchi), acronimi (sciolti per la prima volta e poi ripetuti correttamente lungo tutto il testo). Un buon copyeditor sa asciugare il testo, eliminando le parole inutili, e indicare all'autore possibili miglioramenti di tipo formale.

CSS (Cascading Style Sheets) I fogli di stile sono insiemi di regole che si applicano a tutti gli elementi del documento senza doverli ripetere punto per punto e sono detti "interni" se inseriti in un documento (valgono solo per quel documento), o "esterni" (collegati) se le regole sono inserite in un file separato che dovrà essere dichiarato documento per documento. I fogli di stile possono avere tre differenti origini: il fornitore di contenuti (provider e/o autore delle pagine web), creati dall'utente (risiedono sul client), integrati con l'interprete (browser).

- D -

Definizione del Tipo di Documento (DTD) La dichiarazione del tipo di documento (Dtd), posta in testa al documento, dichiara la grammatica a cui il documento si attiene. Lo scopo è quello di validare la pagina secondo le specifiche W3C e di istruire il browser con quale modalità interpretare il contenuto del documento. Per l'HTML o l'XHTML, una DTD di tipo rigoroso (strict) specifica una grammatica con delle precise limitazioni (l'assenza di elementi e di attributi di presentazione demandati ai fogli di stile). Il documento, per essere validato, dovrà attenersi alla grammatica specificata nella DTD.

Disapprovato Un elemento o attributo disapprovato è qualcosa che è stato superato da nuovi costrutti. Elementi disapprovati possono diventare obsoleti nelle versioni future dell'HTML. L'indice degli elementi e attributi HTML nel Documento sulle Tecniche indica quali elementi e attributi sono disapprovati dall'HTML 4.0. Gli autori dovrebbero evitare di utilizzare elementi e attributi disapprovati. Gli interpreti dovrebbero continuare a supportarli per ragioni di compatibilità all'indietro.

Display braille Dispositivo che riproduce in alfabeto braille ciò che appare sullo schermo.

Documento elettronico Versione elettronica di un documento (ad esempio su floppy, cd rom, on line, …).

- E -

Editing L'attività di revisione di un testo.

- F -

Frame Caratteristica supportata dalla maggioranza degli interpreti (browser) che abilita la suddivisione dello schermo in due o più settori (frame). Il contenuto di ogni settore si comporta come una pagina web differente.

Fogli di stile vedi CSS.

Form Modulo: in una pagina web il riquadro cliccando all'interno del quale è possibile inserire una scritta.

- G -

Gestori di eventi (event handler) Il meccanismo per cui si può rispondere a qualcosa che accade ad un oggetto. Tipicamente, in una pagina web, il codice associato al verificarsi di uno specifico evento che coinvolge un oggetto. Ad esempio il gestore di evento "onkeypress" viene attivato dalla pressione di un tasto. Se associo, in un controllo, una funzione a tale gestore, quando il controllo è attivo, alla pressione di un tasto viene eseguita la funzione associata.

GIF (Graphic Interchange Format)


Formato grafico con caratteristiche molto variabili. Consente, tra le altre, animazioni e gradualità di grigio.

- H -

Heading Il titolo, sottotitolo, soggetto che si trova in testa o all'inizio di un paragrafo o sezione di testo.

Host Computer ospite che accetta, tramite linee di collegamento, le richieste di terminali di personal computer, che possono così utilizzare programmi o prelevare dati.

- I -

Indipendente da dispositivo Accesso indipendente da dispositivo significa che gli utenti possono interagire con l'interprete o con il documento con il dispositivo di input (output) preferito -- mouse, tastiera, voce, bacchette manovrate con la testa, o altro.

Indirizzo IP (Internet Protocol) es. http://212.177.180.30. Sono come i numeri telefonici e permettono di identificare e contattare un determinato computer sulla rete. Ad ogni computer connesso a internet corrisponde un indirizzo IP.

- J -

JPG o JPEG (Joint Photographic Experts Group) Metodo diffuso usato per immagini fotografiche. Molti browser web accettano le immagini JPEG come formato standard per la visualizzazione dei file.

- K -

Key word Parole chiave, quei termini che permettono di identificare nel modo più univoco un concetto.

- L -

Linearizzazione tabelle Rendere lineari i dati contenuti in una tabella per comprenderne la struttura logica. Per linearizzare una tabella, solitamente, è sufficente eliminare/ignorare il marcatore <table>. Tuttavia le informazioni in una tabella spesso sono correlate alle informazioni contenute nell'intestazione delle righe e delle colonne; in tal caso bisogna poter istruire opportunamente il browser perchè legga il contenuto delle celle e delle intestazioni nell'ordine più appropriato per mantenere l'informazione.

Linguaggio di marcatura Permette di inserire all'interno del documento delle etichette o marcature (tag), che descrivono il contenuto del documento stesso. In questo modo un'applicazione, ad esempio un motore di ricerca, riesce a leggere le informazioni contenute nel documento e può elaborarle in maniera efficiente e corretta.

Link In un testo un link appare come una parola o una frase di colore diverso: cliccando su di esso l’utente si può spostare da un documento ad un altro.

- M -

Mappa del sito Pagina di un sito nella quale viene rappresentata la struttura del sito stesso attraverso collegamenti ipertestuali almeno ai primi due livelli di contenuto.

Mappe immagini sensibili Immagini su cui è costruita una mappa sensibile ad azioni (tipicamente un click del mouse). Vi sono due maniere principali per mappare un immagine. La prima, mappa lato client, consiste nel suddividere un immagine in aree geometriche (regioni) e di associare ad ogni regione una specifica azione. La seconda, mappa lato server, invia la pagina e le coordinate del mouse al server, che deciderà l'azione da intraprendere in base alle informazioni ricevute.

Marcatori Vedi: Linguaggio di marcatura


Motore di ricerca Sito in cui un programma indicizza automaticamente le informazioni presenti in rete e permette all'utente di reperirle attraverso varie modalità di ricerca. Ad esempio, attraverso la digitazione di una parola in un campo apposito, viene restituita la lista dei siti nei quali, sulla base dei propri procedimenti di indicizzazione, il motore di ricerca ha rilevato la presenza del termine richiesto.

- N -

Navigabilità Un sito è navigabile quando l'utente riesce ad orientarsi facilmente e a ottenere le informazioni e i servizi che cerca in maniera semplice e veloce.

Negoziazione contenuti La possibilità di far in modo che l'utente riceva dal server i documenti appropriati, in modo che si adattino alle sue preferenze.

- O -

Open source Letteralmente significa "sorgenti aperti"; si tratta infatti di programmi dei quali è possibile avere e modificare il codice sorgente, con la possibilità di distribuire la versione modificata, di solito a patto che venga rilasciata sotto la stessa licenza.

- P -

PDF (Portable Document Format) Si tratta di formato di file creato da Adobe, utilizzato normalmente per rendere disponibili documenti creati con vari programmi (videoscrittura, grafici, impaginatori ecc.) senza che il destinatario abbia il software con il quale il file è stato generato. Il file è inoltre visualizzabile da qualsiasi piattaforma con qualsiasi sistema operativo. Il reader per visualizzare i documenti (Acrobat Reader) è distribuito gratuitamente, mentre il software per realizzare file PDF è a pagamento. I file PDF inoltre non possono essere modificati.

Plug in Software che si installa per integrare un'applicazione principale già esistente per aggiungere delle funzionalità. Si utilizzano in modo particolare nei browser per poter eseguire dei file diversi dai formati web. Alcuni esempi sono Acrobat Reader, RealPlayer, Shockwave, Quicktime.

Portale Sito internet che costituisce una “porta d’ingresso” alla rete. Un portale offre link ad altri siti, servizi per gli utenti (posta, quotazioni di borsa, meteo, forum di discussione, e-commerce...), notizie di attualità o di argomenti specifici (portali verticali), strumenti di ricerca. Lo scopo dei portali è fidelizzare il visitatore invitandolo a tornare spesso e a utilizzare il loro servizio come punto di partenza per navigare in rete.

- R -

Refreshing Nel webwriting indica l'aggiornamento delle informazioni presenti su un sito.

- S -

Screen reader Software che legge il contenuto dello schermo traducendolo, a seconda della scelta dell'utente, attraverso la sintesi vocale, o la barra Braille. Per poter essere di reale aiuto a non vedenti e ipovedenti, è necessario che i software e le pagine web da tradurre siano realizzati seguendo dei particolari criteri di accessibilità.

Script Codice inserito all'interno di una pagina web per includervi funzioni avanzate, come ad esempio animazioni o elementi interattivi. E' racchiuso tra opportuni marcatori e interpretato dal browser. Solitamente è scritto in linguaggio Javascript o VBScript.

Streaming audio (e video) Trasmissione attraverso internet di dati (audio e video) in tempo reale. Questa tecnologia permette, attraverso l'utilizzo di un plug-in del browser, di ascoltare un brano musicale o visualizzare un filmato senza dover prima completare il download sul proprio computer. E’ necessario però che il server su cui risiede il file sia in grado di fornire questo servizio.


Style guide Guida di stile, un vademecum che contiene le linee guida da seguire per assicurare la coerenza editoriale della comunicazione all'interno di una determinata organizzazione.

- T -

Tecnologia assistiva Tecnologia (software o hardware) che incrementa, mantiene o migliora le capacità funzionali di individui con disabilità nell'interazione con i computer o sistemi basati su computer.

- U -

URL (Uniform Resource Locator). Indirizzo elettronico delle risorse presenti in rete che, in questo modo, vengono identificate in modo univoco. Ad ogni URL infatti può corrispondere un solo documento. Un esempio di URL è http://www.nomesito.it/cartella/nome_file.html, dove la parte a sinistra del segno "//" indica il protocollo di comunicazione (http, per la navigazione nel WWW, ftp per il tra sferimento file …); la parte a destra (www.nomesito.it) indica il nome simbolico dell'host (ogni host è definito da una stringa numerica, ma per facilità di lettura la stringa viene automaticamente tradotta in una espressione simbolica), infine la terza parte (cartella/nome_file.html), separata dalla precedente dal segno /, indica il nome e il percorso del singolo file a cui ci si riferisce.

Usability/usabilità Secondo la definizione di Jacob Nielsen, un prodotto è usabile quando è facile da apprendere, consente una efficienza di utilizzo, è facile da ricordare, permette pochi errori di interazione, è piacevole da usare.

- W -

WAI (Web Accessibility Iniziative) Progetto del W3C per definire le linee guida per un web accessibile.

Web editing Comprende la professionalità e gli strumenti utili per adattare, correggere e impaginare un testo (parole, immagini ecc.) prima della pubblicazione sul web o via e-mail. Il web editor è dunque il curatore dei contenuti per internet. Ma con questo e altri nomi (es.: web writer) è spesso inteso anche come redattore.

Web writing Letteralmente significa "scrivere per il web" e da indicazioni sulle caratteristiche che i documenti pubblicati su internet o inviati per posta elettronica dovrebbero avere. Non è infatti sufficiente tradurre i testi cartacei in formato elettronico, ma occorre ripensare il messaggio per adattarlo a questo strumento.

W3C (World Wide Web Consortium) È l'ente ufficiale che definisce ed approva gli standard per i linguaggi di programmazione per internet (es. html, css, xhtml). Il rispetto degli standard stabiliti dal W3C consente la piena compatibilità tra diversi browser e sistemi operativi.

WWW (Word Wide Web) È la rete che permette di strutturare l'informazione attraverso protocolli standardizzati per poterla condividere con tutti i computer collegati in rete, qualsiasi sia la loro dotazione hardware e software. L'organizzazione dell'immenso patrimonio informativo e di servizi presenti sul web si fonda sul principio dell'ipertesto.

- X -

XML (Extensible Marked Language) Linguaggio di programmazione per il web, molto più potente dell'HTML, che riguarda la classificazione e la strutturazione del contenuto. La forza dell'XML sta nella possibilità di creare documenti multimediali e interattivi. La diffusione del suo utilizzo permetterà di superare le attuali barriere di incompatibilità tra i diversi sistemi informatici.

XHTML (Extensible Hypertext Mark-up Language) È un ibrido tra XML e HTML.


Date post:	15-Feb-2018
Category:	Documents
Upload:	haanh
View:	215 times
Download:	0 times

Lungo la strada accessibilità - · PDF fileparticolare della struttura navigazionale e...

Documents