This document provides an overview of designing for accessibility, focusing on creating accessibility personas and understanding the challenges faced by users with disabilities. It discusses various disability types, design tips for accommodating these users, and debunks common myths about accessibility. The module aims to integrate accessibility into the design process by evaluating user research and ensuring effective navigation, content perception, and usability.

1. Designing for AccessibilityAfter successfully completing this module, you will be able to:create accessibility personasunderstand the challenges of users with disabilitiesapply design tips for different disability types

2. OutlineAccessibility Hit or MythDesign Process and PersonasDesign for DisabilityType definitionChallenges users faceDesign tipsSummary and Design Resource

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

4. Hit or MythAccessible sites look boring“Text-only” pages are a good way to provide accessibilityIt’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 ProcessWhen in a project do you think “accessibility?”

6. User-Centred Design ProcessEvaluateUser ResearchDesignDevelopmentScenarios 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 DesignAsk yourself :Who are the users?What are the activities they wish to perform?Why they might visit your websites? i.e. motivationHow does our website/services fit into their context of life?

9. Create Accessibility PersonasBackground: 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?

10. Persona Example: Robert(Retiree with aging related conditions)Background age: 65

11. occupation: retired

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

13. Technical level: not tech savvy, only uses the web to manage some of his household services and financesAttributes uses screen magnifier

14. uses computers only at home

15. preferred large links and icons

16. finds scrolling stickers and flashing animations very distracting

17. easy to get lost in the site“I often get stuck on a website.”Goals able to use basic services on the web easily

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

19. able to customize a website font and colorTips for Creating PersonasEmpathy: focus on our target users and their pain pointsConcrete: include details of your personas and make them realApply a face to your personaInclude disability condition and AT information for accessibility personas

20. User-Centred Design ProcessEvaluateUser ResearchDesignDevelopmentScenarios and Requirements

21. Design for DisabilityVisionHearingMobilityCognitiveSpeechFocus of today

22. The Four POUR PrinciplesThe Four POUR PrinciplesWCAG 2.0 principles:Perceivable

23. Operable

24. Understandable

25. Robust Vision DisabilityBlindness

26. Low Vision

27. Color-blindness

28. SeizureBlindnessLet’s experience it!What are the challenges?

29. Blindness: Challengescannotscan for content

30. primary interact with keyboard

31. hard to access visual information

32. limitations of screen readersBlindness: Design TipsPerceivable: include detailed text description for graphics, video, animationOperable: fully operable with keyboardUnderstandable: make sure your page has a clear, and consistent structure, and avoid using complex tablesRobust: be careful with new technologies that will raise incapability with AT

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

40. Low-Vision: Challenges cannot see without magnifier

41. text in graphics is hard to read

42. cannot see pages with low contrastLow-Vision: Design TipsPerceivable: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

43. Color-BlindnessAssessment SamplesTest Plate 1Test Plate 2Test Image(The number 12 should be visible by all.)Test Plate 3Test Plate 4

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

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

46. Color-Blindness: Challenges problem color combinations

47. color used as the only way to convey informationColor Basics: Hue

48. Color Basics: Lightness & Saturation

49. Effective Color Contrast Guidelines1Exaggerate lightness differences between foreground and background colors

50. Effective Color Contrast Guidelines2Choose dark colors from the bottom half of the circle against light colors from the top half of the circle.Light ColorsDark Colors

51. Effective Color Contrast Guidelines3Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.Light ColorsDark Colors

52. Color-Blindness: Design TipsPerceivable: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 DisabilityLet’s hear it!What are the challenges?

56. Hearing: Challenges auditory prompts without visual signposts

57. lacking caption/transcript for video and audio contentHearing: Design TipsPerceivable:Make sure they can perceive (hear) auditory content Alternative text for animation

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 Disabilitya word about sign language…

62. Mobility Disability

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

65. Motor: Assistive Technologies

66. Mobility: Challenges may not be able to control mouse or keyboard well

67. may become fatigue very easily when using ATTheir biggest challenge is…Navigating on the web

68. How we read online...

69. How do we read online?People almost always scan your pagesUserswon't read your text thoroughlyin a word-by-word mannerMost readers have 2 key questions:Am I on the right page? If not, where do I go next? Headingslinks

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 TipsOperable:build a good navigation structuregive feedback to user actionshelp users navigate efficiently through keyboard