La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Web Design1 Usabilità e Accessibilità ISO 9241-11:1998: l’usabilità è “l’efficacia, l’efficienza e la soddisfazione con cui specifici utenti raggiungono.

Presentazioni simili


Presentazione sul tema: "Web Design1 Usabilità e Accessibilità ISO 9241-11:1998: l’usabilità è “l’efficacia, l’efficienza e la soddisfazione con cui specifici utenti raggiungono."— Transcript della presentazione:

1 Web Design1 Usabilità e Accessibilità ISO :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

2 Web Design2 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 Web Design3 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.);

4 Web Design4 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.

5 Web Design5 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.

6 Web Design6 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.);

7 Web Design7 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.

8 Web Design8 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

9 Web Design9 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 Web Design10 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.

11 Web Design11 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 Web Design12 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; 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;

13 Web Design13 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;

14 Web Design14 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 –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 Web Design15 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);

16 Web Design16 Le WCAG 2 temi fondamentali; 14 linee guida; 65 punti di controllo; 3 livelli di conformità;

17 Web Design17 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;

18 Web Design18 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

19 Web Design19 Rendere il contenuto comprensibile e navigabile ( linee guida ) Dovreste già essere in grado La navigazione e l’orientamento devono essere massimizzate in qualsiasi condizione

20 Web Design20 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à);

21 Web Design21 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”;

22 Web Design22 WCAG 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

23 Web Design23 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 Web Design24 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 Web Design25 WCAG 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.

26 Web Design26 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 Web Design27 WCAG 1.0 Marcare i documenti con i corretti elementi strutturali. Controllare la presentazione con fogli di stile piuttosto che con elementi e attributi di presentazione. Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato.

28 Web Design28 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 Web Design29 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 Web Design30 WCAG 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.

31 Web Design31 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 Web Design32 WCAG 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.

33 Web Design33 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 Web Design34 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 Web Design35 WCAG 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.

36 Web Design36 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 Web Design37 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 Web Design38 WCAG 1.0 Assicurarsi che gli oggetti in movimento, lampeggianti, scorrevoli o che si autoaggiornano possano essere arrestati temporaneamente o definitivamente. Linea guida 7. Assicurarsi che l'utente possa tenere sotto controlli i cambiamenti di contenuto nel corso del tempo.

39 Web Design39 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 Web Design40 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 Web Design41 WCAG 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.

42 Web Design42 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 Web Design43 WCAG 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.

44 Web Design44 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 Web Design45 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 Web Design46 WCAG 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.

47 Web Design47 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 Web Design48 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 Web Design49 WCAG 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.

50 Web Design50 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 Web Design51 WCAG 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.

52 Web Design52 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 Web Design53 WCAG 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.

54 Web Design54 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 Web Design55 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] 

56 Web Design56 WCAG 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.

57 Web Design57 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 Web Design58 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 Tempo di esecuzione

59 Web Design59 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

60 Web Design60 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à;

61 Web Design61 La validazione automatica Alcuni Link: –Bobby: –Torquemada: –Cynthia Says: –Webxact:

62 Web Design62 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

63 Web Design63 Giorno 7: Identificate la vostra lingua

64 Web Design64 Giorno 8: Date titoli significativi Dovreste già saperlo

65 Web Design65 Giorno 9: Fornite ulteriori ausili alla navigazione

66 Web Design66 Giorno 10: Presentate subito il contenuto principale... navigation bar main content...

67 Web Design67 Giorno 10: Presentate subito il contenuto principale... main content navigation bar... spacer GIF

68 Web Design68 Giorno 10: Presentate subito il contenuto principale

69 Web Design69 Giorno 11: Saltate la barra di navigazione Skip over navigation.skiplink {display:none}

70 Web Design70 Giorno 12: Usate i colori sicuri a:link {  blu color: #0000FF} a:hover {  rosso color: #FF0000} a:visited {  viola color: #990099}

71 Web Design71 Giorno 13: Usare link veri

72 Web Design72 Giorno 14: Aggiungete titoli ai link Fun [6] Department of Computer Science

73 Web Design73 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 cgena[at]di.unito.it tasto 0 - Dichiarazione di accessibilità

74 Web Design74 Giorno 16: Non aprite nuove finestre esempio

75 Web Design75 Giorno 17: Definite gli acronimi AI*IA

76 Web Design76 Giorno 18: Date alle tabelle (vere) una vera didascalia tabella di prova esempio

77 Web Design77 Giorno 19: Usate vere intestazioni di tabella prova esempio

78 Web Design78 Giorno 21: Ignorate le immagini con funzione spaziatrice spacer GIF... main content navigation bar... esempio

79 Web Design79 Giorno 22: Usate liste vere (o fatele sembrare tali) ul.lista1 li{ list-style-type : circle; padding: 10px; } I received a degree in Communication Science at the University of Torino in …

80 Web Design80 Giorno 22: Usate liste vere (o fatele sembrare tali) ul.lista1 li{ list-style: url(/images/fancydot.gif) disc; padding: 10px; } esempio

81 Web Design81 Giorno 23: Fornite testi equivalenti per le immagini

82 Web Design82 Giorno 24: Fornite testi equivalenti per mappe di immagini

83 Web Design83 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-image: url(img/griginohr.gif); background-repeat: repeat-x; background-position: center center; width: 80%; } hr {display:none} /**/ ì esempio

84 Web Design84 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 html>body p, html>body td { font-size: small; }/* */

85 Web Design85 Giorno 27: Usate intestazioni vere,,

86 Web Design86 Giorno 28: Etichettate gli elementi dei moduli URL: Comments: Remember info? esempio

87 Web Design87 Giorno 29: Rendete tutto ricercabile … accesskey="4"

88 Web Design88 Giorno 30: Dichiarate il vostro livello di accessibilità … Accessibility statement

89 Web Design89 La conformità Questa pagina è conforme alle "Linee guida per l'accessibilità ai contenuti del Web 1.0" del W3C disponibili a 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: WEBCONTENT 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 Web Design90 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

91 Web Design91 La dichiarazione di accessibilità ocID=329http://www.webaccessibile.org/argomenti/documento.asp?D ocID=329

92 Web Design92 JAVASCRIPT

93 Web Design93 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 Web Design94 Rollover

95 Web Design95 window.open Clicca qui per aprire la nuova finestra

96 Web Design96 window.status Cambia la barra di stato

97 Web Design97 Server side include

98 Web Design98 SSI Mettere su un server Salvare come.shtml

99 Web Design99 CSS 2

100 Web Design100 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 Web Design101 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:,,,..,,,,,,…. ESEMPIO:ESEMPIO Titolo Paragrafo Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè e sono elementi blocco.

102 Web Design102 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:,,,,,,,,,,….. Una terza categoria è quella degli elementi lista. Comprende soltanto l'elemento LI (list item).

103 Web Design103 Come usare i Css? Ci sono tre modalità valide, ognuna caratterizzata da alcuni aspetti: Fogli collegati (il classico tag oppure all’interno del tag "stile.css" screen; Fogli incorporati Fogli in linea

104 Web Design104 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:...

105 Web Design105 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 Web Design106 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):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.

107 Web Design107 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

108 Web Design108 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

109 Web Design109 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

110 Web Design110 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

111 Web Design111 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 Web Design112 Css in pratica: border Esempio

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

114 Web Design114 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.Display 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 Web Design115 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).absolutefixedrelative

116 Web Design116 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).absolutefixedrelative


Scaricare ppt "Web Design1 Usabilità e Accessibilità ISO 9241-11:1998: l’usabilità è “l’efficacia, l’efficienza e la soddisfazione con cui specifici utenti raggiungono."

Presentazioni simili


Annunci Google