Your browser doesn’t support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

dcmouyard.github.io/accessible-experience

The Accessible Experience Designing for Everyone

Dan Mouyard Lead Front-End Developer

The Importance of Accessibility

Different Types of Disabilities

Specific Design Considerations

Why is Accessibility
so Important?

Personal Story

How does your job contribute to making the world better?

Moral Reason

For people without disabilities, technology makes things convenient. For people with disabilities, it makes things possible.” – Judith Heumann U.S. Department of Education

Everyone is Disabled

Completely Blind

Low Vision

Glare

Better accessibility
makes things easier
for everybody

Universal Design

The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” – Ron Mace Architect

Disabilities

Main Disability Types

  • Vision
  • Hearing
  • Mobility
  • Cognitive

Types of Vision Impairments

  • Blindness
  • Low Vision
  • Field of Vision
  • Epilepsy
  • Color Blindness
  • Light Sensitivity
  • Screen Glare
  • Monitors

Using a Screenreader

Screenreader demo: maruchan.com

Smartphone Accessibility

Light Sensitivity

Black text on white is like looking at
ants on a lightbulb.” – Rhys Keepence

Normal Vision

Photophobia

Deuteranopia

Protanopia

Macular Degeneration

Tunnel Vision

Types of Hearing Impairments

  • Deafness
  • Hearing Loss

  • Background Noise
  • No Sound

Video Captions

Types of Mobility Impairments

  • Paralysis
  • Involuntary Motion
  • Limited Movement
  • Coordination
  • Muscle Weakness
  • Mobile Devices
  • Touch Devices

Sip/Puff Device

Mobility demo: craigslist.org

Keyboard demo: beta.virginamerica.com

Types of Cognitive Impairments

  • Brain Injury
  • Attention Defecit
  • Dyslexia
  • Memory
  • Perception
  • Low Literacy
  • Foreign Language

Bad attention demo: lingscars.com

Good attention demo: medium.com

Foreign language demo: codeprep.jp

Design

Design Considerations

  • Animation
  • Typography
  • Color
  • Communication

Eliminate Flicker

Minimize Distractions

Typography

A printed work which cannot be read becomes a product without purpose.” – Emil Ruder Typography, A Manual of Design

Font Size

Text Alignment

Italics

Color Contrast

Demo: contrastrebellion.com

Color Tools

Use more than color to convey meaning.

Stop sign

Effective Communication

  • Brightness
  • Color
  • Dimension

  • Line
  • Movement
  • Shape

  • Sound
  • Text
  • Texture