Web Design 1

Usabilità e Accessibilità

• ISO 9241-11:1998: l’usabilità è “l’efficacia, l’efficienza e la soddisfazione con cui specifici utenti raggiungono specifici obiettivi in particolari ambienti”.

• ISO TS 16071: L’accessibilità è “l’usabilità di un prodotto, servizio, ambiente o strumento, per persone col più ampio raggio di capacità”. Fruibile da chiunque

Web Design 2

Usabilità e Accessibilità• Un sito web è usabile quando soddisfa i bisogni

informativi dell'utente che lo sta visitando, fornendogli facilità di accesso e navigabilità e consentendo un

adeguato livello di comprensione dei contenuti…

Web Design 3

Accessibilità: una definizione

•Un sito web è accessibile quando la sua interfaccia è fruibile indipendentemente da:

– Browser (browser grafici, testuali, vocali…);– Periferiche di input / output (tastiera, schermo,

mouse, barre braille ecc.– Canale sensoriale utilizzato per l’interazione (vista,

udito, tatto);– Abilità psico-motorie dell’utente;– Abilità percettive dell’utente;– Connettività (LAN, Modem, GPRS ecc.);– Hardware e software (Palmari, Desktop, WebTV

ecc.);

Web Design 4

Usabilità e Accessibilità

• L’usabilità non può essere progettata a prescindere dagli utenti che utilizzano effettivamente il sito, dagli obiettivi che questi cercano di raggiungere, dall’ambiente in cui ciò avviene.

• L’accessibilità deve essere progettata tenendo bene in mente le esigenze dell’ampio numero di persone disabili, o che hanno tecnologie obsolete, o che si collegano al web con dispositivi diversi dal computer.

Web Design 5

Cosa hanno in comune l’usabilità e l’accessibilità?

L’utente

Un progetto di usabilità pone gli utenti al centro.

Un progetto di accessibilità pone al centro gli utenti disabili o con problemi di accesso alla rete.

Progettare un sito usabile e accessibile è un processo user-centered.

Web Design 6

Principi di design universale

• L’accessibilità web ha come suo antecedente culturale il concetto di “design universale”:

Principi di design volti a progettare e realizzare oggetti utilizzabili da chiunque e che non precludano l’interazione alle categorie di utenti più marginali (disabili permanenti e temporanei, anziani ecc.)

Dal design dell’oggetto non traggono vantaggio solo le categorie marginali ma tutti ricevono un beneficio (es. rampe d’accesso)

Esistono 7 linee guida che dovrebbero ispirare il lavoro di tutti coloro che realizzano artefatti utilizzati da altre persone (architetti, designer, grafici, programmatori ecc.);

Web Design 7

Principi di design universale (2)

1. Equità d’uso;2. Flessibilità d’uso;3. Uso semplice e intuitivo;4. Informazione accessibile;5. Tolleranza agli errori;6. Sforzo fisico minimo;7. Dimensione e spazio d’uso adatti a qualsiasi utente;

questi principi si possono applicare indifferentemente a una sedia così come a un sito web… anche perché sono eccessivamente generali e generici.

Web Design 8

Utenti diversamente abili

• Disabilità della vista

• Disabilità dell’udito

• Disabilità motorie emulatori di mouse,

testiera, ingrandimento di oggetti

• Disabilità cognitive evitare immagini in

movimento veloce

Web Design 9

Quindi gli utenti…

• Possono non essere in grado di vedere, ascoltare o muoversi

• Possono non essere in grado di trattare alcuni tipi di informazioni facilmente o del tutto.

• Possono avere difficoltà nella lettura o nella comprensione del testo.

• Possono non avere o non essere in grado di usare una tastiera o un mouse.

• Possono avere uno schermo solo testuale, un piccolo schermo o una connessione Internet molto lenta.

Web Design 10

Utenti con limitazioni all’accesso…

• Possono non parlare e capire fluentemente la lingua in cui il documento è scritto.

• Possono trovarsi in una situazione in cui i loro occhi, orecchie o mani sono occupati o impediti (ad es., stanno guidando, lavorano in un ambiente rumoroso, ecc.).

• Possono avere la versione precedente di un browser, un browser completamente diverso, un browser basato su dispositivi di sintesi vocale o un diverso sistema operativo.

Web Design 11

Le tecnologie assistive• Tecnologie di ausilio a portatori di handicap nella fruizione dei

servizi informatici:

– Screen reader:• Jaws;• Windows Eye;• IBM Home Page Reader;

– Display (Barre) Braille;

– Screen Magnifier;

– Browser testuali• Lynx;

Web Design 12

Il quadro normativo di riferimento • USA:

– Section 508 (1998)• emendamento del Rehabilitation Act che richiede la

conformità ad un insieme di punti di controllo per la realizzazione di servizi digitali offerti / per la pubblica amministrazione;

• http://www.access-board.gov/sec508/508standards.htm

• Unione Europea: – Piano d’azione eEurope 2002

• Reclama la necessità di adottare l’accessibilità come requisito fondamentale dei servizi informatici;

• Indica le linee guida dettate dal W3C come punto di riferimento;

– Risoluzione della Commissione Europea del 3 gennaio 2003;

Web Design 13

Il quadro normativo di riferimento

• Italia:– Circolare AIPA (6 settembre 2001): il consiglio dei ministri

aveva aderito al W3C• Indica le linee guida del W3C come modello cui

uniformarsi progettazione universale;• Non viene indicato alcun obbligo ma solo una richiesta di

conformità;2003 anno europeo dei disabili

– Libro bianco di Lucio Stanca (Ministro per l’innovazione e le tecnologie):

• Analisi esaustiva della tematica;• Detta l’orientamento che le successive deliberazioni

dovranno possedere;

Web Design 14

Il quadro normativo di riferimento

– Dicembre 2003 Approvazione della Legge Stanca "Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici".

• Ad esso seguono numerose altre iniziative legislative, alla fine unificate nel testo di legge approvato nel dicembre 2003.

– Legge Stanca del 2004 lavoro di sintesi• Sancito il diritto di ciascun individuo ad accedere a tutte le

fonti informative e rende obbligatorio che tale accesso sia garantito dalla pubblica amministrazione e dagli enti di pubblica utilità (es. scuole e biblioteche)

• Le PA sono obbligate a seguire la legge, i privati incentivati• Regolamento di attuazione (90gg) e decreto legge (120gg)

con linee guida e metodologia

Web Design 15

La Web Accessibility Initiative• Nel 1996 è stato creato il WAI allo scopo di stendere un

insieme di linee guida da applicare agli strumenti informatici legati al WWW.

• Sono così nate:– WCAG:Web Content Accessibility Guidelines (le pagine

web);– UAAG: User Agent Accessibility Guidelines (gli strumenti di

navigazione);– ATAG: Authoring Tool Accessibility Guidelines (editor, CMS

ecc.);– XAG: XML Accessibility Guidelines (linee guida che i

linguaggi basati su XML devono seguire, es. SMIL, RSS ecc);

• http://www.w3.org/WAI/

Web Design 16

Le WCAG

• 2 temi fondamentali;• 14 linee guida;• 65 punti di controllo;• 3 livelli di conformità;

Web Design 17

Le WCAG: temi fondamentali

• Indicano le due anime delle WCAG:

• “Assicurare una trasformazione elegante” Le pagine devono essere ugualmente fruibili

indipendentemente da device, abilità, software, capacità percettive ecc. (aspetto più tecnico)

• “Rendere il contenuto comprensibile e navigabile” l’accessibilità non è solo un fatto tecnico/percettivo,

ma anche e soprattutto psicologico-cognitivo;

Web Design 18

Assicurare una trasformazione elegante (linee

guida 1-11)• Separare la struttura dalla presentazione• Fornire testo (compresi gli equivalenti testuali)• Creare documenti funzionanti nonostante l’utente non

possa vedere e/o sentire• Creare documenti che non si basino su uno specifico

hardware

Web Design 19

Rendere il contenuto comprensibile e navigabile (linee

guida 12-14)• Dovreste già essere in grado • La navigazione e l’orientamento devono essere

massimizzate in qualsiasi condizione

Web Design 20

Le WCAG: punti di controllo

• I punti di controllo sono articolati in 3 livelli di priorità:

– Priorità 1: punti che devono essere soddisfatti, pena l’inaccessibilità di molte categorie di utenti (accessibilità base);

– Priorità 2: punti che dovrebbero essere soddisfatti, pena la difficoltà d’accesso di alcune categorie di utenti (rimozione di barriere significative);

– Priorità 3: punti che potrebbero essere soddisfatti, pena l’ostacolo all’accesso di alcune categorie di utenti (miglioramento dell’accessibilità);

Web Design 21

Le WCAG: livelli di conformità

• Assolvendo tutti i punti di controllo di un dato livello di priorità, ottengo un corrispettivo livello di conformità:

– Priorità 1 => Conformità “A”;

– Priorità 2 => Conformità “Doppia-A”;

– Priorità 3 => Conformità “Tripla-A”;

Web Design 22

WCAG 1.0WCAG 1.0

Fornire un contenuto che, quando viene presentato all'utente, gli trasmetta essenzialmente la stessa funzione o scopo del contenuto audio o visivo.

• Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo

Web Design 23

Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo

» 1.1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio,

mediante "alt", "longdesc" o contenuto nell'elemento stesso). [Priorità 1]» 1.2 Fornire ridondanti collegamenti di testo per ogni zona attiva di una immagine

sensibile sul lato server. [Priorità 1]» 1.3 Fino a quando gli interpreti non potranno leggere automaticamente ad alta

voce l'equivalente testuale di un filmato, fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale. [Priorità 1]

Web Design 24

Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo

» 1.4 Per ogni presentazione multimediale temporizzata (per es. un film

o una animazione), sincronizzare alternative equivalenti (per es. didascalie o descrizioni parlate del filmato) con la presentazione. [Priorità 1]

» 1.5 Fino a quando gli interpreti non renderanno disponibili equivalenti testuali per collegamenti di immagini sensibili sul lato client fornire collegamenti di testo ridondanti per ogni zona attiva di una immagine sensibile sul lato client. [Priorità 3]

Web Design 25

WCAG 1.0WCAG 1.0

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

• Linea guida 2. Non fare affidamento sul solo colore.

Web Design 26

Linea guida 2. Non fare affidamento sul solo colore.

» 2.1 Assicurarsi che tutta l'informazione veicolata dal colore

sia disponibile anche senza, per esempio grazie al contesto o ai marcatori. [Priorità 1]

» 2.2 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in bianco e nero. [Priorità 2 per le immagini, Priorità 3 per il testo].

Web Design 27

WCAG 1.0WCAG 1.0

Marcare i documenti con i corretti elementi strutturali. Controllare lapresentazione con fogli di stile piuttosto che con elementi e attributi di presentazione.

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

Web Design 28

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

» 3.1 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un

marcatore piuttosto che le immagini. [Priorità 2]» 3.2 Creare documenti che facciano riferimento a grammatiche formali pubblicate. (DTD)

[Priorità 2]» 3.3 Usare fogli di stile per controllare l'impaginazione e la presentazione. [Priorità 2]» 3.4 Usare unità relative e non assolute nei valori degli attributi del linguaggio dei

marcatori e i valori della proprietà del foglio di stile. [Priorità 2]» 3.5 Usare elementi di intestazione per veicolare la struttura del documento e usarli in

modo conforme alle specifiche. (H1)[Priorità 2]

Web Design 29

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

» 3.6 Marcare le liste ed elencare le voci della lista in modo appropriato. [Priorità 2]

» 3.7 Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formato come il rientro. [Priorità 2]

Web Design 30

WCAG 1.0WCAG 1.0

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

• Linea guida 4. Chiarire l'uso di linguaggi naturali.

Web Design 31

Linea guida 4. Chiarire l'uso di linguaggi naturali.

» 4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie).[Priorità 1]

» 4.2 Specificare lo scioglimento di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta. [Priorità 3]

» 4.3 Identificare il linguaggio naturale principale di un documento. [Priorità 3]

Web Design 32

WCAG 1.0WCAG 1.0

Assicurarsi che le tabelle abbiano la marcatura necessaria per essere trasformate dai browser accessibili e da altri interpreti.

• Linea guida 5. Creare tabelle che si trasformino in maniera elegante.

Web Design 33

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

» 5.1 Per tabelle di dati, identificare le intestazioni di righe e colonne. [Priorità 1]» 5.2 Per tabelle di dati che hanno due o più livelli logici di intestazioni di righe o

colonne, usare marcatori per associare le celle di dati e le celle di intestazione. [Priorità 1]

» 5.3 Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire una alternativa equivalente (che può essere una versione linearizzata). [Priorità 2]

Web Design 34

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

» 5.4 Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva. [Priorità 2]

» 5.5 Per le tabelle, fornire sommari. [Priorità 3]» 5.6 Fornire abbreviazioni per le etichette di

intestazione. [Priorità 3]

Web Design 35

WCAG 1.0WCAG 1.0

Assicurarsi che le pagine siano accessibili anche quando le tecnologie più recenti non sono supportate o sono disabilitate.

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

Web Design 36

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

elegante.

» 6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento. [Priorità 1]

» 6.2 Assicurarsi che gli equivalenti del contenuto dinamico vengano aggiornati quando il contenuto dinamico cambia. [Priorità 1]

» 6.3 Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa. [Priorità 1]

Web Design 37

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

elegante.

» 6.4 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. [Priorità 2]

» 6.5 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. [Priorità 2]

Web Design 38

WCAG 1.0WCAG 1.0

Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si autoaggiornano possano essere arrestati temporaneamente odefinitivamente.

• Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso del tempo.

Web Design 39

Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso

del tempo.

» 7.1 Fino a quando gli interpreti non permetteranno agli utenti di

controllare lo sfarfallìo, evitare di far sfarfallare lo schermo.[Priorità 1]» 7.2 Fino a quando gli interpreti non permetteranno agli utenti di

controllare il lampeggiamento, evitare di far lampeggiare il contenuto (cioè di cambiare la presentazione a intervalli regolari, come se si accendesse e spengesse). [Priorità 2]

» 7.3 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. [Priorità 2]

Web Design 40

Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso

del tempo.

» 7.4 Fino a quando gli interpreti non forniranno la possibilità di bloccare

l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente. [Priorità 2]

» 7.5 Fino a quando gli interpreti non forniranno la capacità di bloccare l'auto-reindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti. [Priorità 2]

Web Design 41

WCAG 1.0WCAG 1.0

Assicurarsi che la progettazione delle interfacce utente segua i principi dell'accessibilità: accesso alle diverse funzionalità indipendente dai dispositivi usati, possibilità di operare da tastiera, comandi vocali, ecc.

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

Web Design 42

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

» 8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive [Priorità 1 se la funzionalità è importante e non presentata altrove, altrimenti Priorità 2.]

Web Design 43

WCAG 1.0WCAG 1.0

Usare caratteristiche che permettono di attivare gli elementi della pagina attraverso una molteplicità di dispositivi di input.

• Linea guida 9. Progettare per garantire l'indipendenza da dispositivo.

Web Design 44

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

» 9.1 Fornire immagini sensibili sul lato client invece di immagini sensibili

sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida.[Priorità 1]

» 9.2 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo. [Priorità 2]

» 9.3 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo. [Priorità 2]

Web Design 45

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

» 9.4 Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti. [Priorità 3]

» 9.5 Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli. [Priorità 3]

Web Design 46

WCAG 1.0WCAG 1.0

Usare soluzioni provvisorie in modo che le tecnologie assistive e i browser più vecchi possano operare correttamente.

• Linea guida 10. Usare soluzioni provvisorie.

Web Design 47

Linea guida 10. Usare soluzioni provvisorie.

» 10.1 Fino a quando gli interpreti non permetteranno agli utenti di bloccare la generazione di nuove finestre, non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente. [Priorità 2]

» 10.2 Fino a quando gli interpreti non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente. [Priorità 2]

» 10.3 Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo corretto il testo affiancato, fornire un testo lineare alternativo (nella pagina attiva o in qualche altra) per tutte le tabelle che dispongono testo su colonne parallele e andando a capo. [Priorità 3]

Web Design 48

Linea guida 10. Usare soluzioni provvisorie.

» 10.4 Fino a quando gli interpreti non gestiranno in maniera corretta controlli vuoti, inserire caratteri di default come segnaposto nelle caselle per l'immissione di testo a una riga oppure a più righe.[Priorità 3]

» 10.5 Fino a quando gli interpreti (comprese le tecnologie assistive) non renderanno in modo distinto collegamenti adiacenti, inserire caratteri stampabili (delimitati da spazi), non facenti parte dei collegamenti, per separare i collegamenti adiacenti. [Priorità 3]

Web Design 49

WCAG 1.0WCAG 1.0

Usare le tecnologie del W3C (in conformità con le specifiche) e seguire le raccomandazioni sull'accessibilità. Nei casi in cui non sia possibile usare una tecnologia del W3C, oppure se nell'utilizzarla si ottenesse materiale che non si trasforma in maniera elegante, fornire una versione alternativa del contenuto che sia accessibile.

• Linea guida 11. Usare le tecnologie e le

raccomandazioni del W3C.

Web Design 50

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

» 11.1 Usare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito e usare le versioni più recenti quando sono supportate. [Priorità 2]

» 11.2 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate. [Priorità 2]» 11.3 Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti in

maniera che si adattino alle loro preferenze (per es., lingua, tipo di contenuto ecc.) [Priorità 3]» 11.4 Se, nonostante ogni sforzo, non si può creare una pagina accessibile, fornire un

collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) equivalenti, e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile. [Priorità 1]

Web Design 51

WCAG 1.0WCAG 1.0

Fornire informazione per la contestualizzazione e l'orientamento, per aiutare gli utenti a comprendere pagine od elementi complessi.

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

Web Design 52

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

» 12.1 Dare un titolo a ogni frame per facilitare l'identificazione del

frame e la navigazione. [Priorità 1] title» 12.2 Descrivere lo scopo dei frame e il modo in cui essi interagiscono

se non è evidente dai titoli dei frame da soli. [Priorità 2] longdesc» 12.3 Dividere grandi blocchi di informazione in gruppi più maneggevoli

quando è naturale ed appropriato. [Priorità 2] OPTGROUP» 12.4 Associare esplicitamente le etichette ai loro controlli. [Priorità 2]

Web Design 53

WCAG 1.0WCAG 1.0

Fornire chiari e coerenti meccanismi di navigazione -- informazione per l'orientamento, barre di navigazione, una mappa del sito, ecc. – per aumentare le probabilità che una persona trovi quello che sta cercando in un sito.

• Linea guida 13. Fornire chiari meccanismi di navigazione.

Web Design 54

Linea guida 13. Fornire chiari meccanismi di navigazione.

» 13.1 Identificare con chiarezza l'obiettivo di ogni collegamento. [Priorità 2]» 13.2 Fornire metadata per aggiungere informazione di tipo semantico alle pagine e ai siti. [Priorità 2]» 13.3 Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un

indice del sito). [Priorità 2]» 13.4 Usare meccanismi di navigazione in modo coerente. [Priorità 2]» 13.5 Fornire barre di navigazione per evidenziare e dare accesso ai meccanismi di navigazione.

[Priorità 3]» 13.6 Raggruppare i collegamenti correlati, identificare i gruppi (per gli interpreti) e, fino a quando gli

interpreti non lo fanno, fornire un modo per saltare il gruppo. [Priorità 3] dal title

Web Design 55

Linea guida 13. Fornire chiari meccanismi di navigazione.

» 13.7 Se sono fornite funzionalità di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilità e per preferenze diverse. [Priorità 3]

» 13.8 Posizionare l'informazione più significativa all'inizio delle intestazioni, dei paragrafi, delle liste, ecc. [Priorità 3]

» 13.9 Fornire informazione sulle raccolte di documenti (cioè documenti composti da più pagine). [Priorità 3] <link rel

» 13.10 Fornire un mezzo per saltare arte ASCII multilinea. [Priorità 3]

Web Design 56

WCAG 1.0WCAG 1.0

Assicurarsi che i documenti siano chiari e semplici in modo che possano essere compresi più facilmente.

• Linea guida 14. Assicurarsi che i documenti siano chiari e semplici.

Web Design 57

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

» 14.1 Usare il linguaggio più chiaro e semplice possibile che sia

adatto al contenuto di un sito. [Priorità 1]» 14.2 Integrare il testo con presentazioni grafiche o uditive nei

casi in cui esse possano facilitare la comprensione della pagina. [Priorità 3]

» 14.3 Creare uno stile di presentazione coerente fra le pagine. [Priorità 3]

Web Design 58

Il controllo e la valutazione dell’accessibilità

• Esistono 3 famiglie di metodi per valutare l’accessibilità:

1. Controlli automatici (validatori);

2. Metodi ispettivi (con esperti);

3. Test con utenti;

Qualitàdei risultati

Tempodi esecuzione

Web Design 59

La validazione automatica

• È un controllo puramente sintattico:

– Mi accorgo se è presente un testo alternativo, ma non se esso è efficiente dal punto di vista informativo;

– Può non accorgersi dell’uso improprio di alcuni tag e attributi;

– Non riesce ad accorgersi dei requisiti cognitivi dell’accessibilità (es. comprensibilità, navigabilità, percettibilità delle informazioni);

• È il giudizio di una macchina e non possiede il discernimento umano

Web Design 60

La validazione automatica

• Tuttavia…

– Consente di accorgersi di piccoli problemi e dimenticanze trascurate in fase di sviluppo;

– Fornisce un feedback interattivo sullo stato di accessibilità di un sito web;

– Sono ottimi strumenti di auto-formazione all’accessibilità;

Web Design 61

La validazione automatica

• Alcuni Link:

– Bobby: http://bobby.watchfire.com/bobby/html/en/index.jsp

– Torquemada: http://www.webxtutti.it/testa.htm

– Cynthia Says: http://www.contentquality.com/Default.asp

– Webxact: http://webxact.watchfire.com/

Web Design 62

Giorno 6: Indicate un DOCTYPE

• Iniziate le frasi con un lettera maiuscola; e dunque iniziate le pagine HTML con DOCTYPE. E' solo una regola di base

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose. dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Web Design 63

Giorno 7: Identificate la vostra lingua

<html lang=“it">

<html xmlns="http://www.w3.org/1999/xhtml" lang=“it" xml:lang=“it">

Web Design 64

Giorno 8: Date titoli significativi

• Dovreste già saperlo

Web Design 65

Giorno 9: Fornite ulteriori ausili alla navigazione

<link rel="home" title="Home" href="http://www.di.unito.it/~cgena/">

<link rel="prev" title="Dipartimento di informatica di Torino" href="http://www.di.unito.it/">

<link rel="next" title="Research Interest" href="http://www.di.unito.it/~cgena/research.html">

Web Design 66

Giorno 10: Presentate subito il contenuto principale

<table> <tr> <td valign="top" align="left"

width="25%"> ... navigation bar ... </td> <td valign="top" align="left"> ... main content ... </td> </tr> </table>

Web Design 67

Giorno 10: Presentate subito il contenuto principale

<table> <tr> <!-- spacer GIF in upper-left cell --> <td><img src="/images/1.gif" width="1" height="1" alt=""></td> <!-- main content cell first, with rowspan=2 --> <td valign="top" align="left" rowspan="2"> ... main content ... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... navigation bar ... </td> </tr> </table>

Web Design 68

Giorno 10: Presentate subito il contenuto principale

Web Design 69

Giorno 11: Saltate la barra di navigazione

<a href="#startcontent" accesskey="2" tabindex="2" class="skiplink">Skip over navigation</a>

.skiplink {display:none}

<a name="startcontent" id="startcontent"></a>

Web Design 70

Giorno 12: Usate i colori sicuri

a:link { blucolor: #0000FF}

a:hover { rossocolor: #FF0000}

a:visited { violacolor: #990099}

Web Design 71

Giorno 13: Usare link veri

<a href="javascript:rollover()">  

<a href="#" onClick="javascript: rollover();“ onKeyPress ="javascript: rollover();“ >

Web Design 72

Giorno 14: Aggiungete titoli ai link

<a href="fun.html" title="Pictures of Cristina and her friends and nice gadgets" class="nero" accesskey="6" tabindex="6">Fun [6] </a>

<a href="http://www.di.unito.it/" title="[external link]">Department of Computer Science</a>

Web Design 73

Giorno 15: Definite scorciatoie da tastiera

• tasto 1 - Home page •tasto 2 - Al contenuto principale (vedi saltate la barra di navigazione)

• tasto 3 - Indice • tasto 4 - Ricerca • tasto 8 - Termini d'uso • tasto 9 –Commenti <a href="mailto:cgena[at]di.unito.it" accesskey="9" tabindex="9“title="email me">cgena[at]di.unito.it</a>

• tasto 0 - Dichiarazione di accessibilità

Web Design 74

Giorno 16: Non aprite nuove finestre

<a … target="_blank">

esempio

Web Design 75

Giorno 17: Definite gli acronimi

<acronym title="Associazione italiana per l'intelligenza artificiale">AI*IA</acronym>

Web Design 76

Giorno 18: Date alle tabelle (vere) una vera didascalia

<caption align="bottom"> tabella di prova </caption>

esempio

Web Design 77

Giorno 19: Usate vere intestazioni di tabella

<th abbr="prova di intestazione abbreviata!">prova</th>

<th abbr="prova di intestazione abbreviata!">prova</th><th abbr="prova di intestazione abbreviata!">prova</th><th abbr="prova di intestazione abbreviata!">prova</th><th abbr="prova di intestazione abbreviata!">prova</th>

esempio

Web Design 78

Giorno 21: Ignorate le immagini con funzione

spaziatrice <table> <tr> <!-- spacer GIF in upper-left cell --> <td>

<img src="/images/1.gif" width="1" height="1" alt="">

</td> <!-- main content cell first, with rowspan=2 --> <td

valign="top" align="left" rowspan="2"> ... main content ... </td> </tr> <tr> <td valign="top" align="left" width="25%"> ... navigation bar ... </td> </tr> </table>

esempio

Web Design 79

Giorno 22: Usate liste vere (o fatele sembrare tali)

ul.lista1 li{list-style-type : circle;padding: 10px;

}

<ul class="lista1"><li>I received a degree in <a

href="http://www.scidecom.unito.it/" title="[external link]">Communication Science</a> at the <a href="http://www.unito.it/" title="[external link]">University of Torino</a> in 1998. </li>

… </ul>

Web Design 80

Giorno 22: Usate liste vere (o fatele sembrare tali)

ul.lista1 li{list-style: url(/images/fancydot.gif) disc; padding: 10px;

}

esempio

Web Design 81

Giorno 23: Fornite testi equivalenti per le immagini

<img src="img/criMalaga.jpg" alt="Cristina in 2002" width="100" height="107">

Web Design 82

Giorno 24: Fornite testi equivalenti per mappe di

immagini <img alt="Site navigation links" src="footer.gif"

width="500" height="212" usemap="#Map">

<map name="Map"> <area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html"> <area alt="by category" shape="rect" coords="277,113,348,129" href="/category/"> <area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html"> <area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html"> <area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org"> </map>

Web Design 83

Giorno 25: Usate barre orizzontali vere (o quasi)

div.hr {display: none}/*/*/a{} netscape4 e opera 5 MAC ignorano queste regolediv.hr {

display: block;height: 10px;background-image: url(img/griginohr.gif);background-repeat: repeat-x;background-position: center center;width: 80%;

}hr {display:none}/**/<div class="hr"></div><hr />ìesempio

Web Design 84

Giorno 26: Usate dimensioni relative per i font

p {font-size: 12px;}/*/*/a{} netscape4 e opera 5 MAC ignorano queste regolebody, body p, body td{

font-size: x-small;voice-family: "\"}\""; IE si ferma quivoice-family: inherit;font-size: small;padding: 10px;

} opera 5 html>body p, html>body td {font-size: small;}/* */

Web Design 85

Giorno 27: Usate intestazioni vere

<h1>, <h2>, <h3>

Web Design 86

Giorno 28: Etichettate gli elementi dei moduli

<label for="url">URL:</label><br />

<input id="url" name="url" /><br /><br />

<label for="text">Comments:</label><br />

<textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br />

<input type="checkbox" id="bakecookie" name="bakecookie" />

<label for="bakecookie">Remember info?</label><br /><br >

esempio

Web Design 87

Giorno 29: Rendete tutto ricercabile

…

accesskey="4"

Web Design 88

Giorno 30: Dichiarate il vostro livello di accessibilità

…

<a href="/accessibility_statement.html" title="accessibility features of this site" accesskey="0">Accessibility statement</a>

Web Design 89

La conformità

Questa pagina è conforme alle "Linee guida per l'accessibilità aicontenuti del Web 1.0" del W3C disponibili ahttp://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505, livelloDoppia-A.

• Specificare:Il titolo delle linee guida: "Linee guida per l'accessibilità ai contenuti

del• Web 1.0"• L'URI delle Linee Guida: http://www.w3.org/TR/1999/WAI-

WEBCONTENT-• 19990505• Il Livello di conformità: "A", "Doppia-A", o "Tripla-A".• L'ambito della dichiarazione (ad. es., pagina, sito, o una ben definita• porzione di un sito.).

Web Design 90

La conformità 2

Specificare:Includere, su ciascuna pagina che si dichiara conforme,una delle tre icone fornite dal W3C e collegare l'icona all'appropriata spiegazione W3Criguardante la dichiarazione. Informazioni circa le icone e su come inserirle all'interno delle pagine sono disponibili presso http://www.w3.org/WAI/WCAG1-Conformance.html

Web Design 91

La dichiarazione di accessibilità

• http://www.webaccessibile.org/argomenti/documento.asp?DocID=329

• http://www.m3lab.csp.it/index.php?IDpage=9• http://www.csp.it/access.php

Web Design 92

JAVASCRIPT

Web Design 93

Javascript

• Linguaggio di programmazione interpretato e leggero• Lato client e lato server• Può controllare il contenuto e il comportamento dei documenti

HTML• Accede a gerarchie di oggetti basate sul contenuto della pagina

web• DOM standard che specifica come il modo in cui i linguaggi

di script possono accedere alla struttura di un documento HTML e modificarla

Web Design 94

Rollover

<a href=“pippo.html” onMouseOver="document.immagine.src='img/pippo_on.gif;'"

onMouseOut="document. immagine.src='img/pippo_off.gif;'">

<img src="img/ pippo_off.gif" name=" immagine " border="0" width="121" height="33">

</a>

Web Design 95

window.open

<a href="#" onClick="window.open(‘nuovaFinestra.html',‘titolo finestra','width=560,height=430, top=100,left=200');">

Clicca qui per aprire la nuova finestra

</a>

http://javascript.about.com/library/weekly/aa031203a.htm

Web Design 96

window.status

<a href="javascript:void(0)" onMouseOver="(window.status='W il corso di web design');

return true">

Cambia la barra di stato

</a>

<body onLoad="(window.status='W il corso di web design');">

Web Design 97

Server side include

Web Design 98

SSI

• <--#include file="nomefile.htm" --> • Mettere su un server• Salvare come .shtml

Web Design 99

CSS 2

Web Design 100

Classificazione degli elementi

• Prima di addentrarci nei segreti di CSS è bene capire la distinzione tra gli elementi che possiamo trovare in un documento HTML.

• Gli elementi principali sono:

• Elementi blocco• Elementi inline• Elementi lista

• Esempio

Web Design 101

Elementi blocco• Gli elementi blocco sono i box che possono contenere altri elementi, sia di tipo

blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento.

• Sono elementi blocco: <center>, <div> , <form> , <h1>..<h6> , <hr> , <ol> , <p> , <table> , <ul> ,….

• ESEMPIO:

<h1>Titolo</h1><p>Paragrafo</p>

Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè <H1> e <P> sono elementi blocco.

Web Design 102

Elementi inline• Gli elementi inline non possono contenere elementi blocco, ma solo altri

elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto, essenzialmente testo o immagini).

• Sono elementi inline: <a> , <b> , <br> , <font> , <i> , <img> , <select> , <input> , <strong> , <textarea> ,…..

• Una terza categoria è quella degli elementi lista. Comprende soltanto l'elemento LI (list item).

Web Design 103

Come usare i Css?• Ci sono tre modalità valide, ognuna caratterizzata da alcuni aspetti:

• Fogli collegati (il classico tag <LINK ….> oppure l’attributo @import all’interno del tag <STYLE>)

<style type="text/css">

@import "stile.css" screen;

</style>

• Fogli incorporati• Fogli in linea

Web Design 104

L’attributo “Media”• Non solo i browser accedono al nostro sito.Anche palmari, cellulari e

altri dispositivi sono abilitati a farlo..e ognuno di questi ha caratteristiche diverse. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile.

• La soluzione ideale sta nella creazione di fogli di stile ad hoc.

• Esempi di sintassi:

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

< style type="text/css" media="screen">...</style>

Web Design 105

Quali dispositivi?

• all: Il CSS si applica a tutti i dispositivi di visualizzazione.• screen. Valore usato per la resa sui normali browser web.• print. Il CSS viene applicato in fase di stampa del

documento.• projection. Usato per presentazioni e proiezioni a tutto

schermo.• aural. Da usare per dispositivi come browser a sintesi

vocale.• braille. Il CSS viene usato per supporti basati sull'uso del

braille.• embossed. Per stampanti braille.• handheld. Palmari e simili.• tv.Web-tv.

Web Design 106

Cascade: concetti di basePer capire meglio il significato di “cascade” vediamo come si comporta un

browser di fronte a un foglio di stile (ex):

1. Per prima cosa controlla il target stabilito con l'attributo media o con dichiarazioni equivalenti. Scarta quindi tutti gli stili riferiti alla stampa o ad altri supporti. Allo stesso tempo scarta tutte le regole che non trovino corrispondenza negli elementi strutturali del documento.

2. Comincia ad ordinare per peso e origine secondo le regole viste sopra. Se c’è un Css definito dall’autore userà quello. Altrimenti verificherà la presenza di un foglio di stile utente e in sua assenza applicherà le regole stilistiche predefinite.

3. Quindi calcola la specificità dei selettori e in caso di conflitto tra regole usa questo criterio di prevalenza.

4. In generale gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.

Web Design 107

Box-model• Il box-model è uno degli elementi-cardine dei Css. L'insieme di regole che

gestisce l'aspetto visuale degli elementi blocco è in genere riferito a questo modello.

– l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Si può agire sulle dimensioni di quest’area con le proprietà width e height.

– il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento.

– il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.

– il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

• Esempio

Web Design 108

Css in pratica: sfondi• Ecco la lista delle proprietà, applicabili a tutti gli elementi (vantaggio di CSS!):

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

• Esempi

body { background-color: white; }p { background-color: #FFFFFF; }.classe1 { background-color: rgb(0, 0, 0)

Esempio: fixed

Web Design 109

Css in pratica: il testo• Le proprietà di base a proposito dell’elemento testo sono:

• il font da usare (font-family)

• la sua dimensione (font-size)

• la sua consistenza (font-weight)

• l'interlinea tra i paragrafi (line-height)

• l'allineamento del testo (text-align)

• la sua decorazione (text-decoration)

• Poi esistono proprietà più raffinate (da wordprocessor): word-spacing, letter-spacing, text-shadow, text-transform

• Esempio

Web Design 110

Css in pratica: i margini• Una delle maggiori limitazioni di HTML è la mancanza di un

meccanismo interno per spaziare gli elementi di un documento (l’unica possibilità che avevamo a disposizione era l’attributo cellspacing).

• Sono cinque le proprietà con cui è possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato del box.

• L'ultima, margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.

• Esempio

Web Design 111

Css in pratica: padding• Un altro modo per creare spazio intorno ad un elemento è quello di usare il

padding. Come per i margini, HTML incorpora un meccanismo simile solo per le celle di tabella, tramite il cosiddetto cellpadding.

• Rispetto a margin: quando si usa il padding, lo spazio di distanza viene inserito al di qua dei bordi dell'elemento e non all'esterno.

• Un'analogia rispetto ai margini sta nella sintassi. Anche qui quattro proprietà singole per i lati e una a sintassi abbreviata (padding).

• Esempio

Web Design 112

Css in pratica: border

• Esempio

Web Design 113

Css in pratica: liste• Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste (X)HTML. Le

proprietà che andremo ad esaminare si riferiscono non ai canonici tag usati per inserire una lista ordinata (<OL>) o non ordinata (<UL>), ma ai singoli elementi che le compongono, ovvero l'elemento <LI> (ricordate? Elemento lista!)

• Proprietà:– list-style-image– list-style-position– list-style-type

• Esempio

Web Design 114

3 proprietà speciali di Css• Sono display, float e clear• Display: Avevamo chiarito in quella sede la fondamentale distinzione tra

elementi blocco, inline e lista che è alla base di (X)HTML. Quello che si era detto può essere rimesso in discussione da questa proprietà: la funzione di display è di definire il trattamento e la presentazione di un elemento.

• Float: con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float (in pratica ripete ciò che faceva align con le immagini in HTML)

• Clear: questa proprietà serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco.

• esempi

Web Design 115

Css in pratica: posizionamento• E' con queste regole che si può pensare di realizzare il layout delle nostre

pagine solo con i CSS e giungere così alla definitiva e reale separazione tra presentazione e struttura!

• Position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi (static, absolute, fixed, relative).

Web Design 116

Css in pratica: posizionamento• E' con queste regole che si può pensare di realizzare il layout delle nostre

pagine solo con i CSS e giungere così alla definitiva e reale separazione tra presentazione e struttura!

• Position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi (static, absolute, fixed, relative).