2. Why is web accessibility
important?
What does an accessible
website mean?
How can you ensure your
website is accessible?
@nikers85 #vision2020exeter
3. POP QUIZ…
Why should you make your site accessible?
A. Because you should
B. It’s the law
C. It’s the right thing to do
D. For Google
E. All of the above
@nikers85 #vision2020exeter
4. ANSWER
Why should you make your site accessible?
E. All of the above
@nikers85 #vision2020exeter
6. 1 in 4 adults in the US
has a disability,
including impairments
with vision, hearing,
mobility, and cognition.
@nikers85 #vision2020exeter
7. Why is web accessibility important?
@nikers85 #vision2020exeter
8. ...the inclusive practice of ensuring there
are no barriers that prevent interaction
with, or access to, websites on the World
Wide Web by people with physical
disabilities
@nikers85 #vision2020exeter
9. Don’t exclude people from using your
products or services
@nikers85 #vision2020exeter
10. Accessibility encompasses all disabilities
that affect access to the web, including:
● Visual
@nikers85 #vision2020exeter
11. Accessibility encompasses all disabilities
that affect access to the web, including:
● Visual
● Auditory
@nikers85 #vision2020exeter
12. Accessibility encompasses all disabilities
that affect access to the web, including:
● Visual
● Auditory
● Motor/Mobility
@nikers85 #vision2020exeter
13. Accessibility encompasses all disabilities
that affect access to the web, including:
● Visual
● Auditory
● Motor/Mobility
● Cognitive/Learning
@nikers85 #vision2020exeter
14. The negative implications
to not having an
accessible website
Many different groups benefit from
digital accessibility
@nikers85 #vision2020exeter
15. The negative implications
to not having an
accessible website
Inability to complete business
transactions on website impacts
brand reputation
Many different groups benefit from
digital accessibility
@nikers85 #vision2020exeter
16. The negative implications
to not having an
accessible website
Inability to complete business
transactions on website impacts
brand reputation
Many different groups benefit from
digital accessibility
Legal Implications
@nikers85 #vision2020exeter
18. What does an accessible website mean?
@nikers85 #vision2020exeter
19. WCAG defines 4 principles:
P O U R
Perceivable - Information can be presented in different ways
@nikers85 #vision2020exeter
20. WCAG defines 4 principles:
P O U R
Perceivable - Information can be presented in different ways
Operable - Functionality can be used in different modalities
@nikers85 #vision2020exeter
21. WCAG defines 4 principles:
P O U R
Perceivable - Information can be presented in different ways
Operable - Functionality can be used in different modalities
Understandable - Information and functionality is understandable
@nikers85 #vision2020exeter
22. WCAG defines 4 principles:
P O U R
Perceivable - Information can be presented in different ways
Operable - Functionality can be used in different modalities
Understandable - Information and functionality is understandable
Robust - Content can be interpreted reliably
@nikers85 #vision2020exeter
26. Common issues people have online
● Text that doesn’t wrap
● Links without anchor text
● Code issues for keyboard-only users
● Font size
● Poor contrast
● Color reliance
● Animations and carousels
● Page time limits
@nikers85 #vision2020exeter
44. Considerations for different types of impairments
Visual Impairments
● Low vision
● Blindness
● Color blindness
@nikers85 #vision2020exeter@nikers85 #vision2020exeter
45. Considerations for different types of impairments
Visual Impairments
● Low vision
● Blindness
● Color blindness
Recommendations
● Color contrast
● Fonts
● Descriptive links
● Graphics
● No mouse-over events
● Don’t use iFrames
● Use friendly tables
@nikers85 #vision2020exeter
46. Considerations for different types of impairments
Auditory Impairments
● Spectrum hearing loss
● Tone deafness
@nikers85 #vision2020exeter
47. Considerations for different types of impairments
Auditory Impairments
● Spectrum hearing loss
● Tone deafness
Recommendations
● Subtitles
● Closed captions
● Transcripts
● Sign language
● Visible and functional controls
● Multiple forms of contact
48. Considerations for different types of impairments
Speech Impairments
● Impediments
● Lisps
● Accents
● Aphasia
● Muteness
@nikers85 #vision2020exeter
49. Considerations for different types of impairments
Speech Impairments
● Impediments
● Lisps
● Accents
● Aphasia
● Muteness
Recommendations
● Simple requirements
● Alternative input
@nikers85 #vision2020exeter
50. Considerations for different types of impairments
Motor Impairments
● Arthritis
● Tremors
● Parkinson’s
● ALS
● MS
● Palsy
● Quadriplegia
@nikers85 #vision2020exeter
51. Considerations for different types of impairments
Motor Impairments
● Arthritis
● Tremors
● Parkinson’s
● ALS
● MS
● Palsy
● Quadriplegia
Recommendations
● Don’t require a mouse
● Use large link targets
● Use focus state for links
● Skip to content
● Don’t use autoplay
● Don’t use shortcut keys
● Extend session timeouts
@nikers85 #vision2020exeter
52. Web accessibility also benefits people without disabilities
● Small screens & different input modes
● Older people with age-related changes
● Temporary disabilities (broken bones)
● Situational limitations (bright sunlight)
● Slow internet connections or limited/expensive bandwidth
@nikers85 #vision2020exeter
53. Browser Settings
(desktop & mobile)
Customizing platform
Customizing browser settings
Font size
Zoom in/out
Use high contrast mode
@nikers85 #vision2020exeter
55. Activity: Use the web without a mouse
● Tab key moves to the next link, form element, or button
● Shift+Tab moves to the previous link, form element, or button
● Enter or spacebar activates the current link or button
● Try arrow keys, Escape key, and other keys to see what they do
@nikers85 #vision2020exeter
56.
57. Conformance
WCAG 2.0 Success Criteria
Meet or satisfy the
'requirements' of the
standard
5 Requirements
@nikers85 #vision2020exeter
