cphp webinar: making web design work for people with limited vision

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: [email protected]

Website: www.csrcommunications.com

Introducing

Peter Freedman

Peter Freedman

Graphic Designer

Email: [email protected]

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


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.



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


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.




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.


Accessible Letter Characteristics




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?



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?


Font Size


Font size recommendation 14pt / 19px / 1.2em / 120%


Font Weight

20


Font Slant



Font Width



Typographic Contrast + Color



• Green & Red • Green & Brown • Blue & Purple • Green & Blue • Light Green & Yellow • Blue & Grey • Green & Grey • Green & Black


Typographic Contrast + Color: Colorblindness

Avoid the following color combinations, which are especially hard on color blind people:


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



Word Case

•For continuous text, lowercase works the best

•Avoid SMALL CAPS

•AVOID PROSE IN ALL CAPITALS




Word Case


Tracking

A slight increase in letter spacing is typically desirable. Avoid narrow spacing and overly wide spacing of text.



Line height



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.



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


• 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


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




Navigation

Good Decent Too Difficult


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




Layout

Good Good Too Busy



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


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/


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/

http://www.w3.org/WAI/yourWAI

http://www.hhs.gov/web/508/

http://www.hhs.gov/web/508/

http://wave.webaim.org/

http://achecker.ca/checker/index.php

http://www.fontfont.com/fonts

http://webaim.org/techniques/fonts/

http://www.lighthouse.org/accessibility/design/



http://www.si.edu/Content/Accessibility/Publication-Guidelines.pdf




http://viget.com/inspire/a-designers-guide-to-accessibility-and-508-compliance
















https://www.rnib.org.uk/

http://www.lighthouse.org/

http://www.udlcenter.org/

http://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

http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size



Thank you to our speaker!

Peter Freedman

[email protected]

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

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

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

cphp webinar: making web design work for people with limited vision

Education

web accessibility disabilities

web accessibility copyright

public health professionals

public access

webinar health communications

public health practice

readability health literacy

health communication