Accessibility and the Modern Web

Assumptions

Source: Humor Chic

Accessibility and the Modern Web

Marcy Sutton

SUBSTANTIAL

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

Accessibility

HTML Semantics

RWD + A11Y = ♥

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

@marcysutton iPhone was the 1ST piece of tech I could use out of the box. Normally need sighted help to get screen reader installed etc.

— Steve Sawczyn (@steveofmaine) October 11, 2013

@marcysutton If you think about it, I can't even buy and use a microwave until someone helps me label touchpad.

— Steve Sawczyn (@steveofmaine) October 11, 2013

Doesn't apply to us

Minimum Viable Product

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

Early Adopters

Tommy Edison, Blind Film Critic

Do it right the first time

How will this software improve peoples’ lives?

Get someone hired

Help them manage their finances

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.

Resources

Thank you.

http://tiny.cc/a11y-hive

Accessiblity and the Modern Web // @MarcySutton // Substantial

Assumptions

marcysutton

Assumptions

0 0