Designing for Accessibility

We are committed to designing for accessibility


We are committed to making a product that is accessible for a majority of users. We value empathy and responsibility, which means that we feel accountable for designing for people with a wide range of usability needs.

We are committed to following the lead of the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI), who wrote a research-based guide for accessibility, called the Web Content Accessibility Guidelines (V 2.1).

This includes accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but does not address every user need for people with these disabilities.

Guidelines

The guidelines are many, many pages, but here are some straightforward practices that we will follow:
  1. Using a contrast ratio of at least 4.5:1 for visual representations of text (usable for people with 20/40 vision and better)
  2. Using persistent text labels for all inputs
  3. Using full borders around inputs (not just a bottom line)
  4. Not using color as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  5. Using line spacing (leading) of at least space-and-a-half within paragraphs.
  6. Providing visual focus indication for keyboard focus.
 

Implementation

We are taking an iterative, ongoing approach to implementing accessible design.
  • Each time we make a brand decision (copy, colors etc) we will use the guidelines to direct us.
  • Each time we update a UI component or build a new one we will use the guidelines to direct us.
  • If we do a product-wide visual update we will use the guidelines to direct us.

Example

We need a color contrast ratio of at least 4.5:1 for visual representations of text. Our current button does not pass the contrast test. How might we adjust the button to follow guidelines? Here are some examples of how we might make our buttons accessible:
Screen Shot 2018-12-11 at 1.01.47 PM.png 72.6 KB View full-size Download

How do we find these colors? Check out this color contrast checker: 
  • In the upper right, you'll see the contrast number, and next to it, the standard it passes (we are looking for at least AA)
  • I'm only changing the hue in this example. Notice how the number drops around green and turquoise, but rises with dark blue and purple.
Screen Capture on 2018-12-06 at 10-43-26.gif 43.3 MB View full-size Download




FAQ

1. What does this mean for developers?
Right now, these guidelines are focused on design, but should start a discussion about how we code components for accessibility too (if that isn't already happening).

2. Is teal/turquoise gone forever?
Definitely not. Although teal/turquoise is a hard color to work with for buttons and links, it won't be completely disappearing. We just have to figure out the right way to use it.

3. Do people with low vision or photosensitivity even work in tech?
It doesn't matter (but yes). We aren't making accessibility decisions to serve those who currently work with marketing software - we want to lead the way in inviting people of various needs to be a part of the tech industry.

4. Are there exceptions to following the guidelines?
Right now, the only exception we are allowing is that when we offer customization, users can pick a non-accessible option. A current example is allowing the user to choose different top bar colors for each of their workspaces.

5. Are there legal implications for not following the guidelines?
The answer is vague at best. Many countries have laws about accessibility for public sector websites/apps and laws about discrimination against people with disabilities, but most have not been interpreted for general web products yet. Check out the laws that affect accessibility here.