Unintentional Exclusion:
Web accessibility and
how we’re failing our users
LeeAnn Kinney @_leekinney
Image source: Flickr
57 million people in the US living with a disability
2010 US Census Bureau
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
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
Sass Specific Resources