Accessibility Knowledge Paper 
Resources and good stuff about accessibility, to make our work prettier and more valuable for everyone, one screen at a time. 

Feel free to share with your team and help create awareness on this ever important subject!

The Basics

Contrast

  • Follow the minimum requirements of 
  • 4.5 to 1 for text smaller than 18 points and smaller than 14 points if bold
  • 3 to 1 for text bigger than 18 points and at least 14 points if bold
  • Tools to use, for example: Stark plugin getstark.co

Color

  • Use color to help differentiate, classify information and add personality
  • Use color in additive manner. Elements shouldn’t rely on color only. For example: Add a text label next to an icon, use filled icons, use underline for text links instead of just blue
  • Consider different types of color blindness when designing your palette. Most common ones are protanomaly (reduced sensitivity to red light), deuteranomaly (a reduced sensitivity to green light and is the most common form of colour blindness - ref)

Fonts/Text formatting

  • Avoid using light font weights, at least regular to ensure enough contrast
  • Start with 16px body copy text, don’t go below 12px
  • Avoid using all caps UPPERCASE text styling, text will be read like U-P-P-E-R… by screen readers. Also, it is harder to read than title casing. If it needs to be, for Web use “text-transform: uppercase”
  • Avoid centered text: Starting points of each line vary too much which brings huge cognitive load which is inaccessible.
  • Avoid justified text: Words are spread too much unevenly which makes it hard to read.

UX Copy

  • UX copy needs accessibility, too. If you care about this in your product, please take people who struggle with literacy into account. 
  • Don’t make your UX copy longer than needed and as short and distinct as possible.

Motion

  • Consider a reduced motion setting in your app or website for folks with Neurological disabilities (most common: Seizures)
  • Your design needs to work with reduced or without motion as well. Motion like animations or transitions only support your design story, are additive and meaningful but not necessary. Ask yourself the question: Does it enhance the story you are telling?
  • If you need to emphasize elements, don’t flash the element more than 3 times

Design Style-guide

  • Consider setting up “Accessibility policy guidelines”:
  • Set of standards, guidelines, clear simply written for everyone, understand intentions and implications and their role
  • Hierarchical
  • Testable: determine if site is accessible

Photography / Imagery / Video

  • If possible add alt text or descriptions for screen readers.
  • Also consider slow connections when images cannot load or your internet connection has hick-ups – Alt text for images can describe the image/graphic/photography before it has been fully loaded.
  • Use Closed Captioning to provide subtitles in videos to help people with hearing difficulties and disabilities.

SVGs:

  • Use title and description attributes. Similarly to alt tags. Understand content for screen readers. More info here.


Designing for thumbs