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

Dimensione: px
Iniziare la visualizzazioe della pagina:

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

Transcript

1 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)

2 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

3 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

4 Riferimenti: bibliografia e sitografia [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 L. Cantoni, N. Di Blas, D. Bolchini, Comunicazione, qualità, usabilità, Milano, 2003, cit. p. 28. Introduzione - Lungo la strada dell'accessibilità

5 Note tecniche relative ai requisiti da sottoporre a verifica. 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 ), 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. Marcello Savino Introduzione - Lungo la strada dell'accessibilità

6 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: Requisito 1 - Lungo la strada dell'accessibilità

7 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)] E=Energia, m=massa c=velocità della luce E = mc 2 In questo esempio (vedi codice) è stato usato un tipo di documento XHTML MathML SVG 1.1. N.B.: non tutti i browser supportano le specifiche relative a questo tipo documento. Requisito 1 - Lungo la strada dell'accessibilità

8 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. Requisito 1 - Lungo la strada dell'accessibilità

9 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)] Requisito 1 - Lungo la strada dell'accessibilità

10 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 Livello Livello 1.2 Livello Livello Livello 2 Livello 2.1 Livello Livello Livello 2.2 Livello Livello Requisito 1 - Lungo la strada dell'accessibilità

11 Per le liste numerate occorre utilizzare i tag appropriati e numeri composti (1, 1.1, 1.2, , ). 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 lista 1. Uno 1. uno punto uno 2. uno punto due 2. Due 1. due punto uno [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). Requisito 1 - Lungo la strada dell'accessibilità

12 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 Requisito 1 - Lungo la strada dell'accessibilità

13 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. Requisito 1 - Lungo la strada dell'accessibilità

14 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. 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 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 } Requisito 1 - Lungo la strada dell'accessibilità

15 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 'fontweight'; al posto dei seguenti elementi e attributi dei font: "font", "basefont", "face", "size"; usare le seguenti proprietà CSS2 per controllare i font: 'font', 'fontfamily', '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)] Testo con font generico Testo con font generico paragrafo Testo grosso con font generico paragrafo Testo importante Testo meno importante NB.: la capacità di visualizzare correttamente questo esempio è legata al browser utilizzato Requisito 1 - Lungo la strada dell'accessibilità

16 Codice esempi Definizione Tipo Documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl1a.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

17 Immagine come testo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/dtmpl1a.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

18 Formula <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" " <html xmlns=" 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 "/> <title>utilizzo appropriato linguaggio di marcatori</title> </head> <body> <div class="corpo"> <p>e=energia, m=massa c=velocità della luce</p> <math xmlns=" <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 class="footer"> <form action="./txtcode/tmpl1am.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

19 Sezioni Documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl1e.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

20 Struttura documento tramite header <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl1f.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

21 Utilizzo corretto di liste numerate <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl1b.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

22 Utilizzo errato di liste numerate <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/dtmpl1b.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

23 Lista numerata manualmente <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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 class="footer"> <form action="./txtcode/tmpl1b_1.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

24 Controllo caratteristiche dei font <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl1c.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 1 - Lungo la strada dell'accessibilità

25 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 con font generico Testo con font generico paragrafo Testo grosso con font generico paragrafo Testo importante Testo meno importante REQUISITO 1 : Realizzare pagine e oggetti in esse contenuti con tecnologie definite da grammatiche formali Requisito 2 - Lungo la strada dell'accessibilità

26 [Esempio (Descrizione dei frame)] #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 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. Requisito 2 - Lungo la strada dell'accessibilità

27 Codice esempi Utilizzo di frame <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl2a.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </noframes> </frameset> </html> Requisito 2 - Lungo la strada dell'accessibilità

28 Descrizione dei frame <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <meta name="author" content="marcello Savino"/> <meta name="keywords" content="accessibilità, WAI, WCAG, WEB, Sviluppo, Usabilità"/> <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 2 - Lungo la strada dell'accessibilità

29 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. Il requisito 3 ci richiede la verifica dei seguenti punti: Aggiungere una descrizione testuale agli oggetti non testuali in base alla seguente tabella: Tabella modalità per descrizione Elemento Img Input Applet Object Attributo o altra modalità per descrizione alt alt alt / testo equivalente nel contenuto dell elemento testo equivalente nel contenuto dell elemento Requisito 3 - Lungo la strada dell'accessibilità

30 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)] Adriana Laura Alice 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 Requisito 3 - Lungo la strada dell'accessibilità

31 Quando un'immagine è usata come contenuto di un collegamento ipertestuale, si specifichi il testo equivalente per l'immagine. [Esempio (Collegamento ipertestuale con immagine)] Primo esempio 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. Requisito 3 - Lungo la strada dell'accessibilità

32 Quando si usa <img> specificare un testo corto equivalente utilizzando l attributo alt. [Esempio (Testo descrittivo di immagine)] di Trento Provincia Autonoma Logo P.A.T. Provincia Autonoma di Trento 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. Requisito 3 - Lungo la strada dell'accessibilità

33 [Esempio (Descrizione immagini complesse)] [ collegamento versione accessibile] Organigramma Ministero per l'innovazione e le Tecnologie Versione testo Requisito 3 - Lungo la strada dell'accessibilità

34 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. Requisito 3 - Lungo la strada dell'accessibilità

35 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 * 7 6 * 5 4 * 3 2 * y=2x fine ASCII art ;-) Requisito 3 - Lungo la strada dell'accessibilità

36 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). Requisito 3 - Lungo la strada dell'accessibilità

37 L'utilizzo di immagini come bottoni è ammesso a patto di fornire l'equivalente testuale tramite l'attributo "alt". [Esempio (Utilizzo di immagini come bottoni)] Bottone Submit 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. Requisito 3 - Lungo la strada dell'accessibilità

38 [Esempio (Sorgente di un frame)] Testo con font generico Testo con font generico paragrafo [ collegamento versione accessibile] Organigramma Ministero per l'innovazione e le Tecnologie Testo grosso con font generico paragrafo Testo importante Testo meno importante Requisito 3 - Lungo la strada dell'accessibilità

39 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. Requisito 3 - Lungo la strada dell'accessibilità

40 Codice esempi Lista puntata con immagini <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3c.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

41 Collegamento ipertestuale con immagine <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3d.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

42 Testo descrittivo di immagine <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3e.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

43 Testo nel corpo dell'elemento object <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3f.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

44 Descrizione immagini complesse <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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_ 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 class="footer"> <form action="./txtcode/tmpl3g.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

45 Utilizzo di ASCII-art <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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> * 7 6 * 5 4 * 3 2 * 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 class="footer"> <form action="./txtcode/tmpl3h.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

46 Mappe con regioni attive <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3i.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

47 Descrizione per applet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3m.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

48 Utilizzo di immagini come bottoni <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 class="footer"> <form action="./txtcode/tmpl3a.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 3 - Lungo la strada dell'accessibilità

49 Sorgente di un frame <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <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 3 - Lungo la strada dell'accessibilità

50 Requisito 4 Assicurarsi che tutta l'informazione e tutte le funzionalità veicolate dal colore siano disponibili anche senza l'uso dello stesso. Il requisito 4 ci richiede la verifica dei seguenti punti: 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 4 - Lungo la strada dell'accessibilità

51 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. Il requisito 5 ci richiede la verifica dei seguenti punti: 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à. Requisito 5 - Lungo la strada dell'accessibilità

52 [Esempio (Lampeggiamento)] 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. 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. Requisito 5 - Lungo la strada dell'accessibilità

53 Codice esempi Lampeggiamento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title> Esempio per requisito 5 (Effetti di lampeggiamento e scorrimento testo ) </title> <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" /> </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 class="footer"> <form action="./txtcode/tmpl5a.html"> <p><input type="submit" value="visualizza il codice"/></p> </form> </body> </html> Requisito 5 - Lungo la strada dell'accessibilità

54 1 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. Il requisito 6 ci richiede la verifica dei seguenti punti: 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)] Testo con font generico Testo con font generico paragrafo Testo grosso con font generico paragrafo Testo importante Testo meno importante Premi Link all' esempio 2 a Si vedano i fogli di stile utilizzati in questo esempio :Manuale.css (Video), Print.css (Stampante).

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Pella (NO) http://www.comune.pella.no.it/ DATA DELLA VALUTAZIONE 09/07/2008 AUTORE DELLA VALUTAZIONE Alessio Mantegna

Dettagli

Un corso (accessibile) sull accessibilità dei siti web. di Gianluca Affinito gianluca.affinito@gmail.com

Un corso (accessibile) sull accessibilità dei siti web. di Gianluca Affinito gianluca.affinito@gmail.com Un corso (accessibile) sull accessibilità dei siti web di Gianluca Affinito gianluca.affinito@gmail.com La conoscenza della Legge 4/2004 nella scuola italiana Un recente questionario, proposto dall'istituto

Dettagli

CORSO PER REDATTORI DI SITI WEB

CORSO PER REDATTORI DI SITI WEB CORSO PER REDATTORI DI SITI WEB Prerequisiti: Conoscenza di base dei seguenti argomenti: linguaggi di marcatura (HTML), strumenti software per l'elaborazione di testi. Esperienza nella redazione e pubblicazione

Dettagli

Dichiarazione di accessibilità del sito di Ulisse - Nella rete della scienza

Dichiarazione di accessibilità del sito di Ulisse - Nella rete della scienza Dichiarazione di accessibilità del sito di Ulisse - Nella rete della scienza I riferimenti riguardano quanto indicato nelle Recommendation del World Wide Web Consortium (W3C) ed in particolare in quelle

Dettagli

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ Ente richiedente Provincia url Comune di Carmagnola TO http://comune.carmagnola.to.it/ Autore della valutazione Data Maurizio

Dettagli

PIANO BIENNALE PER I DIRITTI DELLE PERSONE CON DISABILITÀ

PIANO BIENNALE PER I DIRITTI DELLE PERSONE CON DISABILITÀ PIANO BIENNALE PER I DIRITTI DELLE PERSONE CON DISABILITÀ 15 novembre 2014 Daniela Sangiovanni Comunicazione e Ufficio stampa Policlinico S,Orsola ACCESSIBILITÀ Gli Stati dovrebbero riconoscere l importanza

Dettagli

Linee guida per l'organizzazione, l'usabilità e l'accessibilità dei siti Web delle pubbliche amministrazioni

Linee guida per l'organizzazione, l'usabilità e l'accessibilità dei siti Web delle pubbliche amministrazioni PRESIDENZA DEL CONSIGLIO DEI MINISTRI DIPARTIMENTO DELLA FUNZIONE PUBBLICA CIRCOLARE 13 marzo 2001, n. 3/2001 Linee guida per l'organizzazione, l'usabilità e l'accessibilità dei siti Web delle pubbliche

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

Progettare un sito web

Progettare un sito web Progettare un sito web Problematiche di accessibilità (Capitolo 2) (materiale illustrativo degli esempi gentilmente messo a disposizione da R. Polillo) Accessibilità La capacità dei sistemi informatici,

Dettagli

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia Scuola Digitale Manuale utente Copyright 2014, Axios Italia 1 SOMMARIO SOMMARIO... 2 Accesso al pannello di controllo di Scuola Digitale... 3 Amministrazione trasparente... 4 Premessa... 4 Codice HTML

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Minerva, verso la qualità dei siti web pubblici. Dott. Antonio De Vanna responsabile Ufficio accessibilità dei sistemi informatici

Minerva, verso la qualità dei siti web pubblici. Dott. Antonio De Vanna responsabile Ufficio accessibilità dei sistemi informatici Minerva, verso la qualità dei siti web pubblici Dott. Antonio De Vanna responsabile Ufficio accessibilità dei sistemi informatici Centro Nazionale per l Informatica nella Pubblica Amministrazione CNIPA

Dettagli

Relazione illustrativa degli Obiettivi di accessibilità

Relazione illustrativa degli Obiettivi di accessibilità COMUNE DI PORTOSCUSO Provincia di Carbonia-Iglesias Comune di Portoscuso Relazione illustrativa degli Obiettivi di accessibilità Redatto ai sensi dell articolo 9, comma 7 del decreto legge 18 ottobre 2012,

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

Realizzare il layout di un sito web senza utilizzare frame e tabelle Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera

Dettagli

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict.

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict. Tasti di accesso rapido Al fine di migliorare l'accessibilità del sito sono stati definiti i seguenti tasti di accesso rapido, per attivare le principali funzionalità offerte: [H] = Homepage [R] = Ricerca

Dettagli

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE.

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE. Cos'è l'html HTML è una sigla che viene da una frase inglese che vuol dire: " Linguaggio di contrassegno di ipertesti" (Hyper Text Markup Language) L'Html non è un vero e proprio linguaggio di programmazione,

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

Relazione sulla verifica accessibilità

Relazione sulla verifica accessibilità Relazione sulla verifica accessibilità Sito web: www.comune.stresa.vb.it Premessa Il presente rapporto e l effettiva attività di controllo requisiti per l accessibilità, sono stati effettuati seguendo

Dettagli

Sistema operativo. Sommario. Sistema operativo...1 Browser...1. Convenzioni adottate

Sistema operativo. Sommario. Sistema operativo...1 Browser...1. Convenzioni adottate MODULO BASE Quanto segue deve essere rispettato se si vuole che le immagini presentate nei vari moduli corrispondano, con buona probabilità, a quanto apparirà nello schermo del proprio computer nel momento

Dettagli

COMUNE DI ROSSANO VENETO

COMUNE DI ROSSANO VENETO COMUNE DI ROSSANO VENETO Obiettivi di accessibilità per l anno 2014 Redatto ai sensi dell articolo 9, comma 7 del decreto legge 18 ottobre 2012, n. 179. Redatto il 25.03.2014 1 SOMMARIO Obiettivi di accessibilità

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

UTILIZZO DEL TEMPLATE Parte 1 - struttura

UTILIZZO DEL TEMPLATE Parte 1 - struttura UTILIZZO DEL TEMPLATE Parte 1 - struttura PROGRAMMI UTILIZZATI: gestione del codice HTML - HTML-Kit è un Editor Web non di tipo visuale, che consente la costruzione ex-novo di pagine web o la loro modifica,

Dettagli

Esercizi di JavaScript

Esercizi di JavaScript Esercizi di JavaScript JavaScript JavaScript é un linguaggio di programmazione interpretato e leggero, creato dalla Netscape. E' presente a patire da Netscape 2 in tutti i browser ed é dunque il linguaggio

Dettagli

Obiettivi di accessibilità per l anno 2014

Obiettivi di accessibilità per l anno 2014 COMUNE DI BRUSAPORTO PROV. DI BG Obiettivi di accessibilità per l anno 2014 Redatto ai sensi dell articolo 9, comma 7 del decreto legge 18 ottobre 2012, n. 179. Redatto A MARZO 2014 Sommario Obiettivi

Dettagli

XSL: extensible Stylesheet Language

XSL: extensible Stylesheet Language XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono

Dettagli

DATA BASE ON LINE (BANCA DATI MODULI SPERIMENTALI)

DATA BASE ON LINE (BANCA DATI MODULI SPERIMENTALI) Progetto regionale antidispersione per favorire l adempimento dell obbligo d istruzione 2 a annualità DATA BASE ON LINE (BANCA DATI MODULI SPERIMENTALI) MANUALE DI UTILIZZO Indice Premessa 3 Ingresso nel

Dettagli

Comune di Busto Garolfo Obiettivi di accessibilità per l'anno 2014

Comune di Busto Garolfo Obiettivi di accessibilità per l'anno 2014 Comune di Busto Garolfo Obiettivi di accessibilità per l'anno 2014 Forlani M. 8 gennaio 2014 Indice 1 Introduzione 2 2 Analisi del sito al 31/12/2013 4 3 Obiettivi per l'anno 2014 7 4 Conclusioni 8 1 CAPITOLO

Dettagli

Capitolo 4 Pianificazione e Sviluppo di Web Part

Capitolo 4 Pianificazione e Sviluppo di Web Part Capitolo 4 Pianificazione e Sviluppo di Web Part Questo capitolo mostra come usare Microsoft Office XP Developer per personalizzare Microsoft SharePoint Portal Server 2001. Spiega come creare, aggiungere,

Dettagli

PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1

PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1 Pagina 1 Sommario...1 Apertura...2 Visualizzazioni...2 Elenco...2 Testo sul pulsante e altre informazioni...3 Comandi...3 Informazioni...4 Flow chart...5 Comandi...6 Pulsanti Principali e Pulsanti Dipendenti...6

Dettagli

Rapporto conclusivo di accessibilità

Rapporto conclusivo di accessibilità Rapporto conclusivo di accessibilità Modello per soggetti di cui all articolo 3, comma 1, della legge gennaio 2004, n. Soggetto interessato: Responsabile dell accessibilità: URL del sito web in oggetto:

Dettagli

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi> FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare

Dettagli

LINEE GUIDA PER LA REALIZZAZIONE AUTONOMA DI SITI WEB E STAMPATI DEI CORSI DI DOTTORATO

LINEE GUIDA PER LA REALIZZAZIONE AUTONOMA DI SITI WEB E STAMPATI DEI CORSI DI DOTTORATO Area Comunicazione e Relazioni Esterne Servizio web e grafica di Ateneo LINEE GUIDA PER LA REALIZZAZIONE AUTONOMA DI SITI WEB E STAMPATI DEI CORSI DI DOTTORATO La presente guida vuole essere un supporto

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

Accessibilità del sito web del Comune di Triggiano

Accessibilità del sito web del Comune di Triggiano Accessibilità del sito web del Comune di Triggiano Il Comune di Triggiano, già attento nella precedente versione del suo sito web al tema dell'accessibilità delle informazioni, ha riprogrammato tutte le

Dettagli

HTML+XML= XHTML. Che cos è l XHTML

HTML+XML= XHTML. Che cos è l XHTML HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione

Dettagli

Spazio Commerciale. Le tue vendite, il nostro successo. Manuale Operativo. Guida inserimento articoli tramite Area di amministrazione.

Spazio Commerciale. Le tue vendite, il nostro successo. Manuale Operativo. Guida inserimento articoli tramite Area di amministrazione. Manuale Operativo Guida inserimento articoli tramite Area di amministrazione Pagina 1 di 8 Indice Generale 1. Sommario 2. Introduzione 3. Glossario 4. Accesso all'interfaccia 5. Icone e funzionalità 5.1.

Dettagli

A tal fine il presente documento si compone di tre distinte sezioni:

A tal fine il presente documento si compone di tre distinte sezioni: Guida on-line all adempimento Questa guida vuole essere un supporto per le pubbliche amministrazioni, nella compilazione e nella successiva pubblicazione dei dati riguardanti i dirigenti sui siti istituzionali

Dettagli

UN MODELLO DI QUALITÀ PER I SITI WEB

UN MODELLO DI QUALITÀ PER I SITI WEB UN MODELLO DI QUALITÀ PER I SITI WEB fonte prof Polillo - 1 - Cos'è un modello di qualità l Una selezione delle caratteristiche che fanno di un sito web un buon sito l Scopo: valutare un sito orientarci

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

capitolo 8 LA CHECKLIST PER LA VALUTV ALUTAZIONEAZIONE TECNOLOGICA

capitolo 8 LA CHECKLIST PER LA VALUTV ALUTAZIONEAZIONE TECNOLOGICA capitolo 8 LA CHECKLIST PER LA VALUTV ALUTAZIONEAZIONE TECNOLOGICA 8.1 ISTRUZIONI PER IL VALUTATORE Campioni Il processo di valutazione tecnologica si basa su un campione del prodotto, precedentemente

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

Tecniche di accessibilità web

Tecniche di accessibilità web Valutazione e kit dell accessibilità Decreto ministeriale dell 8 luglio 2005 Requisiti tecnici e i diversi livelli per l accessibilità agli strumenti informatici, www.pubbliaccesso.gov.it/normative/dm080705.htm

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Requisito n. 1 : Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili

Dettagli

REQUISITO DI ACCESSIBILITA

REQUISITO DI ACCESSIBILITA ISTITUTO COMPRENSIVO Pascoli - Crispi Via Gran Priorato, 11-98121 Messina Via Monsignor D'Arrigo, 18-98122 Messina Tel/Fax. 09047030 090360037 e-mail: meic87300t@istruzione.it / meee00800r@istruzione.it

Dettagli

Università della Svizzera italiana

Università della Svizzera italiana Università della Svizzera italiana Il sito dell Università della Svizzera italiana e l accessibilità Vs.1.0 11 / 12 / 2007 TEC-LAB WEB-SERVICE 1. INTRODUZIONE Avere accesso al web, per un utente disabile,

Dettagli

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

Rich Media Communication Using Flash CS5

Rich Media Communication Using Flash CS5 Rich Media Communication Using Flash CS5 Dominio 1.0 Impostare i requisiti del progetto 1.1 Individuare lo scopo, i destinatari e le loro esigenze per i contenuti multimediali. 1.2 dentificare i contenuti

Dettagli

ALBO PRETORIO WEB MANUALE DELLA PROCEDURA SOMMARIO. Uso del manuale. Informazioni generali. Interfaccia grafica. Guida di riferimento

ALBO PRETORIO WEB MANUALE DELLA PROCEDURA SOMMARIO. Uso del manuale. Informazioni generali. Interfaccia grafica. Guida di riferimento #K$+ SOMMARIO ALBO PRETORIO WEB SOMMARIO Uso del manuale Informazioni generali Interfaccia grafica Guida di riferimento Guida alle operazioni ricorrenti Appendici # 000 K SOMMARIO $ SOMMARIO + 00001 Pagina

Dettagli

CMS ERMES INFORMATICA

CMS ERMES INFORMATICA 01/07/2014 Guida di riferimento alla pubblicazione di contenuti sul portale Il presente documento costituisce una guida di riferimento all aggiornamento e alla pubblicazione di contenuti sui portali web

Dettagli

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine www.comune.udine.it relazione a cura di Fabrizio Chittaro fchittaro@gmail.com

Dettagli

Rapporto conclusivo di accessibilità

Rapporto conclusivo di accessibilità Rapporto conclusivo di accessibilità Modello per i soggetti di cui all articolo 3, comma 1, della legge 9 gennaio 2004, n. 4 Soggetto interessato: Comune di Ussaramanna Responsabile dell accessibilità:

Dettagli

GUIDA ALL HTML. Creato da SUPREMO KING

GUIDA ALL HTML. Creato da SUPREMO KING GUIDA ALL HTML Creato da SUPREMO_KING 1 PREMESSE L html è il linguaggio fondamentale attraverso il quale è possibile creare delle semplici pagine web. L html non è un linguaggio di programmazione ma un

Dettagli

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 Le pagine del sito istituzionale e dei siti tematici del Comune di Pesaro sono state progettate

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW 1 INTRODUZIONE AL LINGUAGGIO HTML Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML 3 Architettura

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento

Dettagli

NAVIGAORA HOTSPOT. Manuale utente per la configurazione

NAVIGAORA HOTSPOT. Manuale utente per la configurazione NAVIGAORA HOTSPOT Manuale utente per la configurazione NAVIGAORA Hotspot è l innovativo servizio che offre ai suoi clienti accesso ad Internet gratuito, in modo semplice e veloce, grazie al collegamento

Dettagli

Obiettivi di accessibilità per l anno 2015

Obiettivi di accessibilità per l anno 2015 COMUNE DI CARLOFORTE Obiettivi di accessibilità per l anno Redatto ai sensi dell articolo 9, comma 7 del decreto legge 18 ottobre 2012, n. 179. Redatto il 27/03/ 1 SOMMARIO Obiettivi di accessibilità per

Dettagli

Esercitazione n. 10: HTML e primo sito web

Esercitazione n. 10: HTML e primo sito web + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine

Dettagli

Software Gestionale Politiche Giovanili

Software Gestionale Politiche Giovanili Software Gestionale Politiche Giovanili Guida all Uso Progettisti e Referenti tecnico-organizzativi Edizione 2012 1 INDICE DEI CONTENUTI: 1. NOZIONI GENERALI E ACCESSO AL SISTEMA 1.1 Requisiti di sistema...

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

Guida alla registrazione on-line di un DataLogger

Guida alla registrazione on-line di un DataLogger NovaProject s.r.l. Guida alla registrazione on-line di un DataLogger Revisione 3.0 3/08/2010 Partita IVA / Codice Fiscale: 03034090542 pag. 1 di 17 Contenuti Il presente documento è una guida all accesso

Dettagli

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,

Dettagli

MANUALE D'USO DEL PROGRAMMA IMMOBIPHONE

MANUALE D'USO DEL PROGRAMMA IMMOBIPHONE 1/6 MANUALE D'USO DEL PROGRAMMA IMMOBIPHONE Per prima cosa si ringrazia per aver scelto ImmobiPhone e per aver dato fiducia al suo autore. Il presente documento istruisce l'utilizzatore sull'uso del programma

Dettagli

MANUALE UTENTE. P.I.S.A. Progetto Informatico Sindaci Asl

MANUALE UTENTE. P.I.S.A. Progetto Informatico Sindaci Asl MINISTERO DELL ECONOMIA E DELLE FINANZE DIPARTIMENTO DELLA RAGIONERIA GENERALE DELLO STATO Ispettorato Generale di Finanza MANUALE UTENTE P.I.S.A. Progetto Informatico Sindaci Asl Versione 1.0 INDICE

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

Analisi Accessibilità Diagnosi funzionale Ver. 1.0

Analisi Accessibilità Diagnosi funzionale Ver. 1.0 Analisi Accessibilità Diagnosi funzionale Ver. 1.0 Rapporto conclusivo di accessibilità... 2 Sommario della verifica tecnica e requisiti tecnici di accessibilità delle applicazioni basate su tecnologie

Dettagli

LABORATORIO PER IL DESIGN DELLE INTERFACCE PEGORARO ALESSANDRO CASSERO.IT MANUALE DI AGGIORNAMENTO, MANUTENZIONE E USO DEL SITO

LABORATORIO PER IL DESIGN DELLE INTERFACCE PEGORARO ALESSANDRO CASSERO.IT MANUALE DI AGGIORNAMENTO, MANUTENZIONE E USO DEL SITO CASSERO.IT MANUALE DI AGGIORNAMENTO, MANUTENZIONE E USO DEL SITO 1 Installazione e requisiti per il corretto funzionamento del sito: L istallazione è possibile sui più diffusi sistemi operativi. Il pacchetto

Dettagli

FISH Sardegna ONLUS. www.fishsardegna.org. Manuale Utente. www.fishsardegna.org

FISH Sardegna ONLUS. www.fishsardegna.org. Manuale Utente. www.fishsardegna.org FISH Sardegna ONLUS Manuale Utente Note generali: Il sito è costruito su CMS Drupal 7. Per avere maggiori informazioni su Drupal si puo consultare online il portale ufficiale http://drupal.org/( in inglese)

Dettagli

Creare un Ipertesto. www.vincenzocalabro.it 1

Creare un Ipertesto. www.vincenzocalabro.it 1 Creare un Ipertesto www.vincenzocalabro.it 1 Obiettivi Il corso si prefigge di fornire: Le nozioni tecniche di base per creare un Ipertesto I consigli utili per predisporre il layout dei documenti L illustrazione

Dettagli

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

Capitolato per la selezione di una cooperativa sociale di tipo b per la realizzazione di attività relative all ambito disabilità e protezione civile

Capitolato per la selezione di una cooperativa sociale di tipo b per la realizzazione di attività relative all ambito disabilità e protezione civile Capitolato per la selezione di una cooperativa sociale di tipo b per la realizzazione di attività relative all ambito disabilità e protezione civile Obiettivi specifici Per il generale, si individuano

Dettagli

Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste

Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste versione 2.1 24/09/2015 aggiornamenti: 23-set-2015; 24-set-2015 Autore: Francesco Brunetta (http://www.francescobrunetta.it/)

Dettagli

Rapporto conclusivo di accessibilità

Rapporto conclusivo di accessibilità Rapporto conclusivo di accessibilità Modello per i soggetti di cui all articolo 3, comma 1, della legge 9 gennaio 2004, n. 4 Soggetto interessato: CONGLIO REGIONALE DELLA PUGLIA Responsabile dell accessibilità:

Dettagli

Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti

Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti Capitolo 3 L applicazione Java Diagrammi ER Dopo le fasi di analisi, progettazione ed implementazione il software è stato compilato ed ora è pronto all uso; in questo capitolo mostreremo passo passo tutta

Dettagli

Risultati della validazione (Linee Guida: Stanca) Report relativo agli errori ( individuati, 0 Istanze): Congratulazioni! Nessun errore individuato.

Risultati della validazione (Linee Guida: Stanca) Report relativo agli errori ( individuati, 0 Istanze): Congratulazioni! Nessun errore individuato. 09/02/2014 22:38 URL del file sorgente: http://lnx.isusanpaolo.it/joomlafap2/ Titolo del file sorgente: Home Risultati della validazione (Linee Guida: Stanca) Report relativo agli errori ( individuati,

Dettagli

A tal fine il presente documento si compone di tre distinte sezioni:

A tal fine il presente documento si compone di tre distinte sezioni: Guida on-line all adempimento Questa guida vuole essere un supporto per le pubbliche amministrazioni, nella compilazione e nella successiva pubblicazione dei dati riguardanti i dirigenti sui siti istituzionali

Dettagli

La qualità della comunicazione web

La qualità della comunicazione web La qualità della comunicazione web Incontro presso la Regione Calabria Dipartimento Presidenza Settore Internazionalizzazione, Cooperazione e Politiche di sviluppo Euro- Mediterranee Catanzaro, 6 novembre

Dettagli

AUTOAGGIORNAMENTO DOCUMENTI ACCESSIBILI e USABILI

AUTOAGGIORNAMENTO DOCUMENTI ACCESSIBILI e USABILI AUTOAGGIORNAMENTO DOCUMENTI ACCESSIBILI e USABILI Cosa è l accessibilità? Legge Stanca del 9 gennaio 2004 che regola la forma e i contenuti dei siti web delle P.A L «accessibilità» è la capacità dei sistemi

Dettagli

Manuale Utente Albo Pretorio GA

Manuale Utente Albo Pretorio GA Manuale Utente Albo Pretorio GA IDENTIFICATIVO DOCUMENTO MU_ALBOPRETORIO-GA_1.4 Versione 1.4 Data edizione 04.04.2013 1 TABELLA DELLE VERSIONI Versione Data Paragrafo Descrizione delle modifiche apportate

Dettagli

1- OBIETTIVI DEL DOCUMENTO 2- INTRODUZIONE

1- OBIETTIVI DEL DOCUMENTO 2- INTRODUZIONE 1- OBIETTIVI DEL DOCUMENTO... 1 2- INTRODUZIONE... 1 3- ACCESSO ALLA PROCEDURA... 2 4- COMPILAZIONE ON-LINE... 4 5- SCELTA DELLA REGIONE O PROVINCIA AUTONOMA... 5 6- DATI ANAGRAFICI... 6 7- DATI ANAGRAFICI

Dettagli

«Gestione dei documenti e delle registrazioni» 1 SCOPO... 2 2 CAMPO DI APPLICAZIONE E GENERALITA... 2 3 RESPONSABILITA... 2 4 DEFINIZIONI...

«Gestione dei documenti e delle registrazioni» 1 SCOPO... 2 2 CAMPO DI APPLICAZIONE E GENERALITA... 2 3 RESPONSABILITA... 2 4 DEFINIZIONI... Pagina 1 di 6 INDICE 1 SCOPO... 2 2 CAMPO DI APPLICAZIONE E GENERALITA... 2 3 RESPONSABILITA... 2 4 DEFINIZIONI... 2 5 RESPONSABILITA... 2 5.3 DESTINATARIO DELLA DOCUMENTAZIONE... 3 6 PROCEDURA... 3 6.1

Dettagli

HTML il linguaggio per creare le pagine per il web

HTML il linguaggio per creare le pagine per il web HTML il linguaggio per creare le pagine per il web Parte I: elementi di base World Wide Web Si basa sul protocollo HTTP ed è la vera novità degli anni 90 Sviluppato presso il CERN di Ginevra è il più potente

Dettagli

UTILIZZATORI A VALLE: COME RENDERE NOTI GLI USI AI FORNITORI

UTILIZZATORI A VALLE: COME RENDERE NOTI GLI USI AI FORNITORI UTILIZZATORI A VALLE: COME RENDERE NOTI GLI USI AI FORNITORI Un utilizzatore a valle di sostanze chimiche dovrebbe informare i propri fornitori riguardo al suo utilizzo delle sostanze (come tali o all

Dettagli

INDICE. Accesso al Portale Pag. 2. Nuovo preventivo - Ricerca articoli. Pag. 4. Nuovo preventivo Ordine. Pag. 6. Modificare il preventivo. Pag.

INDICE. Accesso al Portale Pag. 2. Nuovo preventivo - Ricerca articoli. Pag. 4. Nuovo preventivo Ordine. Pag. 6. Modificare il preventivo. Pag. Gentile Cliente, benvenuto nel Portale on-line dell Elettrica. Attraverso il nostro Portale potrà: consultare la disponibilità dei prodotti nei nostri magazzini, fare ordini, consultare i suoi prezzi personalizzati,

Dettagli

Riconoscibilità dei siti pubblici: i domini della Pa e le regole di.gov.it

Riconoscibilità dei siti pubblici: i domini della Pa e le regole di.gov.it Riconoscibilità dei siti pubblici: i domini della Pa e le regole di.gov.it Gabriella Calderisi - DigitPA 2 dicembre 2010 Dicembre 2010 Dominio.gov.it Cos è un dominio? Se Internet è una grande città, i

Dettagli

ShellExcel. Una domanda contiene i riferimenti (#A, #B, #C) alle celle che contengono i dati numerici del

ShellExcel. Una domanda contiene i riferimenti (#A, #B, #C) alle celle che contengono i dati numerici del Progetto Software to Fit - ShellExcel Pagina 1 Manuale d'uso ShellExcel ShellExcel è una interfaccia per disabili che permette ad un alunno con difficoltà di apprendimento di esercitarsi ripetitivamente

Dettagli

Portale tirocini. Manuale utente Per la gestione del Progetto Formativo

Portale tirocini. Manuale utente Per la gestione del Progetto Formativo GESTIONE PROGETTO FORMATIVO Pag. 1 di 38 Portale tirocini Manuale utente Per la gestione del Progetto Formativo GESTIONE PROGETTO FORMATIVO Pag. 2 di 38 INDICE 1. INTRODUZIONE... 3 2. ACCESSO AL SISTEMA...

Dettagli

Modulo 3 - Elaborazione Testi 3.6 Preparazione stampa

Modulo 3 - Elaborazione Testi 3.6 Preparazione stampa Università degli Studi dell Aquila Corso ECDL programma START Modulo 3 - Elaborazione Testi 3.6 Preparazione stampa Maria Maddalena Fornari Impostazioni di pagina: orientamento È possibile modificare le

Dettagli

Guida Compilazione Piani di Studio on-line

Guida Compilazione Piani di Studio on-line Guida Compilazione Piani di Studio on-line SIA (Sistemi Informativi d Ateneo) Visualizzazione e presentazione piani di studio ordinamento 509 e 270 Università della Calabria (Unità organizzativa complessa-

Dettagli

Accessibilità per siti web e applicazioni. Qualificazione dei prodotti di back office Linee Guida RER

Accessibilità per siti web e applicazioni. Qualificazione dei prodotti di back office Linee Guida RER Accessibilità per siti web e applicazioni Qualificazione dei prodotti di back office Linee Guida RER 1 Cliente Redatto da Verificato da Approvato da Regione Emilia-Romagna CCD CCD Nicola Cracchi Bianchi

Dettagli

Sistema Informativo di Teleraccolta EMITTENTI

Sistema Informativo di Teleraccolta EMITTENTI Sistema Informativo di EMITTENTI aventi l Italia come Stato membro di origine i cui valori mobiliari sono ammessi alla negoziazione in un altro Stato membro dell Unione Europea Art. 116 bis, comma 1, del

Dettagli

SCENARIO. Personas. 2010 ALICE Lucchin / BENITO Condemi de Felice. All rights reserved.

SCENARIO. Personas. 2010 ALICE Lucchin / BENITO Condemi de Felice. All rights reserved. SCENARIO Personas SCENARIO È una delle tecniche che aiuta il designer a far emergere le esigente dell utente e il contesto d uso. Gli scenari hanno un ambientazione, attori (personas) con degli obiettivi,

Dettagli

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. **********

Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Prime nozioni: Tag e prima pagina, continuazione. Nota bene, al fine di avere anche

Dettagli

Obiettivi di accessibilità per l anno

Obiettivi di accessibilità per l anno Obiettivi di accessibilità per l anno Redatto ai sensi dell articolo 9, comma 7 del decreto legge 18 ottobre 2012, n. 179. 1 Premessa L articolo 9, comma 7, del decreto legge 18 ottobre 2012, n. 179 stabilisce

Dettagli

Gestione dei documenti e delle registrazioni Rev. 00 del 11.11.08

Gestione dei documenti e delle registrazioni Rev. 00 del 11.11.08 1. DISTRIBUZIONE A tutti i membri dell organizzazione ING. TOMMASO 2. SCOPO Descrivere la gestione della documentazione e delle registrazioni del sistema di gestione 3. APPLICABILITÀ La presente procedura

Dettagli

Direzione Centrale per le Politiche dell Immigrazione e dell Asilo

Direzione Centrale per le Politiche dell Immigrazione e dell Asilo Direzione Centrale per le Politiche dell Immigrazione e dell Asilo Sistema inoltro telematico domande di nulla osta, ricongiungimento e conversioni Manuale utente Versione 2 Data creazione 02/11/2007 12.14.00

Dettagli

Relazione finale gruppo di lavoro sito web istituzionale a.s. 2013-2014

Relazione finale gruppo di lavoro sito web istituzionale a.s. 2013-2014 Relazione finale gruppo di lavoro sito web istituzionale a.s. 2013-2014 Grazie a tutti coloro che hanno contribuito alla costruzione e all aggiornamento del sito, in particolar modo alle referenti di plesso

Dettagli