Accessibility and the Modern Web

Assumptions

Disabled Disney Princesses
Source: Humor Chic

Accessibility and the Modern Web

Empathy in Design

Empathy Map

Today

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

Accessibility

Keyboard Access

Example: Virgin America

Accessibility

Color Contrast

Example: SAM Contrast Ratio

Accessibility

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.

Accessibility

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;
  }
    				  

CSS

ARIA Hidden


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

HTML

Freedom

Doesn't apply to us

Mitt Romney: I have empathy, damn it!

Minimum
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”

Source

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

Resources

Thank you.

http://tiny.cc/a11y-hive