The 6 Principles of Accessible Design

Alex Osterman
Apr 24, 2018

Welcome to Part 2 of the Spire Digital Accessible Design Series. This series houses a collection of articles that discuss the group of people often left out of consideration when making design decisions. In Part 1 you can read about how to design with the elderly in mind. This article covers how you can design for people who experience visual, physical, cognitive, and neurological disabilities.

Accessible design is not difficult but there are limited resources that make it easy for designers to understand.

A recent project of mine helped people who experience disabilities find the right employment opportunities. It involved plenty of testing and in-person experience with a wide range of individuals. The following points come from those user tests and the online resources.

 

1. Media

  • Use descriptive ALT tags for hyperlinks, icons, images, videos, and other media types.
  • Have subtitles and transcripts for videos. YouTube is a great tool to use for this.
  • Use images or illustrations for tricky subjects but keep the format similar and avoid surprising your user.
  • Avoid unnecessary media that can cause distractions.

2. Text

  • Write descriptive and clear page titles.
  • Use periods in your abbreviations (C.I.A. instead of CIA).
  • Black text on white background, or the reverse, is the best general practice.
  • Write in the active voice (Mike developed the website).
  • Break up large amounts of text into smaller paragraphs or bullet points if it’s possible
  • Use rem or em for your text sizes.
  • Avoid making text smaller than 14-16px.

3. Navigation and Links

  • Write descriptive text links that explain exactly what they are clicking on. Not just “click here.”
  • Underline your links.
  • Make links a contrasting color to your standard text.
  • Design for large clickable areas.
  • Use breadcrumbs.

4. Colors

  • Avoid bright or loud colors.
  • Avoid color combinations that are known to cause issues for the colorblind.

6. Assistive technologies

5. Development

  • Avoid hard-coding layouts that can cause issues for assistive technology.
  • Create dynamic sites that will give the user the flexibility to change text size easily or make modifications.
  • Implement a semantically coded frontend to help screen readers.

 

Resources