View
184
Download
0
Category
Tags:
Preview:
Citation preview
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
Today you’ll be hearing from. . .
Nancy Murphy, MSHC
CSR Communications
Moderator
Peter Freedman
Graphic Designer
Agenda
• Review of session objectives
• Introduction of today’s speaker
• Peter Freedman presentation
• Q & A
• Resources
• Next steps & conclusion
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
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
Who is moderating our
discussion today:
Nancy Murphy
Nancy Murphy, MSHC
Founder & Chief Consultant
CSR Communications
Email: nancy@csrcommunications.com
Website: www.csrcommunications.com
Introducing
Peter Freedman
Peter Freedman
Graphic Designer
Email: peternemser@yahoo.com
Good Typographic Practices for Accessibility Web Design
Copyright © 2014 | Peter Freedman 8
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
1. Introduction to Web Accessibility
2. Guidelines on Type and the Word
3. Interface and Layouts
4. Conclusion
5. Resources
6. References
Lecture Outline
10
1. Introduction to Web Accessibility
Copyright © 2014 | Peter Freedman 11
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
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
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
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.
2. Guidelines on Type and the Word
Accessible Letter Characteristics
Copyright © 2014 | Peter Freedman 16
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?
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?
2. Guidelines on Type and the Word
Font Size
Copyright © 2014 | Peter Freedman 19
Font size recommendation 14pt / 19px / 1.2em / 120%
2. Guidelines on Type and the Word
Font Weight
20
2. Guidelines on Type and the Word
Font Slant
Copyright © 2014 | Peter Freedman 21
2. Guidelines on Type and the Word
Font Width
Copyright © 2014 | Peter Freedman 22
2. Guidelines on Type and the Word
Typographic Contrast + Color
Copyright © 2014 | Peter Freedman 23
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:
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
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
Copyright © 2014 | Peter Freedman 27
2. Guidelines on Type and the Word
Word Case
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
2. Guidelines on Type and the Word
Line height
Copyright © 2014 | Peter Freedman 29
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
Copyright © 2014 | Peter Freedman 31
2. Guidelines on Type and the Word Examples
32
Times New Roman Georgia
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
Verdana Century Gothic
35
Verdana Century 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
3. Navigation and Layout
Copyright © 2014 | Peter Freedman 36
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
Copyright © 2014 | Peter Freedman 38
3. Navigation and Layout
Navigation
Good Decent Too Difficult
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
Copyright © 2014 | Peter Freedman 40
3. Navigation and Layout
Layout
Good Good Too Busy
Copyright © 2014 | Peter Freedman 41
3. Navigation and Layout
Layout
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
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/Publication-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/
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
Thank you to our speaker!
Peter Freedman
peternemser@yahoo.com
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
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
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.
Conclusion
Thank you!
UC Berkeley Center for Public Health Practice
Health Communications Working Group
Community Health Planning & Policy Development
California Public Health Association-North
Recommended