An Event Apart: Inclusive Design

by Luke Wroblewski February 5, 2012

In her Inclusive Design: It’s In the Details talk at An Event Apart in Atlanta, GA 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. 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.
  • 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.

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.
  • Use a well thought-out visual hierarchy to ensure each element has the appropriate amount of contrast on the page.
  • CAPTCHAs stop humans as effectively as they stop machines. Ensure there’s an escape route for people (load another, audio playback).
  • Touch devices need large targets for fingers. Test your designs in context on actual devices.
  • Consistency: having a common style can help make things more understandable. Don’t use lots of different styles for primary actions.

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.
  • 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.