Designing for Accessibility<br />After successfully completing this module, you will be able to:<br />create accessibility...
Outline<br />Accessibility Hit or Myth<br />Design Process and Personas<br />Design for Disability<br />Type definition<br...
Hit or Myth<br />Accessible sites look boring<br />“Text-only” pages are a good way to provide accessibility<br />(Myth)<b...
Hit or Myth<br />Accessible sites look boring<br />“Text-only” pages are a good way to provide accessibility<br />It’s pos...
Design Process<br />When in a project do you think “accessibility?”<br />
User-Centred Design Process<br />Evaluate<br />User Research<br />Design<br />Development<br />Scenarios and Requirements<...
Personas:a description of a representative user(a pretend person who represents a type or a group of users)<br />
Create Personas for Your Design<br />Ask yourself :<br />Who are the users?<br />What are the activities they wish to perf...
Create Accessibility Personas<br />Background: picture, name, age, job, interests, …<br />Attributes: ability, access poin...
Persona Example: Robert(Retiree with aging related conditions)<br />Background<br /><ul><li> 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</li></ul>Attribu...
 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</li></ul>“I often get stuck on a website.”<br />Goals<br /><ul><li> able to use basic servic...
 don’t get stuck on pages and able to save his data
 able to customize a website font and color</li></li></ul><li>Tips for Creating Personas<br />Empathy: focus on our target...
User-Centred Design Process<br />Evaluate<br />User Research<br />Design<br />Development<br />Scenarios and Requirements<...
Design for Disability<br />Vision<br />Hearing<br />Mobility<br />Cognitive<br />Speech<br />Focus of today<br />
The Four POUR Principles<br />The Four POUR Principles<br />WCAG 2.0 principles:<br /><ul><li>Perceivable
Operable
Understandable
Robust </li></li></ul><li>Vision Disability<br /><ul><li>Blindness
Low Vision
Color-blindness
Seizure</li></li></ul><li>Blindness<br />Let’s experience it!<br />What are the challenges?<br />
Blindness: Challenges<br /><ul><li>cannotscan for content
 primary interact with keyboard
 hard to access visual information
 limitations of screen readers</li></li></ul><li>Blindness: Design Tips<br />Perceivable: include detailed text descriptio...
Low-Vision<br />Let’s Experience it!<br />What are the challenges?<br />
Low-Vision: Challenges<br /><ul><li> cannot see without magnifier
text in graphics is hard to read
 cannot see pages with low contrast</li></li></ul><li>Low-Vision: Design Tips<br />Perceivable:<br />To make text more leg...
Color-Blindness<br />Assessment Samples<br />Test Plate 1<br />Test Plate 2<br />Test Image<br />(The number 12 should be ...
Color-Blindness: Types<br />Protanopia and protanomaly (red deficiencies)<br />Deuteranopia and deuteranomaly (green defic...
Color Blindness<br />Let’s Experience it!<br />What are the challenges?<br />
Color-Blindness: Challenges<br /><ul><li> problem color combinations
 color used as the only way to convey information</li></li></ul><li>Color Basics: Hue<br />
Color Basics: Lightness & Saturation<br />
Effective Color Contrast Guidelines<br />1<br />Exaggerate lightness differences between foreground and background colors<...
Effective Color Contrast Guidelines<br />2<br />Choose dark colors from the bottom half of the circle against light colors...
Effective Color Contrast Guidelines<br />3<br />Avoid contrasting hues from adjacent parts of the hue circle, especially i...
Color-Blindness: Design Tips<br />Perceivable:<br />Avoid colors or color pairs that cause problems for people who are col...
Seizure Disorders<br />
Hearing Disability<br />Let’s hear it!<br />What are the challenges?<br />
Hearing: Challenges<br /><ul><li> auditory prompts without visual signposts
 lacking caption/transcript for video and audio content</li></li></ul><li>Hearing: Design Tips<br />Perceivable:<br />Make...
 Synchronized captioning
 Transcript
 Text description (e.g. for audio instructions)</li></ul>Allow for user control of start/stop, animations, and other equiv...
Hearing Disability<br />a word about sign language…<br />
Mobility Disability<br />
Mobility<br />Let’s hear it!<br />What are the challenges?<br />
Motor: Assistive Technologies<br />
Mobility: Challenges<br /><ul><li> may not be able to control mouse or keyboard well
 may become fatigue very easily when using AT</li></li></ul><li>Their biggest challenge is…<br />Navigating on the web<br />
How we read online...<br />
How do we read online?<br />People almost always scan your pages<br />Userswon&apos;t read your text thoroughlyin a word-b...
&quot;Provide clear and consistent navigation mechanisms to increase the likelihood that a person will find what they are ...
Mobility: Design Tips<br />Operable:<br />build a good navigation structure<br />give feedback to user actions<br />help u...
Upcoming SlideShare
Loading in...5
×

Design for Accessibility

4,542

Published on

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

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

No Downloads
Views
Total Views
4,542
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
112
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Transcript of "Design for Accessibility"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×