Usability and accessibility on the web
Upcoming SlideShare
Loading in...5

Usability and accessibility on the web






Total Views
Views on SlideShare
Embed Views



2 Embeds 3,251 3250 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Usability and accessibility on the web Usability and accessibility on the web Presentation Transcript

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