Usability and Accessibility on the Web
Usability <ul><li>Usability is the study of the ease with which people can employ a particular tool or other human-made ob...
Navigation on the web site <ul><li>Search + Browsing </li></ul><ul><li>Classify the content </li></ul><ul><li>The user mus...
Conventions used for navigation Where am I How we got here Site logo “ utilities” sections Simple search + instructions + ...
Home page <ul><li>Logo + tag line </li></ul><ul><li>Sections/classification </li></ul><ul><li>Search  </li></ul><ul><li>Te...
Home page objectives <ul><li>Show what the user is looking for </li></ul><ul><li>Offer alternatives (something more than t...
logo tagline search navigation Dynamic content sections commercials Welcome  What it offers teasing
What elements can you identify?
Accessibility  <ul><li>Web Content Accessibility Guidelines (WCAG) 2.0 how the web content is made accessible to people wi...
Introduction <ul><li>160 million people have some kind of visual handicap </li></ul><ul><li>Around 40 million people are b...
Guides for accessible web sites <ul><li>Web Accessibility Initiative  –   Workgroup W3C for improving the web accessibilit...
Objective no 1: the information and the elements of the interface must be perceived <ul><li>All the non-text content must ...
Examples <ul><li>Image with an associated explanation </li></ul><ul><li>Video with  explanations </li></ul>
Objective no 1: the information and the elements of the interface must be perceived  <ul><li>The content of the page must ...
Examples <ul><li>The * doesn’t mean for everybody that the fields are mandatory </li></ul><ul><li><img src=&quot;../graphi...
 
Objective no 1: the information and the elements of the interface must be perceived <ul><li>The content must be easy to pe...
Examples <ul><li>test  to identify the color perception  </li></ul><ul><li>Explain how colors are used for error messages ...
Objective no. 2 - the components of the interface should be operable  <ul><li>All the functionalities should be accessible...
Examples <ul><li>You can produce flashes by using the <blink> tag or through gif or flash files.  </li></ul><ul><li>Flash ...
Objective no. 2 - the components of the interface should be operable <ul><li>The users should be allowed to skip the secti...
Examples <ul><li>How to avoid a repeating component </li></ul><ul><li>Explicit titles  Mention the section of the site </l...
Objective no. 3 The interface and the content of the page must be understandable  <ul><li>The users must be allowed to avo...
Examples <ul><li>Avoid / Correct the errors </li></ul><ul><ul><li>Good example-> </li></ul></ul><ul><ul><li>Bad example - ...
Conclusions <ul><li>The page doesn’t need only to function correctly </li></ul><ul><ul><li>It has to be usable </li></ul><...
References <ul><li>Web Content Accessibility Guidelines 2.0  – W3C working draft </li></ul><ul><li>Accessible Web Design E...
About the exam <ul><li>75 minutes </li></ul><ul><li>1 A4 cheat sheet that can contain only descriptions of HTML or CSS ele...
About the exam <ul><li>If your cheat sheet doesn’t follow these rules it will be confiscated  </li></ul><ul><li>The exam w...
About the exam <ul><li>The exam does not repeat this session </li></ul><ul><li>If you fail you will have to take it again ...
Upcoming SlideShare
Loading in …5
×

Usability and accessibility on the web

4,238 views
4,218 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,238
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usability and accessibility on the web

  1. 1. Usability and Accessibility on the Web
  2. 2. Usability <ul><li>Usability is the study of the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal. </li></ul><ul><li>A web application must function and it must be usable </li></ul><ul><li>There are a lot of books on the subject - we only have time to present some best practices </li></ul>
  3. 3. Navigation on the web site <ul><li>Search + Browsing </li></ul><ul><li>Classify the content </li></ul><ul><li>The user must know where he is inside the web site   </li></ul><ul><li>The user mus know how he arrived in the page </li></ul><ul><li>Navigation in the content and in the options of the site </li></ul>
  4. 4. Conventions used for navigation Where am I How we got here Site logo “ utilities” sections Simple search + instructions + options
  5. 5. Home page <ul><li>Logo + tag line </li></ul><ul><li>Sections/classification </li></ul><ul><li>Search  </li></ul><ul><li>Teasing </li></ul><ul><li>Dynamic content </li></ul><ul><li>[publicite] </li></ul><ul><li>Shortcuts to the most visited pages </li></ul><ul><li>[sign-up] </li></ul>
  6. 6. Home page objectives <ul><li>Show what the user is looking for </li></ul><ul><li>Offer alternatives (something more than the user is looking for)   </li></ul><ul><li>Show how to begin and use the web site </li></ul><ul><li>Show credibility and trust </li></ul>
  7. 7. logo tagline search navigation Dynamic content sections commercials Welcome What it offers teasing
  8. 8. What elements can you identify?
  9. 9. Accessibility  <ul><li>Web Content Accessibility Guidelines (WCAG) 2.0 how the web content is made accessible to people with handicaps.  </li></ul><ul><li>Accessibility should take into account a large number of handicaps: visual, auditives, physical, neurological, mental. </li></ul><ul><li>=> this should make the web content more usable for older people and for people in general </li></ul>
  10. 10. Introduction <ul><li>160 million people have some kind of visual handicap </li></ul><ul><li>Around 40 million people are blind </li></ul><ul><li>There are tools that allow blind people to use the web </li></ul><ul><li>There are people who have different handicaps that use other types of tools </li></ul>
  11. 11. Guides for accessible web sites <ul><li>Web Accessibility Initiative –  Workgroup W3C for improving the web accessibility. </li></ul><ul><li>Web Content Accessibility Guidelines 1.0 – 1999  </li></ul><ul><li>Web Content Accessibility Guidelines 2 .0 – 2008  </li></ul><ul><li>The instructions are grouped by their characteristics and by their priority (1 or A being the most important) </li></ul>
  12. 12. Objective no 1: the information and the elements of the interface must be perceived <ul><li>All the non-text content must have an alternative text.   </li></ul><ul><ul><li>For an image we can specify an alternative text to describe the content of the image (<img alt=&quot;description&quot;> ..)  </li></ul></ul><ul><ul><li>If a sound has a specific significance (i.e. it announces an error) it must be accompanied by an explaining text </li></ul></ul><ul><ul><li>The multimedia objects need to have texts to explain the content </li></ul></ul>
  13. 13. Examples <ul><li>Image with an associated explanation </li></ul><ul><li>Video with explanations </li></ul>
  14. 14. Objective no 1: the information and the elements of the interface must be perceived <ul><li>The content of the page must maintain their importance when the presentation method changes </li></ul><ul><li>Understand the relations between the graphic elements </li></ul><ul><li>Insure that the text in the page is read in the correct order   </li></ul><ul><li>The instructions on how a page must work mustn’t be done only by graphic symbols.   </li></ul><ul><ul><li>ex: the arrows that mark the next page must be explained with text.   </li></ul></ul>
  15. 15. Examples <ul><li>The * doesn’t mean for everybody that the fields are mandatory </li></ul><ul><li><img src=&quot;../graphics/fback.gif&quot; alt=&quot;Previous chapter&quot; border=&quot;0&quot;> </li></ul><ul><li>Use « tabindex » to specify the order in which the elements must be read </li></ul>
  16. 17. Objective no 1: the information and the elements of the interface must be perceived <ul><li>The content must be easy to perceive by separating the foreground and the background  </li></ul><ul><ul><li>The color mustn’t be the only way in which information is provided </li></ul></ul><ul><ul><li>There must be a way to stop the background sound of a page </li></ul></ul>
  17. 18. Examples <ul><li>test to identify the color perception  </li></ul><ul><li>Explain how colors are used for error messages </li></ul>
  18. 19. Objective no. 2 - the components of the interface should be operable  <ul><li>All the functionalities should be accessible from the keyboard </li></ul><ul><li>If for the navigation are used non-standard features (other than tab and arrows) the user must be warned about them </li></ul><ul><li>The user should have enough time to read the content of the page </li></ul><ul><li>In a web page we shouldn’t have flashes as they can cause convulsions ( see . http://www.w3.org/TR/2007/WD-WCAG20-20071211/#general-thresholddef ) </li></ul>
  19. 20. Examples <ul><li>You can produce flashes by using the <blink> tag or through gif or flash files. </li></ul><ul><li>Flash menus usually can’t be controlled by keyboard </li></ul><ul><li>Some e-banking websites allow very short working sessions therefore not allowing sufficient time to read all the information </li></ul>
  20. 21. Objective no. 2 - the components of the interface should be operable <ul><li>The users should be allowed to skip the sections that are repeating in every page  </li></ul><ul><li>The pages should have explicite titles </li></ul><ul><li>The components of the interface should gain focus in a logical order </li></ul>
  21. 22. Examples <ul><li>How to avoid a repeating component </li></ul><ul><li>Explicit titles Mention the section of the site </li></ul><ul><ul><li>Don’t use the same title for all the pages  </li></ul></ul><ul><li>tabindex allows to specify the navigation order  </li></ul>
  22. 23. Objective no. 3 The interface and the content of the page must be understandable  <ul><li>The users must be allowed to avoid or correct errors when using the interface </li></ul><ul><li>Use labels and/or instructions when you need data from the user </li></ul>
  23. 24. Examples <ul><li>Avoid / Correct the errors </li></ul><ul><ul><li>Good example-> </li></ul></ul><ul><ul><li>Bad example - insufficient information from the beginning  </li></ul></ul><ul><li>Use labels and instructions. Tell which is the expected format for the input data  </li></ul>
  24. 25. Conclusions <ul><li>The page doesn’t need only to function correctly </li></ul><ul><ul><li>It has to be usable </li></ul></ul><ul><ul><li>It has to be accessible </li></ul></ul><ul><li>Think who is most likely to use your website </li></ul><ul><li>Know the existing standards and recommendations </li></ul>
  25. 26. References <ul><li>Web Content Accessibility Guidelines 2.0 – W3C working draft </li></ul><ul><li>Accessible Web Design Examples </li></ul><ul><li>Web Content Accessibility Guidelines 1.0 </li></ul><ul><li>See the links inside the presentation </li></ul>
  26. 27. About the exam <ul><li>75 minutes </li></ul><ul><li>1 A4 cheat sheet that can contain only descriptions of HTML or CSS elements or of Javascript objects </li></ul><ul><li>You are not allowed to have code examples on the cheat sheet </li></ul><ul><li>You are not allowed to exchange cheat-sheets with your colleagues during the exam </li></ul>
  27. 28. About the exam <ul><li>If your cheat sheet doesn’t follow these rules it will be confiscated  </li></ul><ul><li>The exam will consist in </li></ul><ul><ul><li>3-5 theoretical questions (max 5 lines for each answer) </li></ul></ul><ul><ul><li>Practical questions </li></ul></ul><ul><ul><ul><li>Implement a feature as seen in an image </li></ul></ul></ul><ul><ul><ul><li>Validate a form input with javascript </li></ul></ul></ul><ul><ul><ul><li>Tell how an element will be displayed having the code available </li></ul></ul></ul>
  28. 29. About the exam <ul><li>The exam does not repeat this session </li></ul><ul><li>If you fail you will have to take it again in september </li></ul><ul><li>Any attempt of cheating will be severely punished (automatically failing the subject+ proposal of expulsion from the faculty) </li></ul><ul><li>In order to pass you need to score at least 50% of the exam points </li></ul>

×