This document provides an overview of web accessibility and best practices for ensuring accessibility compliance and usability. It discusses analyzing audience needs, keeping designs simple with clear layouts, writing accessible content, developing accessible navigation and structure, and ongoing testing and maintenance. The goal is to consider accessibility at all stages of design, development and implementation in order to remove barriers that prevent users with disabilities from accessing websites.
2. @beacontec
A LITTLE ABOUT ME
• Has provided leadership and consultation for
over 35 Higher Education projects.
• Specializes in the analysis, design, and
implementation of websites.
• Passionate about design and development
strategies focused on user experience,
accessibility, multi-device interactions, and
technical best practices.
• Avid kayaker and dog mom.
Keana Lynch, Director of UX Design & Development at
@keana_lynch
klynch@beacontec.com
3. @beacontec
WHAT IS WEB ACCESSIBILITY?
Web accessibility is the practice of removing barriers that
prevent interaction with, or access to websites, by people with
disabilities.
4. @beacontec
“The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”
– Tim Berners-Lee
W3C Director and inventor of the World Wide Web
9. @beacontec
Analysis Design Content Development Testing
When should you start thinking about
accessibility?
( analysis ) Make a Plan
ACCESSIBILITY MUST BE CONSIDERED
AT EVERY STEP OF THE PROJECT AND NOT APPROACHED AS
A LAST MINUTE CHECKLIST.
11. @beacontec
Web accessibility is the sole
responsibility of developers
( analysis ) Make a Plan
MYTH:
Every member of the team is
responsible for making their part of
a project accessible
FACT:
13. @beacontec
35%
22%
15% 14%
9%
0%
10%
20%
30%
40%
Age Demographic
18-24 25-34 35-44 45-54 55-64
62% of students & 51% of parents
prefer web-based resources for learning about prospective universities
0% 20% 40% 60% 80%
Device Usage
Mobile Tablet Desktop
REMEMBER EACH AUDIENCE IS UNIQUE.
( analysis ) Know your Audience
14. @beacontec
Nearly1 in 5
Americans have a Disability
19.9 million
have difficulty lifting or grasping.
15.2 million
have a cognitive, mental, or
emotional impairment.
8.1 million
have a vision impairment.
7.6 million
have a hearing impairment.
About 56.7 million people — 19 percent of the population had a disability in 2010,
according to the U.S. Census Bureau.
( analysis ) Know your Audience
15. @beacontec
Consider including a wide range of
users in your Strategy phase focus
groups or online testing.
( analysis ) Know your Audience
18. @beacontec
( design ) Keep it Simple
QUICK TIPS:
• Keep layouts clean and simple
• Don’t be afraid to use white space
• Be consistent with design elements & structure
• Have a clear sense of structure and hierarchy
• Use calls to action wisely
19. @beacontec
Design responsive to different screen sizes, from
small smart phones to large desktop monitors.
( design ) Keep it Simple
24. @beacontec
QUICK TIPS:
• Groups similar items with design elements that separate them from
other items on the page.
• Never rely on color alone to convey functional meaning.
• Make the font large enough.
• Provide enough space between lines of text.
• Use clean typography. Stick with one or two fonts in the design.
• Left aligned text is more readable.
( design ) Clear Visual Layouts
27. @beacontec
Users may have trouble reading content for many reasons:
• Cognitive problems like dyslexia
• Vision disabilities
• Low literacy
• Reading in a second language
• Rushed, tired, stressed, or reading on a small screen
( content ) Information is Critical
CONTENT IS PART OF ACCESSIBILITY.
28. @beacontec
( content ) Information is Critical
WRITE FOR
YOUR AUDIENCE
Have clear purpose,
solid structure, and
clean presentation.
30. @beacontec
( content ) Scanning and Understanding
• Logically structure a page
• Provide good headings and
use heading tags
(<h1>, <h2>, etc.)
• Start with an overview
• Make it easy to scan.
• numbered lists
• bullet points
• use bolding and italics to
style or emphasize text.
• subheads
• spaces between lines
• make link text meaningful
• Break up blocks of text
32. @beacontec
The way the code is written can
determine the quality of the
user experience.
( development ) Structure
33. @beacontec
QUICK TIPS:
• Create a solid, clean structure with display instructions.
• Organize code so that it is read in the order it appears in the file.
• Use tags like <title> and <h1…6> to communicate content structure.
• Use scalable fonts (% and em)
• Follow web standards and best practices (www.w3.org).
• Separate content from design using CSS.
• Code should meet WCAG and Section 508 requirements.
( development ) Structure
35. @beacontec
Users may have trouble navigating for many reasons:
• Users with motor disabilities rely on a keyboard.
• Nonvisual users cannot see to point the mouse and typically use a keyboard for
navigation.
• People with dexterity issues may find mouse operations awkward and
cumbersome.
• Some alternative input devices work by activating keyboard commands instead.
• Also some people find keyboard control easier, more comfortable, and more
efficient than pointing.
( development ) Navigation
37. @beacontec
• Provide a logical navigation tab order.
• Don’t require point and click interactions (hover, select, etc.).
• Show which element has keyboard focus.
• Be sure to include skip links (skip navigation).
• Make search prominent, easy to use, and accurate.
( development ) Navigation
QUICK TIPS:
45. @beacontec
Resources
• Horton, Sarah & Quesenbery, Whitney A Web for Everyone. Brooklyn: Rosenfeld Media, January 2014. Print.
• Geyer, Stephanie. "Communicating with college-bound students and their parents: New findings from E-
Expectations." Ruffalo Noel Levitz Blog: Higher Education Enrollment, Student Retention, and Student Success.
17 Sept. 2014. Web.
• US Census Bureau Public Information Office. "Newsroom Archive." Nearly 1 in 5 People Have a Disability in
the U.S., Census Bureau Reports - Miscellaneous - Newsroom - U.S. Census Bureau. 19 May 2016. Web.
• "Keyboard Accessibility." WebAIM - Web Accessibility In Mind. Web.
• "Content Strategy Basics." Usability.gov. Department of Health and Human Services, 24 Jan. 2016. Web.
• "Colour Blindness." Colour Blind Awareness. Web.
