Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CPHP Webinar: Making Web Design Work for People With Limited Vision

852 views

Published on

This webinar will present the principles of Universal Design and how to apply it to designing websites and print materials that are accessible to people with low or limited vision. Peter Freedman, an expert with 15 years’ experience in web design and e-commerce will address technical, visual, and regulatory considerations to improve web and print overall effectiveness for readability. Whether you’re tech-savvy or not, have resources or not, you will walk away with the strategies to evaluate and make improvements to the readability of your web and print materials for audiences with limited vision.

Learning Objectives
• Describe key principles of Universal Design and advantages for the user experience
• List an example of how layout can improve readability for the visually-impaired
• Explain how different typographic practices can improve readability

Speaker: Peter Freedman, Web Designer
Moderator: Nancy Murphy, Founder, CSR Communications

This presentation was from the sixth session in UC Berkeley's Center for Public Health Practice sponsored Health Communication Matters! Webinar Series, which will help participants in all walks of public health to apply health literacy principles to their everyday communications.

Please visit here to listen to the audio recording of the webinar:
http://www.meetingburner.com/b/hcwg/watch?c=TNAUPP&h=f


Visit this link for the other resources related to this webinar:

Health Literacy Undervalued by Public Health? A tool for public health professionals:
http://www.slideshare.net/SPHCalpact/calpact-training-health-literacy-undervalued-by-public-health-training-tool


Website: http://sph.berkeley.edu/careers/center-public-health-practice

Questions?

Email cphp@berkeley.edu

Published in: Education
  • Be the first to comment

CPHP Webinar: Making Web Design Work for People With Limited Vision

  1. 1. Center for Public Health Practice Welcome to the Health Communication Matters! Webinar Health Communications Working Group Community Health Planning & Policy Development California Public Health Association-North
  2. 2. Today you’ll be hearing from. . . Nancy Murphy, MSHC CSR Communications Moderator Peter Freedman Graphic Designer
  3. 3. Agenda • Review of session objectives • Introduction of today’s speaker • Peter Freedman presentation • Q & A • Resources • Next steps & conclusion
  4. 4. Objectives • Describe key principles of Universal Design and advantages for the user experience • List an example of how layout can improve readability for the visually-impaired • Explain how different typographic practices can improve readability
  5. 5. Health Literacy: Undervalued by Public Health? A tool for public health professionals. Prepared for the American Public Health Association Community Health Planning & Policy Development Section Tammy Pilisuk, MPH AUG 2011
  6. 6. Who is moderating our discussion today: Nancy Murphy Nancy Murphy, MSHC Founder & Chief Consultant CSR Communications Email: nancy@csrcommunications.com Website: www.csrcommunications.com
  7. 7. Introducing Peter Freedman Peter Freedman Graphic Designer Email: peternemser@yahoo.com
  8. 8. Good Typographic Practices for Accessibility Web Design Copyright © 2014 | Peter Freedman 8
  9. 9. Low Vision & Print Design  About 180 million people worldwide have low vision.  People with low vision have difficulty reading and seeing, which greatly affects quality of life.  Modern typographic design can improve access to your messages, allowing for a wider audience, in web, print, & motion graphic design. 9
  10. 10. 1. Introductionto WebAccessibility 2. Guidelines on Type and the Word 3. Interface and Layouts 4. Conclusion 5. Resources 6. References LectureOutline 10
  11. 11. 1. Introduction to Web Accessibility Copyright © 2014 | Peter Freedman 11
  12. 12. 1. Introduction to Web Accessibility What is Web Accessibility? Removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. Copyright © 2014 | Peter Freedman 12
  13. 13. 1. Introduction to Web Accessibility Disabilities That Can Be Addressed Via the Web Accessibility? • Visual Impairments blindness, low vision/poor eyesight, & color blindness • Motor/Mobility difficulty or unable to use hands. Tremors, muscle slowness, loss of fine muscle control, e.g., Parkinson's, Muscular Dystrophy, Cerebral Palsy, Stroke • Auditory Deaf or hearing impaired • Seizures Photoepileptic seizures caused by strobe or flashing • Cognitive/Intellectual Developmental disabilities, learning disabilities (dyslexia, dyscalculia) & cognitive affecting memory & attention Ct © 2014 | Peter Freedman 13
  14. 14. 1. Introduction to Web Accessibility 508c Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. § 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. Copyright © 2014 | Peter Freedman 14
  15. 15. 2. Guidelines on Type and the Word Copyright © 2014 | Peter Freedman 15 An easy way to improve access to one content is to employ good typographic practices that improve typographic legibility. The following slides go through the basics.
  16. 16. 2. Guidelines on Type and the Word Accessible Letter Characteristics Copyright © 2014 | Peter Freedman 16
  17. 17. Copyright © 2014 | Peter Freedman 17 2. Guidelines on Type and the Word Typeface Selection 1. Verdana - an accessible typeface? 2. Bodoni Condensed - an accessible typeface? 3. Algerian - an accessible typeface? 4. Edwardian Script - an accessible typeface? 5. Comic Sans - an accessible typeface? 6. Century Gothic - an accessible typeface?
  18. 18. Copyright © 2014 | Peter Freedman 18 2. Guidelines on Type and the Word Typeface Selection 1. Verdana - an accessible typeface? 2. Bodoni Condensed - an accessible typeface? 3. Time New Roman - an accessible typeface? 4. Edwardian Script - an accessible typeface? 5. Comic Sans - an accessible typeface? 6. Century Gothic - an accessible typeface?
  19. 19. 2. Guidelines on Type and the Word Font Size Copyright © 2014 | Peter Freedman 19 Font size recommendation 14pt / 19px / 1.2em / 120%
  20. 20. 2. Guidelines on Type and the Word Font Weight 20
  21. 21. 2. Guidelines on Type and the Word Font Slant Copyright © 2014 | Peter Freedman 21
  22. 22. 2. Guidelines on Type and the Word Font Width Copyright © 2014 | Peter Freedman 22
  23. 23. 2. Guidelines on Type and the Word Typographic Contrast + Color Copyright © 2014 | Peter Freedman 23
  24. 24. Copyright © 2014 | Peter Freedman 24 • Green & Red • Green & Brown • Blue & Purple • Green & Blue • Light Green & Yellow • Blue & Grey • Green & Grey • Green & Black 2. Guidelines on Type and the Word Typographic Contrast + Color: Colorblindness Avoid the following color combinations, which are especially hard on color blind people:
  25. 25. 2. Guidelines on Type and the Word The Word • Space words evenly on a line of text • Uneven spacing (Justified settings) decreases legibility • Create typeface hierarchies to structure information, enhances access to intended message • Keep indents and tabs to a minimum Copyright © 2014 | Peter Freedman 25
  26. 26. 2. Guidelines on Type and the Word Word Case •For continuous text, lowercase works the best •Avoid SMALL CAPS •AVOID PROSE IN ALL CAPITALS Copyright © 2014 | Peter Freedman 26
  27. 27. Copyright © 2014 | Peter Freedman 27 2. Guidelines on Type and the Word Word Case
  28. 28. 2. Guidelines on Type and the Word Tracking A slight increase in letter spacing is typically desirable. Avoid narrow spacing and overly wide spacing of text. Copyright © 2014 | Peter Freedman 28
  29. 29. 2. Guidelines on Type and the Word Line height Copyright © 2014 | Peter Freedman 29
  30. 30. 2. Guidelines on Type and the Word Line Length The recommended line length is of 55-65 characters per line or approximately 10-12 words/line. Reading on the screen is more fatiguing than reading print. Eyes prefer shorter lines and smaller paragraphs. Avoid hyphenation when setting paragraphs. Copyright © 2014 | Peter Freedman 30
  31. 31. Copyright © 2014 | Peter Freedman 31 2. Guidelines on Type and the Word Examples
  32. 32. 32 Times New Roman Georgia
  33. 33. 33 Times New Roman Georgia • Text too small • Line length too long • Times better fit for print • Good line length • Type size good • Good serif typeface • Italic type not good
  34. 34. 34 Verdana Century Gothic
  35. 35. 35 VerdanaCentury Gothic • Typeface not accessible – look too similar • Bold too hard to read • Letter space too tight • Best example • Verdana is a very accessible typeface • Good type size – 19px Verdana Century Gothic
  36. 36. 3. Navigation and Layout Copyright © 2014 | Peter Freedman 36
  37. 37. 3. Navigation and Layout Navigation •Keep navigation to 5 items or less •Chunk navigation into logical groups •Avoid interfaces that require excessive movement •Mouse over menus should be easy-to-activate, not overly sensitive to minor mouse movements •Rely on web standards for navigation, avoid closed technologies (Flash) •Adapt to multiple devices and screen resolutions Copyright © 2014 | Peter Freedman 37
  38. 38. Copyright © 2014 | Peter Freedman 38 3. Navigation and Layout Navigation Good Decent Too Difficult
  39. 39. 3. Navigation and Layout Layout • Keep simple layouts • Keep critical information above the fold • Avoid cluttered interfaces • Try to limit interface zones to 5 or less • Ensure ample margin space Copyright © 2014 | Peter Freedman 39
  40. 40. Copyright © 2014 | Peter Freedman 40 3. Navigation and Layout Layout Good Good Too Busy
  41. 41. Copyright © 2014 | Peter Freedman 41 3. Navigation and Layout Layout
  42. 42. 4. Conclusion • Make the type large enough for those with low-vision to see (19px -Verdana) • Tune the type for optimal readability and comprehension of information (typeface, spacing, color contrast) • Design elements mean messages are more accessible to all • In a time of information overload, go for simplicity in presentation of content • Reduced anxiety in front of the computer screen and increased ease with access result in better comprehension and understanding Copyright © 2014 | Peter Freedman 42
  43. 43. 5. Resources Website Accessibility Standards • www.w3.org/WAI/yourWAI • www.hhs.gov/web/508/ (508 Standards) Website Testing • http://wave.webaim.org/ • http://achecker.ca/checker/index.php Typography / Fonts / Color • www.fontfont.com/fonts • http://webaim.org/techniques/fonts/ Copyright © 2014 | Peter Freedman 43 Accessible Graphic Design • www.lighthouse.org/accessibility/de sign/ • www.si.edu/Content/Accessibility/P ublication-Guidelines.pdf • http://viget.com/inspire/a- designers-guide-to-accessibility- and-508-compliance Advocacy Groups • www.rnib.org.uk • www.lighthouse.org • www.udlcenter.org/ • www.rca.ac.uk/research- innovation/helen-hamlyn-centre/
  44. 44. 6. References 44 Arditi, A 1991. ‘A Few Practical Tips for: Print Legibility and Low-vision’, Lighthouse News, Lighthouse International. Bernard, M et al. 2001, ‘The Effects of Font Type and Size on the Legibility and Reading Time of Online Text by Older Adults’, CHI Interactive Posters. Boyarski, Dan, et al. 1998, ‘A study of Fonts Designed for Screen Display’, CHI . ‘Designing Web sites, Guidelines for usability 2001’, British Telecommunications plc. Gerstner, K 1974, Compendium for Literates, MIT Press, Boston. Larson, K 2004, ‘The Science of Word Recognition or how I learned to stop worrying and love the bouma’. Retrieved 2006, from www.microsoft.com/typography/ctfonts/WordRecognition.aspxAdvanced Reading Technology, Microsoft Corporation. Millbank, B. 2002, ‘Clear Print’. RNIB Corporate Information and Publishing, RNIB. www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_printdesign.hcsp#P6_523 Spencer, H 1969, ‘The Visible Word’, Lund Humphries, London. Stickler, Z & Neafsy, P 2002, ‘Visual Design of Interactive Software for older Adults: Preventing Drug Interactions in Older Adults’. Visible Language 36.1 Text Matters n.d., ‘Typography for visually impaired users’. Retrieved 2006, from www.textmatters.com/our_interests/guidelines/typog_visual_impaired/ World Health Organization 2001. ‘Prevention of blindness’. Retrieved 2003, from www.who.int /pbd/pbl/pbl_home.htm. w3.org n.d., ‘15.7 Font size: the 'font-size' property’. Retrieved July 24, 2006, from www.w3.org/TR/CSS21/fonts.html#font-size-props
  45. 45. Thank you to our speaker! Peter Freedman peternemser@yahoo.com
  46. 46. Thank you to our Sponsors! Community Health Planning and Policy Development Section, APHA Health Communication Working Group, APHA California Public Health Association, North Center for Public Health Practice, UC Berkeley
  47. 47. Thank you to our planning committee • Tammy Pilisuk, MPH, APHA-CHPPD • Erin Brigham, MPH, CareSource, APHA-CHPPD • Meghan Bridgid Moran, PhD, San Diego State University, School of Communications • Lisa Peterson, MPH, CPHP at UC Berkeley • Stephanie Bender, MS, Health Educator • Aileen Kantor, Health Literacy Innovations • Nancy Murphy, MSHC, CSR Communications
  48. 48. About This Series • The Health Communication Matters series will help participants in all walks of public health to apply health literacy principles to their everyday communications. • What audiences do you communicate with—consumers, health professionals, disenfranchised communities, your public health peers? Whatever your role in public health, it’s likely that you need to communicate effectively. But how do you know your communication is effective? • Only about 10 percent of the general population is considered “health literate.” That leaves the vast majority of us with barriers to understanding the health-related information we read.
  49. 49. Conclusion Thank you! UC Berkeley Center for Public Health Practice Health Communications Working Group Community Health Planning & Policy Development California Public Health Association-North

×