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

1. 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

2. Outline Accessibility Hit or Myth Design Process and Personas Design for Disability Type definition Challenges users face Design tips Summary and Design Resource

3. Hit or Myth Accessible sites look boring “Text-only” pages are a good way to provide accessibility (Myth) (Myth)

4. 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

5. Design Process When in a project do you think “accessibility?”

6. User-Centred Design Process Evaluate User Research Design Development Scenarios and Requirements

7. Personas:a description of a representative user(a pretend person who represents a type or a group of users)

8. 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?

9. 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?

11. occupation: retired

12. aging related disabilities: low-vision, hand tremor, short-term memory loss

14. uses computers only at home

15. preferred large links and icons

16. finds scrolling stickers and flashing animations very distracting

18. don’t get stuck on pages and able to save his data

20. User-Centred Design Process Evaluate User Research Design Development Scenarios and Requirements

21. Design for Disability Vision Hearing Mobility Cognitive Speech Focus of today

23. Operable

24. Understandable

26. Low Vision

27. Color-blindness

30. primary interact with keyboard

31. hard to access visual information

33. Low-Vision Let’s Experience it! What are the challenges?

41. text in graphics is hard to read

43. 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

44. Color-Blindness: Types Protanopia and protanomaly (red deficiencies) Deuteranopia and deuteranomaly (green deficiencies) Tritanopia (blue deficiencies) Rod monochromacy or achromacy (no color)

45. Color Blindness Let’s Experience it! What are the challenges?

48. Color Basics: Lightness & Saturation

49. Effective Color Contrast Guidelines 1 Exaggerate lightness differences between foreground and background colors

50. 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

51. 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

52. 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.

53. Seizure Disorders

54. Hearing Disability Let’s hear it! What are the challenges?

58. Synchronized captioning

59. Transcript

60. Text description (e.g. for audio instructions)Allow for user control of start/stop, animations, and other equivalent options.

61. Hearing Disability a word about sign language…

62. Mobility Disability

63. Mobility Let’s hear it! What are the challenges?

65. Motor: Assistive Technologies

68. How we read online...

69. 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

70. "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

71. Mobility: Design Tips Operable: build a good navigation structure give feedback to user actions help users navigate efficiently through keyboard

73. consistent navigation structure

74. provide sitemap

79. Vote This Submission

80. 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.

82. 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.

83. Effective Navigation Tips 3 help users navigate efficiently through keyboard

84. Keyboard Navigation Enable navigation to all elements using tab or arrow keys. Provide keyboard shortcuts to important links and content. (e.g. skip links)

86. Help! … Skip Links please!

87. 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

88. 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.

89. 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

90. “Good Design Enables, Bad Design Disables” The Institute for Design and Disability

91. 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