Accessibility and the Modern Web


Disabled Disney Princesses
Source: Humor Chic

Accessibility and the Modern Web

Empathy in Design

Empathy Map


  • Accessibility 101
  • What About MVP?
  • Why We Design
  • Resources


Keyboard Access

Example: Virgin America


Color Contrast

Example: SAM Contrast Ratio


Text Alternatives

How to take a good author photo. Image 1: do not create direct eye contact. Image 2: Act like you've got better things to do. Image 3: Go viral. Include cats. Image 4: Represent your co-author well.


HTML Semantics

RWD + A11Y = ♥

Brad Frost's photo of a bajillion digital devices
And Google Glass
And Leap Motion
And Google Watch
And Your Voice!
Source: Brad Frost

Really-hidden vs. offscreen

  .reallyHidden {
    display: none;
    visibility: hidden;


  .offscreen {
    display: block;
    left: -50000px;
    position: absolute;


ARIA Hidden

        <i aria-hidden="true" class="icomoon-x"></i>
        <span class="offscreen">Toggle Menu</span>



Doesn't apply to us

Mitt Romney: I have empathy, damn it!

Viable Product

A strategy used for fast and quantitative market testing of a product or feature

Early Adopters

Tommy Edison taking an iPhone photo of his film crew
Tommy Edison, Blind Film Critic

Do it right the first time

How will this software improve peoples’ lives?

Get someone hired

Jonah Hill happy to get a job offer on the phone

Help them manage
their finances

Scrooge McDuck diving into his pool of money

H&R Block

“H&R Block had violated the Americans with Disabilities Act by having a website that was inaccessible to people with various disabilities, not just the blind.”
“The DOJ expects businesses to ensure that customer-facing digital technology is accessible to individuals with disabilities”


Set them up for success

What could we do?

  • Add Skip Links
  • Provide Text Alternatives
  • Make a Delightful Experience
  • Innovate

The Feedback Tab

Make it accessible.

Office Space Fax Machine Death


Thank you.