Quarta lezione modulo Web Usability del corso per WebMaster & WebDesigner

1. Web Usability [4]
Matteo Magni

2. Usabilità
• L'usabilità è definita dall'ISO (International
Organisation for Standardisation), come l'efficacia,
l'efficienza e la soddisfazione con le quali determinati
utenti raggiungono determinati obiettivi in determinati
contesti. In pratica definisce il grado di facilità e
soddisfazione con cui si compie l'interazione tra
l'uomo e uno strumento (console, leva del cambio,
interfaccia grafica, ecc.)
(Wikipedia)

3. Nielsen
• L’usabilità è un indicatore di qualità che ci dice quanto una
determinata cosa è semplice da usare. Più precisamente, ci
dice quanto è necessario per imparare a usare quella cosa,
con quanta efficienza la si usa poi, quanto si riesce a tenerne a
mente il funzionamento, quanto alta è la probabilità di fare
errori quando la si usa, e quanto è piacevole usarla. Se
l’utente non riesce o non vuole usare una data funzionalità di
un oggetto o di un programma, quella funzionalità potrebbe
tranquillamente non esserci. (Nielsen)

4. Accessibilità
• L'accessibilità è la caratteristica di un
dispositivo, di un servizio o di una risorsa
d'essere fruibile con facilità da una
qualsiasi tipologia d'utente.
(Wikipedia)

5. Accessibilità
• La proprietà di un contenuto web, di uno
strumento autoriale o di un programma utente di
essere accessibile oppure, a seconda del
contesto, l’insieme di linee guida,
raccomandazioni, suggerimenti, tecniche, per
produrre contenuti accessibili, strumenti autoriali
accessibili, programmi utente accessibili. (Diodati)

6. Tim Berners-Lee
“un sito accessibile è un sito più usabile per
tutti”

7. wcag
http://www.w3.org/TR/WCAG10/
Web Content
Accessibility
Guidelines 1.0

8. Beneficiari
Le categorie di disabili che • i disabili motori (almeno per quel
vengono citate nelle WCAG 1.0 che influenza la possibilità di usare
come interessate dai benefici di il mouse o la tastiera);
una corretta applicazione delle • i malati di epilessia fotosensibile (le
raccomandazioni sull’accessibilità cui crisi possono essere scatenate
sono le seguenti: da luci in movimento o oggetti
lampeggianti);
• i ciechi;
• individui affetti da non meglio
• i sordi; specificate disabilità cognitive o
dell’apprendimento.
• i sordociechi;
• gli ipovedenti;

9. Ma parliamo solo di disabilità permanenti?

10. molti utenti possono
trovarsi a operare in
contesti molto
differenti dal proprio

11. Situazioni [1]
• possono non essere in grado di vedere, sentire,
muoversi, o possono non riuscire a elaborare,
facilmente o del tutto, alcuni tipi di informazioni;
• possono avere difficoltà nella lettura o nella
comprensione dei testi;
• possono non avere la tastiera o il mouse,
oppure non essere in grado di adoperarli;

12. Situazioni [2]
• possono avere uno schermo solo a caratteri, uno schermo piccolo
o una connessione lenta a Internet;
• possono non parlare o comprendere in modo fluente la lingua in
cui il documento è scritto;
• possono trovarsi in situazioni in cui la vista, l’udito o le mani sono
occupati o ostacolati (per esempio, guidano per lavoro o lavorano
in un ambiente rumoroso ecc.);
• possono avere una versione precedente di un browser, un browser
del tutto differente, un browser vocale o un diverso sistema
operativo.

13. Errori comuni

14. Se non ho le immagini?
• Disabilito le
immagini con la
web developer
toolbar di firefox

15. Errori comuni – menu immagini

16. Browser testuale

17. Richiesto plugin silverlight

18. • E se non lo so installare?
• E se non si installa?
• E se non ho i permessi per installarlo?

19. iFrame
• Gli iframe non
hanno titoli
significativi

21. Dispositivi
• browser grafici (Internet Explorer, Firefox, Opera, Safari, ...);
• browser testuali (Lynx, Links, ...);
• browser vocali (Home Page Reader);
• plug-in (Adobe Reader, Flash, Java Runtime
Environment, ...);
• screen reader (Jaws, Windows Eyes, Hal, ...);
• ingranditori di schermo (Lunar, ZoomText, Magic, ...).

22. Alternativa
Una della parole chiavi per l'accessibilità è
sicuramente la parola alternativa

23. WCAG 1.0, linea guida 1. Fornire contenuti
che, quando presentati all’utente, svolgono
essenzialmente la stessa funzione o scopo
dei contenuti uditivi o visivi.

24. Immagini attributo alt
Lo abbiamo già visto, ma nei casi di immagini
decorative?
<img src="pallino.gif" alt=""
width="5" height="5">
<img src="spaziatore.gif" alt=""
width="15" height="10">
Meglio metterlo vuoto

25. e i CSS?
ul { list­style­image: url("bullet.jpg") }
......
<ul>
<li>Primo punto elenco.</li>
<li>Secondo punto elenco.</li>
<li>Terzo punto elenco.</li>
</ul>

26. CAPTCHA
• Così è accessibile,
ma è anche
usabile?

27. Non usare solo il colore
E i link quali sono se non vedo i colori?
http://it.wikipedia.org/wiki/Accessibilit%C3%A0_%28design%29

28. Contrasto
• Cerchiamo di
avere contrasti
accessibili
http://www.iamcal.com/toys/colors/

29. Marcatura html e css
• Come abbiamo visto
nel modulo html e
css usare un codice
pulito e molti fogli di
stile rende tutto più
accessibile.
• Validiamo il codice

30. Disabilitiamo Javascript?

31. Come navigo?!?!?
href=”#”
• Il menu dovrebbe essere utilizzabile lo
stesso
• Con HTML e CSS posso creare
alternative nel caso non ci sia Js

32. noscript
<script type="text/tcl">
...uno script Tcl che mostra un tabellone di risultati
sportivi...
</script>
<noscript>
<p>I risultati delle gare di ieri:</p>
<dl>
<dt>Bologna 91, Roma 80.</dt>
<dd>
<a href="gara1.html">I momenti clou
dell’incontro di basket Bologna­Roma</a>
...altri risultati...
</dd>
</dl>
</noscript>

33. Javascript quindi?
• Conoscendolo lo si
può rendere
accessibile, quindi
ci tocca
aspettare...

34. Usare le giuste tecnologie
• HTML
• Css
• Javascript

35. In Italia?
http://www.pubbliaccesso.gov.it/normative/legge_20040109_n4.htm
Legge 4 gennaio 2004, n. 4, Disposizioni per favorire l’accesso
dei soggetti disabili agli strumenti informatici, nota come Legge
Stanca dall’allora ministro proponente, Lucio Stanca
http://www.pubbliaccesso.gov.it/biblioteca/documentazione/studio_lineeguida/3_requisiti_tecnica.htm

36. Tools
Ma purtroppo sono scomparsi

37. Tools [2]
https://addons.mozilla.org/it/firefox/addon/accessibility-evaluation-toolb/

38. Bibliografia
• Accessibilità Guida
completa di
Michele Diodati
http://accessibile.diodati.org/agc/

39. Risorse
http://webaccessibile.org/
http://www.iwa.it/categorie/informazioni/

40. Domande
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me