Lecture 24 - Accessible Design

Slides based on content from Profs. Richard Ladner, Jake Wobbrock, and Amy Ko.

Disabilities

Everyone has different abilities

Nearly 1 in 5 People Have a Disability in the U.S. (from the U.S. Census)

(Some) kinds of disabilities

  • Vision
    • Blind
    • Low-Vision
    • Color Blind
  • Hearing
    • Deaf
    • Hard of Hearing
  • Speach
    • Ability to speak
    • Speach impediments
  • Mobility
    • Ability to Walk
    • Ability to use limbs
  • Cognative
    • Dyslexia, dysgraphia, dyscalculia
    • ADHD
    • Memory loss
    • Learning disabilities
  • Behavioral
    • Bipolar

Temporary and Situational disability

Disabilties can be temporary

  • having a broken arm in a cast
  • difficulty hearing after a loud concert

Disabilties can be situational

  • trying to open your door while carrying groceries
  • trying to talk on the phone in a noisy room
  • trying to read your phone under direct sunlight

Disabilty affects all of us

Accessible design

Designs that account for all abilities are called accessible designs

Try your phone's screen reader!

Enable your phone's screen reader

  • iOS: Settings > General > Accessibility > VoiceOver > Hit the switch
  • Android: Settings > Accessibility > Talkback > Hit the switch

Input works differently now. For example, tap now reads the screen and double-tap selects. Use two or three fingers to scroll by page. Play with it for a minute.

Try closing your eyes and reading a webpage or a social networking site. Try writing an email.

Views of disabilities

Medical view

  • Disabled people are patients who need treatment and/or cure.

Legal view

  • Disabled people have rights and responsibilities, such as access to public buildings, voting, education, etc.

Sociocultural view

  • Variation in ability is natural. "Disability" is caused by how society is designed, not by nature.

Universal Design

Design for as many users as possible, not just the average user

Example: Airplane cockpits:

  • In 1952, the U.S. Air Force redesigned seats to fit the average pilot.
  • They fit nobody (nobody is actually average), training results dropped.
  • Redesigned seat to be configurable for any pilot; training results rose above previous levels.

Universal Design is often used in archetecture

Universal Design Principles

  1. Equitable use
  2. Flexibilty in use
  3. Simple and intuitive
  4. Perceptible information
  5. Tolerance for error
  6. Low physical effort
  7. Size and space for approach and use

Ability Based Design

Instead of focusing on the abilities that someone lacks (dis-ability), and trying to compensate

Focus on making systems work with what abilities people have

Don't make people adapt to the system

Make the system adapt to the abilities of the user

Ability Based Design Principles

  1. Focus on Ability, not dis-ability.
  2. Accountability: If user has difficulty, system changes.
  3. Adaptation: Interface may be self-adaptive or user-adaptable.
  4. Transparency: Give user awareness of adaptations
  5. Performance: System may monitor users' performance
  6. Context: System may sense context
  7. Commodity: System may be affordable

First two are required, other five are recommended

Accessible Web design principles

Document structure: e.g., <article>, <strong>

Provide metadata: e.g., <html lang="en">

Provide alternatives: e.g., img alt tag, video captions, transcripts, allow both keyboard and mouse input

Avoid directional text: eg. "the diagram on the right shows..."

Note: These design prinicples help in other ways as well

  • Captions allow people to watch your video without turning sound on.
  • Transcripts help people find your page through Google.
  • Structure and metadata help programs understand your page.

Tools and Resources

Web Content Accessibility Guidelines: https://www.w3.org/WAI/intro/wcag

Web Accessability Evaluation Tool: http://wave.webaim.org/

Color Schemes: http://colorbrewer2.org/

Color blindness checker: http://www.color-blindness.com/coblis-color-blindness-simulator/

Text readability: http://juicystudio.com/services/readability.php