Design with Accessibility in Mind

Posted on July 29, 2015 by Michelle Child

We love the internet. 

It’s our medium, our number one resource, the place where we spend the majority of our day, every day. Thanks to responsive web design, the web now works on every screen size, and every browser. 

But that’s not enough. As the W3C says,

The Web needs to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When websites, web technologies, or web tools are badly designed, they can create barriers that exclude people from using the Web.

Avoid these four common barriers to help you design for accessibility. 

1. Consider the Flow

Ask yourself:  does the flow of this content make sense before styling? The reading order should match your visual order. Some users may be looking at your page with text magnified by 200 percent. Will they still be able to distinguish headers from body content? Screen readers use HTML5 elements such as headers, sections, asides and articles to help organize the page, so don’t misuse them.

2. Provide Good Contrast

One in ten people are color blind. That's 10 percent of your viewing audience. Imagine that one in ten people can’t read your site because of your text and background color combination. 

We’re currently revisiting our brand colors at Unum to meet the W3C’s Web Content Accessibility Guidelines.

Before (normal and with deuteranopia):

Problems:
Background image color is too light for white text.
Green and Orange colors fail W3C’s AA standards.
Green Button over blue background fails AA standards.

After (normal and with deuteranopia):

Solutions:
Background image is darkened to make white text more readable.
Green and Orange colors are no longer used with text..
Green Button is changed to white.

We were able to rework the design by increasing the usage of colors that pass Level AA, and using the Tanguru Color Contrast Finder to slightly alter the orange and green so they could also pass. 

Take a look at these Color Contrast Finders to see if your designs pass:

  • Contrast Ratio: Quick, easy, visually-pleasing contrast checker. 
  • Tanguru Color Contrast Finder: Offers alternatives for your failing color that pass Level AA or Level AAA 
  • Color Oracle: a free color blindness simulator for Windows, Mac and Linux. View your designs through colorblind eyes.

A good rule of thumb when using color in design is to always have a fall-back distinguishing element. Pair text, icons, or shapes with color to distinguish error states or multiple options for users.

3. Style Your Font Carefully

  • Choose a readable font.
  • Choose an adequate font-size: 14px is a good body copy minimum.
  • Always have a web-safe fallback font: Reading in Times New Roman is better than not reading at all.
  • Check your line-height: 1.4 is a good minimum.
  • Don’t forget line-length! The optimal line length for your body text is 50-75 characters per line. 
  • Watch CAPS use: it’s difficult to read and can be read incorrectly by screen readers.
  • Avoid centered body text: it’s difficult for the eye to follow. 

Note: This is a brief overview at a vastly large topic. You can read Matthew Butterick’s Practical Typography or Max Luzuriaga’s Choosing the Right Font: A Practical Guide to Typography on the Web for a more in-depth look.

4. Avoid Ambiguous Links 

Avoid link text such as “Click here,” “Continue,” or  “Read More”: Your link text should make sense on its own. This will help screen readers as well as your SEO! Your links should also be easily distinguishable from text without having to hover, and not only with color.

 

These four, simple tips will go a long way in making your designs accessible even before they reach development. Let's embrace accessibility and share our beloved internet with the masses.