Design for Accessibility
Upcoming SlideShare
Loading in...5
×
 

Design for Accessibility

on

  • 5,412 views

This presentation talks about the definition, examples, and design principles for different accessibility types.

This presentation talks about the definition, examples, and design principles for different accessibility types.

Statistics

Views

Total Views
5,412
Views on SlideShare
5,231
Embed Views
181

Actions

Likes
3
Downloads
94
Comments
0

9 Embeds 181

http://blogs.msdn.com 165
http://www.slideshare.net 5
http://design-for-innovation.com 2
http://www.cstylez.com 2
http://www.paretouserexperience.com 2
http://pinterest.com 2
http://i1.blogs.msdn.com 1
http://www.pinterest.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

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.

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

Design for Accessibility Design for Accessibility Presentation Transcript

  • Designing for Accessibility
    After successfully completing this module, you will be able to:
    create accessibility personas
    understand the challenges of users with disabilities
    apply design tips for different disability types
  • Outline
    Accessibility Hit or Myth
    Design Process and Personas
    Design for Disability
    Type definition
    Challenges users face
    Design tips
    Summary and Design Resource
  • Hit or Myth
    Accessible sites look boring
    “Text-only” pages are a good way to provide accessibility
    (Myth)
    (Myth)
  • Hit or Myth
    Accessible sites look boring
    “Text-only” pages are a good way to provide accessibility
    It’s possible to design a single version of web content that is accessible across all spectrum of disabilities
    (Myth)
    (Myth)
    (Myth)
    Universal Design
  • Design Process
    When in a project do you think “accessibility?”
  • User-Centred Design Process
    Evaluate
    User Research
    Design
    Development
    Scenarios and Requirements
  • Personas:a description of a representative user(a pretend person who represents a type or a group of users)
  • Create Personas for Your Design
    Ask yourself :
    Who are the users?
    What are the activities they wish to perform?
    Why they might visit your websites? i.e. motivation
    How does our website/services fit into their context of life?
  • Create Accessibility Personas
    Background: picture, name, age, job, interests, …
    Attributes: ability, access points, technical expertise,..
    Goals:
    What are they trying to achieve?
    Why are they trying to achieve this?
  • Persona Example: Robert(Retiree with aging related conditions)
    Background
    • age: 65
    • occupation: retired
    • aging related disabilities: low-vision, hand tremor, short-term memory loss
    • Technical level: not tech savvy, only uses the web to manage some of his household services and finances
    Attributes
    • uses screen magnifier
    • uses computers only at home
    • preferred large links and icons
    • finds scrolling stickers and flashing animations very distracting
    • easy to get lost in the site
    “I often get stuck on a website.”
    Goals
    • able to use basic services on the web easily
    • don’t get stuck on pages and able to save his data
    • able to customize a website font and color
  • Tips for Creating Personas
    Empathy: focus on our target users and their pain points
    Concrete: include details of your personas and make them real
    Apply a face to your persona
    Include disability condition and AT information for accessibility personas
  • User-Centred Design Process
    Evaluate
    User Research
    Design
    Development
    Scenarios and Requirements
  • Design for Disability
    Vision
    Hearing
    Mobility
    Cognitive
    Speech
    Focus of today
  • The Four POUR Principles
    The Four POUR Principles
    WCAG 2.0 principles:
    • Perceivable
    • Operable
    • Understandable
    • Robust
  • Vision Disability
    • Blindness
    • Low Vision
    • Color-blindness
    • Seizure
  • Blindness
    Let’s experience it!
    What are the challenges?
  • Blindness: Challenges
    • cannotscan for content
    • primary interact with keyboard
    • hard to access visual information
    • limitations of screen readers
  • Blindness: Design Tips
    Perceivable: include detailed text description for graphics, video, animation
    Operable: fully operable with keyboard
    Understandable: make sure your page has a clear, and consistent structure, and avoid using complex tables
    Robust: be careful with new technologies that will raise incapability with AT
  • Low-Vision
    Let’s Experience it!
    What are the challenges?
  • Low-Vision: Challenges
    • cannot see without magnifier
    • text in graphics is hard to read
    • cannot see pages with low contrast
  • Low-Vision: Design Tips
    Perceivable:
    To make text more legible when enlarged, use true text as much as possible, rather than text in graphics.
    To the extent possible, use percentages, rather than absolute units (e.g. pixels), in your document layout.
    To the extent possible, maximize the contrast of your web pages, including graphics, fonts, and backgrounds
  • Color-Blindness
    Assessment Samples
    Test Plate 1
    Test Plate 2
    Test Image
    (The number 12 should be visible by all.)
    Test Plate 3
    Test Plate 4
  • Color-Blindness: Types
    Protanopia and protanomaly (red deficiencies)
    Deuteranopia and deuteranomaly (green deficiencies)
    Tritanopia (blue deficiencies)
    Rod monochromacy or achromacy (no color)
  • Color Blindness
    Let’s Experience it!
    What are the challenges?
  • Color-Blindness: Challenges
    • problem color combinations
    • color used as the only way to convey information
  • Color Basics: Hue
  • Color Basics: Lightness & Saturation
  • Effective Color Contrast Guidelines
    1
    Exaggerate lightness differences between foreground and background colors
  • Effective Color Contrast Guidelines
    2
    Choose dark colors from the bottom half of the circle against light colors from the top half of the circle.
    Light Colors
    Dark Colors
  • Effective Color Contrast Guidelines
    3
    Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.
    Light Colors
    Dark Colors
  • Color-Blindness: Design Tips
    Perceivable:
    Avoid colors or color pairs that cause problems for people who are colorblind.
    Provide sufficient contrast between foreground and background colors.
    Make sure that colors are not your only method of conveying important information.
  • Seizure Disorders
  • Hearing Disability
    Let’s hear it!
    What are the challenges?
  • Hearing: Challenges
    • auditory prompts without visual signposts
    • lacking caption/transcript for video and audio content
  • Hearing: Design Tips
    Perceivable:
    Make sure they can perceive (hear) auditory content
    • Alternative text for animation
    • Synchronized captioning
    • Transcript
    • Text description (e.g. for audio instructions)
    Allow for user control of start/stop, animations, and other equivalent options.
  • Hearing Disability
    a word about sign language…
  • Mobility Disability
  • Mobility
    Let’s hear it!
    What are the challenges?
  • Motor: Assistive Technologies
  • Mobility: Challenges
    • may not be able to control mouse or keyboard well
    • may become fatigue very easily when using AT
  • Their biggest challenge is…
    Navigating on the web
  • How we read online...
  • How do we read online?
    People almost always scan your pages
    Userswon't read your text thoroughlyin a word-by-word manner
    Most readers have 2 key questions:
    Am I on the right page?
    If not, where do I go next?
    Headings
    links
  • "Provide clear and consistent navigation mechanisms to increase the likelihood that a person will find what they are looking for at a site."
    Web Content Accessibility Guideline 13
  • Mobility: Design Tips
    Operable:
    build a good navigation structure
    give feedback to user actions
    help users navigate efficiently through keyboard
  • Effective Navigation Tips
    1
    build a good navigation structure
    • Reduce the number of entry points
    • consistent navigation structure
    • provide sitemap
    • Use standard navigation UI
  • How many different ways to view winners?
    4
    1
    3
    2
  • Effective Navigation Tips
    2
    give feedback to user actions
    • mouse movement feedback
    • keyboard focus feedback
  • Mouse Movement
    A clickable area needs to appear obviously clickable.
    QUIT
    QUIT
  • Vote This Submission
  • Mouse Movement
    A clickable area needs to appear obviously clickable.
    Change mouse cursor appearance when appropriate.
    The clickable area should be clearly identified on the hover.
  • Keyboard Focus
    There is always an object with focus.
    Keyboard focus should be visible and obvious.
    Keyboard focus and selection should have separate and unique indicators.
  • Effective Navigation Tips
    3
    help users navigate efficiently through keyboard
  • Keyboard Navigation
    Enable navigation to all elements using tab or arrow keys.
    Provide keyboard shortcuts to important links and content. (e.g. skip links)
  • Help! … Skip Links please!
  • Keyboard Navigation
    Enable navigation to all elements using tab or arrow keys.
    Provide keyboard shortcuts to important links and content. (e.g. skip links)
    Provide keyboard commands (e.g. access keys) for all commands, menus, and controls.
    Make sure that your pages are error-tolerant
  • What Is Your Role in Accessibility?
    User Experience Designers
    Recognize the accessibility implications of your designs.
    Apply appropriate accessibility personas and scenarios to ensure your designs are accessible to all.
    User Experience Researchers
    Design usability tests to include users with disabilities and impairments.
    Conduct usability tests on specific accessibility features.
  • Summary: Designing for Accessibility
    In this module, we discussed:
    accessibility design myth
    Integrate accessibility into your design process and how to create accessibility personas
    explained the challenges of different types of disability users face
    design tips for different disability types
  • “Good Design Enables,
    Bad Design Disables”
    The Institute for Design and Disability
  • Design Resource
    Web Accessibility in Mind: http://webaim.org/
    Personas: http://www.deyalexander.com.au/resources/uxd/personas.html
    Effective Color Contrast: http://www.lighthouse.org/accessibility/effective-color-contrast/
    Bad website design examples: http://websitesthatsuck.com/
    How People with Disability Use the Web: http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
     Accessibility Color Wheel: http://gmazzocato.altervista.org/colorwheel/wheel.php
    Contrast Analyser: http://www.paciellogroup.com/resources/contrast-analyser.html
    Color Doctor: http://www.fujitsu.com/global/accessibility/assistance/cd/download.html
    Vischeck: http://www.vischeck.com/vischeck/vischeckURL.php