Designer Self-Guided Accessibility Training

Collaboration with Adobe, Facebook, LInkedIn & Microsoft

This resource is part of the Teach Access Initiative, and provides best practices for making accessible mobile and web apps. This tutorial currently provides basic training for developers and designers, with more disciplines to come! If you are new to accessibility, you’ve come to the right place - the following material will help you get a solid footing on accessibility via hands-on exercises and useful reference

Design Principles

In this section, you’ll learn about how color, contrast, text size and many other aspects of visual design affect how people with different abilities interact with your product.

The Web Content Accessibility Guidelines recommends a color contrast of 4.5:1 to meet color contrast guidelines.

Conveying Meaning through Color | https://teachaccess.github.io/tutorial/#/15

In order to ensure that someone with color blindness can successfully use your product, you cannot rely completely on color alone to communicate information.

For people with low vision, it is important to support the ability to increase text size without text overlapping or getting truncated.

The Web Content Accessibility Guidelines recommends that you use a reading ability equivalent of a lower secondary education level.

Checklist

  • Do I have sufficient contrast between text and my background?

  • Do I have sufficient contrast between UI elements and my background?

  • Are there any places where I’m color or other visual means alone to indicate something (ie, no text equivalent)?

  • Is my written content simple and easy to understand?

  • Are there any cases where the screen is flashing or flickering?

  • Does every mouse interaction have a keyboard-only equivalent interaction?

  • Have captions been included with any audio or audio/visual presentation?

  • If any interaction involves a timed response or session timeout, is this communicated well?