An Event Apart: Inclusive Design

by Luke Wroblewski August 26, 2012

In her Inclusive Design: It’s In the Details talk at An Event Apart in Chicago, IL 2012 Cindy Li discussed the need to make our Web experiences and apps more accessible. Here's my notes from her talK:

  • Inclusive design is a way to make products work for a wide range of people. Think about hosting a party that makes everyone comfortable and special. This is different way of thinking about accessibility.
  • Dieter Rams: the only cardinal sin is design is being indifferent to people & the reality in which they live.
  • Talk to your friends and family to learn about how they perceive and use the products you work on. You’ll find a variety of needs that highlight how people are different.
  • Part of being a good host is putting yourself in your guest’s shoes: what are they thinking/feeling?
  • 1 in 5 people will have a disability in their lives. Many of these are temporary. 6.8 million people have fractured a bone in the US. 6 million pregnancies per year in US. Consider that we’ll all be faced with a disability at some point in our lives. Plan ahead in your designs.
  • Accessibility can be big business: $1 trillion collective income of people with disabilities. 4 out of 10 people with disabilities spend on average 20hrs per week online.
  • 1 in 100 men have red-green color blindness. There’s ways to test your designs to make sure they still work for these users (see Tools below).
  • Deuteranopia: red-green color blindness found in 1 in 100 men.
  • Tritanopia: blue-yellow color blindness found in less than 1% of males and females.
  • Protanopia: red-green color blindness and sensitivity to green light found in 1% of males.

Techniques

  • If you’ve taken the time to think through your words or hired a writer, make sure your words are legible: right size, color, placement.
  • Be mindful of type that’s too closely related to background color. Make sure there’s an appropriate amount of contrast in your designs.
  • Lightest gray: #575757, background: #ffffff. Minimum guidelines for contrast.
  • Use a well thought-out visual hierarchy to ensure each element has the appropriate amount of contrast on the page.
  • Highlight active form fields and do not leave placeholder text inside fields when asking people to provide answers into fields. Consider using smart defaults in input fields that don't require people to enter information that you have already.
  • Consistency: having a common style can help make things more understandable. Don’t use lots of different styles for primary actions.
  • CAPTCHAs stop humans as effectively as they stop machines. Ensure there’s an escape route for people (load another, audio playback).

Tools

  • Color contrast analyzer: can enter foreground & background color to see if it passes accessibility tests.
  • Color oracle: allows you to see how color blind people see your sites.
  • Universal Access controls on OSX: can use voice over, zooming, and display adjustments.
  • Skala allows you to broadcast designs to iPhone & adjust color blindness issues.
  • iPhone Accessibility: voice over, zoom, text sizes, and more. Can be applied to all apps & the operating system
  • Translate with Google & Bing: can make foreign languages more accessible when done inline.
  • Keyboard shortcuts: use shift+? To bring up keyboard shortcut options on your website. If you enter this shortcut, a menu comes up that displays what keyboard actions are available.