Accessibility Best Practices

Warmup

• What does the word accessibility bring to mind for you?
• What might we be able to do to make our websites more accessible?
• Why would we work to make our websites more accessible?

The Need

• 57 million Americans with a disability
• According to the 2012 US Census:
  • 19.9 Million (8.2%) have difficulty lifting or grasping
  • 15.2 Million (6.3%) have a cognitive, mental, or emotional impairment
  • 8.1 Million (3.3%) have a vision impairment
  • 7.6 Million (3.1%) have a hearing impairment
• Pew Internet Project Survey: 54% of adults living with a disability go online

Top 4 Accessibility Issues

• Visual
• Mobility
• Cognition
• Hearing

Visual: Experiment 1

• Read through article
• Download chrome vox extension
• Navigate through article with eyes closed

Visual: Experiment 2

• Download I want to see like the colour blind
• Visit some of your favorite websites
• Left-click the page and click Experience Colour Blindness

In Pairs

• What was the biggest difference between both experiences?
• What was the most frustrating thing for you?
• Could you get the screen reader to read the whole article for you?

Mobility

Watch this video from dinosaur.js (up to the 10 minute mark)

Mobility: Experiment 3

• Visit the autotrader.com website and try to use tab to navigate the site
• Watch this video on tabindex

In Pairs

• What was your experience like tabbing around?
• How was the focus?
• Did you tab into the dropdown field?
• Do you see a benefit to using tabindex?
• What did you notice about the Auto Trader website while only using tab interaction?

Cognition

Read this article regarding cognition accessibility.

Cognition: Experiment 4

• Read this document.
• Discuss with a partner:
  • What steps can we take to consider people with cognitive issues?
  • Can you think of any website you know that would be difficult to use for someone with cognitive issues?

Code Tips

• Add the axe extension.
• Review other code tips from the lesson