Usabilit

1
Usabilità e Accessibilità

• ISO 9241-111998 lusabilità è lefficacia,
  lefficienza e la soddisfazione con cui specifici
  utenti raggiungono specifici obiettivi in
  particolari ambienti.
• ISO TS 16071 Laccessibilità è lusabilità di
  un prodotto, servizio, ambiente o strumento, per
  persone col più ampio raggio di capacità. ?
  Fruibile da chiunque

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

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 linterazione
  (vista, udito, tatto)
• Abilità psico-motorie dellutente
• Abilità percettive dellutente
• Connettività (LAN, Modem, GPRS ecc.)
• Hardware e software (Palmari, Desktop, WebTV
  ecc.)

4
Usabilità e Accessibilità

• Lusabilità non può essere progettata a
  prescindere dagli utenti che utilizzano
  effettivamente il sito, dagli obiettivi che
  questi cercano di raggiungere, dallambiente in
  cui ciò avviene.
• Laccessibilità deve essere progettata tenendo
  bene in mente le esigenze dellampio numero di
  persone disabili, o che hanno tecnologie
  obsolete, o che si collegano al web con
  dispositivi diversi dal computer.

5
Cosa hanno in comune lusabilità e
laccessibilità?
Lutente

• 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.

6
Principi di design universale

• Laccessibilità 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 linterazione alle categorie di
  utenti più marginali (disabili permanenti e
  temporanei, anziani ecc.)
• Dal design delloggetto non traggono vantaggio
  solo le categorie marginali ma tutti ricevono un
  beneficio (es. rampe daccesso)
• Esistono 7 linee guida che dovrebbero ispirare il
  lavoro di tutti coloro che realizzano artefatti
  utilizzati da altre persone (architetti,
  designer, grafici, programmatori ecc.)

7
Principi di design universale (2)

• Equità duso
• Flessibilità duso
• Uso semplice e intuitivo
• Informazione accessibile
• Tolleranza agli errori
• Sforzo fisico minimo
• Dimensione e spazio duso 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.

8
Utenti diversamente abili

• Disabilità della vista
• Disabilità delludito
• Disabilità motorie ? emulatori di mouse,
  testiera, ingrandimento di oggetti
• Disabilità cognitive ? evitare immagini in
  movimento veloce

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.

10
Utenti con limitazioni allaccesso

• 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.

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

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.ht
  m
• Unione Europea
• Piano dazione eEurope 2002
• Reclama la necessità di adottare laccessibilità
  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

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
  linnovazione e le tecnologie)
• Analisi esaustiva della tematica
• Detta lorientamento che le successive
  deliberazioni dovranno possedere

14
Il quadro normativo di riferimento

• Dicembre 2003 Approvazione della Legge Stanca
  "Disposizioni per favorire laccesso 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

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
• WCAGWeb 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/

16
Le WCAG

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

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
• laccessibilità non è solo un fatto
  tecnico/percettivo, ma anche e soprattutto
  psicologico-cognitivo

18
Assicurare una trasformazione elegante (linee
guida 1-11)

• Separare la struttura dalla presentazione
• Fornire testo (compresi gli equivalenti testuali)
• Creare documenti funzionanti nonostante lutente
  non possa vedere e/o sentire
• Creare documenti che non si basino su uno
  specifico hardware

19
Rendere il contenuto comprensibile e navigabile
(linee guida 12-14)

• Dovreste già essere in grado ?
• La navigazione e lorientamento devono essere
  massimizzate in qualsiasi condizione

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 linaccessibilità di molte categorie di
  utenti (accessibilità base)
• Priorità 2 punti che dovrebbero essere
  soddisfatti, pena la difficoltà daccesso di
  alcune categorie di utenti (rimozione di barriere
  significative)
• Priorità 3 punti che potrebbero essere
  soddisfatti, pena lostacolo allaccesso di
  alcune categorie di utenti (miglioramento
  dellaccessibilità)

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 gt Conformità A
• Priorità 2 gt Conformità Doppia-A
• Priorità 3 gt Conformità Tripla-A

22
WCAG 1.0

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

Fornire un contenuto che, quando viene presentato
all'utente, gli trasmetta essenzialmente la
stessa funzione o scopo del contenuto audio o
visivo.
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

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

25
WCAG 1.0

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

Assicurarsi che il testo e la parte grafica siano
comprensibili se consultati senza il colore.
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.

27
WCAG 1.0

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

Marcare i documenti con i corretti elementi
strutturali. Controllare la presentazione con
fogli di stile piuttosto che con elementi e
attributi di presentazione.
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

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

30
WCAG 1.0

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

Utilizzare marcatori che facilitino la pronuncia
o l'interpretazione di testi stranieri o
abbreviati.
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

32
WCAG 1.0

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

Assicurarsi che le tabelle abbiano la marcatura
necessaria per essere trasformate dai browser
accessibili e da altri interpreti.
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

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

35
WCAG 1.0

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

Assicurarsi che le pagine siano accessibili anche
quando le tecnologie più recenti non sono
supportate o sono disabilitate.
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

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

38
WCAG 1.0

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

Assicurarsi che gli oggetti in movimento,
lampeggianti, scorrevoli o che si autoaggiornano
possano essere arrestati temporaneamente
o definitivamente.
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

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

41
WCAG 1.0

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

Assicurarsi che la progettazione delle interfacce
utente segua i principi dell'accessibilità
accesso alle diverse funzionalità indipendente
dai dispositivi usati, possibilità di operare da
tastiera, comandi vocali, ecc.
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.

43
WCAG 1.0

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

Usare caratteristiche che permettono di attivare
gli elementi della pagina attraverso una
molteplicità di dispositivi di input.
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

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

46
WCAG 1.0

• Linea guida 10. Usare soluzioni provvisorie.

Usare soluzioni provvisorie in modo che le
tecnologie assistive e i browser più vecchi
possano operare correttamente.
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

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

49
WCAG 1.0

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

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

51
WCAG 1.0

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

Fornire informazione per la contestualizzazione e
l'orientamento, per aiutare gli utenti a
comprendere pagine od elementi complessi.
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

53
WCAG 1.0

• Linea guida 13. Fornire chiari meccanismi di
  navigazione.

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

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 ?ltlink rel
• 13.10 Fornire un mezzo per saltare arte ASCII
  multilinea. Priorità 3

56
WCAG 1.0

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

Assicurarsi che i documenti siano chiari e
semplici in modo che possano essere compresi più
facilmente.
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

58
Il controllo e la valutazione dellaccessibilità

• Esistono 3 famiglie di metodi per valutare
  laccessibilità

1. Controlli automatici (validatori)
2. Metodi ispettivi (con esperti)
3. Test con utenti

Qualitàdei risultati
Tempodi esecuzione
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 delluso improprio di alcuni
  tag e attributi
• Non riesce ad accorgersi dei requisiti cognitivi
  dellaccessibilità (es. comprensibilità,
  navigabilità, percettibilità delle informazioni)
• È il giudizio di una macchina e non possiede il
  discernimento umano

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
  allaccessibilità

61
La validazione automatica

• Alcuni Link
• Bobby http//bobby.watchfire.com/bobby/html/en/in
  dex.jsp
• Torquemada http//www.webxtutti.it/testa.htm
• Cynthia Says http//www.contentquality.com/Defaul
  t.asp
• Webxact http//webxact.watchfire.com/

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
• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http//www.w3.org/TR/html4/loos
  e. dtd"gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt

63
Giorno 7 Identificate la vostra lingua

• lthtml langit"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  langit" xmllangit"gt

64
Giorno 8 Date titoli significativi

• Dovreste già saperlo ?

65
Giorno 9 Fornite ulteriori ausili alla
navigazione

• ltlink rel"home" title"Home" href"http//www.di.
  unito.it/cgena/"gt
• ltlink rel"prev" title"Dipartimento di
  informatica di Torino" href"http//www.di.unito.i
  t/"gt
• ltlink rel"next" title"Research Interest"
  href"http//www.di.unito.it/cgena/research.html"
  gt

66
Giorno 10 Presentate subito il contenuto
principale

• lttablegt
• lttrgt lttd valign"top" align"left" width"25"gt
  ... navigation bar ... lt/tdgt lttd valign"top"
  align"left"gt ... main content ... lt/tdgt lt/trgt
  lt/tablegt

67
Giorno 10 Presentate subito il contenuto
principale

• lttablegt lttrgt lt!-- spacer GIF in upper-left cell
  --gt lttdgtltimg src"/images/1.gif" width"1"
  height"1" alt""gtlt/tdgt lt!-- main content cell
  first, with rowspan2 --gt lttd valign"top"
  align"left" rowspan"2"gt ... main content ...
  lt/tdgt lt/trgt lttrgt lttd valign"top" align"left"
  width"25"gt ... navigation bar ... lt/tdgt lt/trgt
  lt/tablegt

68
Giorno 10 Presentate subito il contenuto
principale
69
Giorno 11 Saltate la barra di navigazione
lta href"startcontent" accesskey"2"
tabindex"2" class"skiplink"gtSkip over
navigationlt/agt .skiplink displaynone lta
name"startcontent" id"startcontent"gtlt/agt
70
Giorno 12 Usate i colori sicuri

• alink ? blu
• color 0000FF
• ahover ? rosso
• color FF0000
• avisited ? viola
• color 990099

71
Giorno 13 Usare link veri

• lta href"javascriptrollover()"gt  
• lta href"" onClick"javascript rollover()
  onKeyPress "javascript rollover() gt

72
Giorno 14 Aggiungete titoli ai link

• lta href"fun.html" title"Pictures of Cristina
  and her friends and nice gadgets" class"nero"
  accesskey"6" tabindex"6"gtFun 6 lt/agt
• lta href"http//www.di.unito.it/"
  title"external link"gtDepartment of Computer
  Sciencelt/agt

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
• lta href"mailtocgenaatdi.unito.it"
  accesskey"9" tabindex"9title"email
  me"gtcgenaatdi.unito.itlt/agt
• tasto 0 - Dichiarazione di accessibilità

74
Giorno 16 Non aprite nuove finestre

• lta target"_blank"gt
• esempio

75
Giorno 17 Definite gli acronimi
ltacronym title"Associazione italiana per
l'intelligenza artificiale"gtAIIAlt/acronymgt
76
Giorno 18 Date alle tabelle (vere) una vera
didascalia
ltcaption align"bottom"gt tabella di prova
lt/captiongt esempio
77
Giorno 19 Usate vere intestazioni di tabella
ltth abbr"prova di intestazione
abbreviata!"gtprovalt/thgt ltth abbr"prova di
intestazione abbreviata!"gtprovalt/thgt ltth
abbr"prova di intestazione abbreviata!"gtprovalt/th
gt ltth abbr"prova di intestazione
abbreviata!"gtprovalt/thgt ltth abbr"prova di
intestazione abbreviata!"gtprovalt/thgt esempio
78
Giorno 21 Ignorate le immagini con funzione
spaziatrice
lttablegt lttrgt lt!-- spacer GIF in upper-left cell
--gt lttdgt ltimg src"/images/1.gif" width"1"
height"1" alt""gt lt/tdgt lt!-- main content cell
first, with rowspan2 --gt lttd valign"top"
align"left" rowspan"2"gt ... main content ...
lt/tdgt lt/trgt lttrgt lttd valign"top" align"left"
width"25"gt ... navigation bar ... lt/tdgt lt/trgt
lt/tablegt esempio
79
Giorno 22 Usate liste vere (o fatele sembrare
tali)
ul.lista1 li list-style-type
circle padding 10px ltul class"lista1"gt ltli
gtI received a degree in lta href"http//www.scidec
om.unito.it/" title"external link"gtCommunicatio
n Sciencelt/agt at the lta href"http//www.unito.it/
" title"external link"gtUniversity of
Torinolt/agt in 1998. lt/ligt lt/ulgt
80
Giorno 22 Usate liste vere (o fatele sembrare
tali)
ul.lista1 li list-style url(/images/fancydot.g
if) disc padding 10px esempio
81
Giorno 23 Fornite testi equivalenti per le
immagini
ltimg src"img/criMalaga.jpg" alt"Cristina in
2002" width"100" height"107"gt
82
Giorno 24 Fornite testi equivalenti per mappe di
immagini
ltimg alt"Site navigation links"
src"footer.gif" width"500" height"212"
usemap"Map"gt ltmap name"Map"gt ltarea
alt"previously..." shape"rect"
coords"203,114,258,129" href"/archives.html"gt
ltarea alt"by category" shape"rect"
coords"277,113,348,129" href"/category/"gt ltarea
alt"about the site" shape"rect"
coords"364,113,401,128" href"links.html"gt ltarea
alt"about leslie" shape"rect"
coords"418,114,488,130" href"leslie.html"gt
ltarea alt"Powered by Movable Type" shape"rect"
coords"-4,190,131,210" href"http//www.moveablet
ype.org"gt lt/mapgt
83
Giorno 25 Usate barre orizzontali vere (o quasi)
div.hr display none ///a netscape4 e
opera 5 MAC ignorano queste regole div.hr
display block height 10px background-imag
e url(img/griginohr.gif) background-repeat
repeat-x background-position center
center width 80 hr displaynone // ltdiv
class"hr"gtlt/divgtlthr /gt ì esempio
84
Giorno 26 Usate dimensioni relative per i font
p font-size 12px ///a ? netscape4 e
opera 5 MAC ignorano queste regole body, body p,
body td font-size x-small voice-family
"\"\"" ? IE si ferma qui voice-family
inherit font-size small padding 10px ?
opera 5 htmlgtbody p, htmlgtbody td font-size
small / /
85
Giorno 27 Usate intestazioni vere
lth1gt, lth2gt, lth3gt
86
Giorno 28 Etichettate gli elementi dei moduli
ltlabel for"url"gtURLlt/labelgtltbr /gt ltinput
id"url" name"url" /gtltbr /gtltbr /gt ltlabel
for"text"gtCommentslt/labelgtltbr /gt lttextarea
id"text" name"text" rows"10"
cols"50"gtlt/textareagtltbr /gtltbr /gt ltinput
type"checkbox" id"bakecookie" name"bakecookie"
/gt ltlabel for"bakecookie"gtRemember
info?lt/labelgtltbr /gtltbr gt esempio
87
Giorno 29 Rendete tutto ricercabile
accesskey"4"
88
Giorno 30 Dichiarate il vostro livello di
accessibilità
lta href"/accessibility_statement.html"
title"accessibility features of this site"
accesskey"0"gtAccessibility statementlt/agt
89
La conformità

• Questa pagina è conforme alle "Linee guida per
  l'accessibilità ai
• contenuti del Web 1.0" del W3C disponibili a
• http//www.w3.org/TR/1999/WAI-WEBCONTENT-19990505,
  livello
• Doppia-A.
• Specificare
• l 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.).

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

91
La dichiarazione di accessibilità

• http//www.webaccessibile.org/argomenti/documento.
  asp?DocID329
• http//www.m3lab.csp.it/index.php?IDpage9
• http//www.csp.it/access.php

92
JAVASCRIPT
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

94
Rollover

• lta hrefpippo.html onMouseOver"document.immagin
  e.src'img/pippo_on.gif'"
• onMouseOut"document. immagine.src'img/pippo_off
  .gif'"gt
• ltimg src"img/ pippo_off.gif" name" immagine "
  border"0" width"121" height"33"gt
• lt/agt

95
window.open

• lta href"" onClick"window.open(nuovaFinestra.ht
  ml',titolo finestra','width560,height430,
  top100,left200')"gt
• Clicca qui per aprire la nuova finestra
• lt/agt
• http//javascript.about.com/library/weekly/aa03120
  3a.htm

96
window.status

• lta href"javascriptvoid(0)" onMouseOver"(windo
  w.status'W il corso di web design') return
  true"gt
• Cambia la barra di stato
• lt/agt
• ltbody onLoad"(window.status'W il corso di web
  design')"gt

97
Server side include
98
SSI

• lt--include file"nomefile.htm" --gt
• Mettere su un server
• Salvare come .shtml

99
CSS 2
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

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 ltcentergt, ltdivgt , ltformgt ,
  lth1gt..lth6gt , lthrgt , ltolgt , ltpgt , lttablegt , ltulgt
  ,.
• ESEMPIO
• lth1gtTitololt/h1gtltpgtParagrafolt/pgt
• Le parole "titolo" e "paragrafo" appariranno su
  due righe diverse, perchè ltH1gt e ltPgt sono
  elementi blocco.

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 ltagt , ltbgt , ltbrgt , ltfontgt ,
  ltigt , ltimggt , ltselectgt , ltinputgt , ltstronggt ,
  lttextareagt ,..
• Una terza categoria è quella degli elementi
  lista. Comprende soltanto l'elemento LI (list
  item).

103
Come usare i Css?

• Ci sono tre modalità valide, ognuna
  caratterizzata da alcuni aspetti
• Fogli collegati (il classico tag ltLINK .gt oppure
  lattributo _at_import allinterno del tag ltSTYLEgt)
• ltstyle type"text/css"gt
• _at_import "stile.css" screen
• lt/stylegt
• Fogli incorporati
• Fogli in linea

104
Lattributo 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
• ltlink rel"stylesheet" type"text/css"
  media"print" href"print.css" /gt
• lt style type"text/css" media"screen"gt...lt/stylegt

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.

106
Cascade concetti di base

• Per capire meglio il significato di cascade
  vediamo come si comporta un browser di fronte a
  un foglio di stile (ex)
• 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.
• Comincia ad ordinare per peso e origine secondo
  le regole viste sopra. Se cè un Css definito
  dallautore userà quello. Altrimenti verificherà
  la presenza di un foglio di stile utente e in sua
  assenza applicherà le regole stilistiche
  predefinite.
• Quindi calcola la specificità dei selettori e in
  caso di conflitto tra regole usa questo criterio
  di prevalenza.
• In generale gli stili in linea prevalgono su
  quelli incorporati che a loro volta prevalgono su
  quelli collegati.

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 questarea 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

108
Css in pratica sfondi

• Ecco la lista delle proprietà, applicabili a
  tutti gli elementi (vantaggio di CSS!)
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• Esempi
• body background-color white p
  background-color FFFFFF .classe1
  background-color rgb(0, 0, 0)
• Esempio fixed

109
Css in pratica il testo

• Le proprietà di base a proposito dellelemento
  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

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 (lunica possibilità
  che avevamo a disposizione era lattributo
  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

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

112
Css in pratica border

• Esempio

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 (ltOLgt) o non ordinata (ltULgt), ma ai
  singoli elementi che le compongono, ovvero
  l'elemento ltLIgt (ricordate? Elemento lista!)
• Proprietà
• list-style-image
• list-style-position
• list-style-type
• Esempio

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

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

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
  separazi