Unintentional Exclusion:

Web accessibility and how we’re failing our users

LeeAnn Kinney @_leekinney

a child playing with building blocks Image source: Flickr
a form on expedia used to book a flight
instacart homepage
prescription refill online form capital one mobile check deposit login
lyft car advertisement

57 million people in the US living with a disability

2010 US Census Bureau

Of all US computer users

22 million have a mild visual difficulty 11 million being severe

(Source: Study Commissioned by Microsoft Corporation and Conducted by Forrester Research, Inc.)

Of all US computer users

24 million have a mild dexterity difficulty or impairment 7 million being severe

Types of Disability

  • Visual: blind or low-sight, color blind
  • Hearing: deaf or hard-of-hearing
  • Physical: MS, ALS, paraplegic/quadriplegic
  • Cognitive: dyslexia, low literacy, learning disabilities, ESL
  • Seizures: photosensitive

Temporary or Situational Disabilities

  • Aging: dementia/Alzheimer’s, cataracts, low vision, mobility, loss of fine motor skills
  • Broken limbs
  • Sleep deprivation
  • Chemo brain
  • Migraines/headaches

76 million baby boomers in the US

2014 US Census Bureau

a computer user using a mouth stick to type a blind person using an iphone a blinde person using an iphone

Why are we excluding so many users?

  • It’s too hard
  • It’s too expensive
  • We're lazy
  • We don’t realize we’re doing it

It’s expensive

Not if it’s built in at the beginning

It’s hard

Here are a few easy steps to get started

8 Easy Tips

  • Alt text
  • Links
  • Navigation
  • Contrast & Color
  • Keyboard focus
  • Forms
  • Semantic HTML
  • Video captions

Alt Text

  • Provide the function, not the content
  • Make sure it's providing context
  • If image is purely decorative use “” to instruct screen reader to skip

                                                                                                                                    

<img src="img/twitter-logo.png" alt="follow us on twitter">

Links

  • Don’t use color alone to signify a link
  • Link text should make sense (and let a user know where it is taking them)
  • Don’t open in a new window (unless you let the user know first)

Navigation

  • Provide skip to main content
  • Make sure users can tab through navigation

Color & Contrast

  • Don’t rely on color to indicate something
  • Use a minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text

Keyboard Focus

  • Don’t remove :focus
  • Style it to fit in with the look and feel of your site

Accessible Forms

  • Labels
  • Tab
  • Error Messages
  • Captchas

Semantic HTML

  • Gives the page meaning and structure
  • Use header tags in correct order

Video Captions

  • Provide captions if you have video on your site
  • Helps SEO
  • Helps users to scan content of video before watching

We’re lazy

But this can be a good thing!

It's Unintentional

So let's make an intentional effort to fix it

Accessibility Offline

  • Classes
  • Meetups
  • Conferences

Tools & extensions

Resources

Sass Specific Resources

Thank you!

@_leekinney

hi@leekinney.is

leekinney.github.io/sassconf