Alex Sailer

Accessibility Basics for Designers

Accessibility is the concept of making web content more usable for individuals with disabilities. These disabilities can range from blindness and deafness to cognitive or motor skill limitations. Browsing the web or using a computer in general can be a challenge for someone with a disability. It’s our job as designers to minimize that challenge for all users. Next time you crack open Photoshop, take a minute to think about everyone you are designing for. This post will give you some key accessibility concepts to keep in mind when designing your next project.

We’ll be only scratching the surface of accessibility, but these concepts will help you not only make your site more usable for individuals with disabilities, but also make your site more usable in general. If you want to know more about accessibility, we recommend reading through the Web Content Accessibility Guidelines (WCAG) 2.0.

Contrast is your friend.

Let’s focus on text readability. We’ve all seen those interface designs that have reduced contrast for “better” aesthetics. Sure, it may look nice, but at what cost? Probably not much to the designer or his/her peers but that’s not everyone we are designing for. Remember that.

Let’s examine two different approaches to text/background contrast.

heads-up-contrast

This is a good time to mention that there are accessibility standards that apply to color contrast and text readability. There are three levels of standards, A, AA, and AAA, with A being the lowest and AAA being the highest. These standards are calculated by a mathematical formula resulting in a numerical ratio. These standards also vary between body text and large headline text. Here’s a quick breakdown:

ratings

As you are designing, you should regularly check your contrast ratio to make sure you are reaching a minimum standard of A. An easy way to do that is to use Brent Jackson’s Colorable (Demo) tool (h/t to Tom Osborne).

Don’t go too crazy with UI elements.

As designers, we want to push the envelope and create something new and impactful. The important thing to remember here is that there should always be a balance between pushing the envelope and accessibility. Remember, we are designing for everyone. If you’re selling a product online, does it make sense to risk alienating a portion of your potential customers just because you want to implement some fancy UI element that can only be used by teens on iPhones? Let’s hope you said “No.”

This concept could fill an entire article by itself but, like the title says, this post is about the basics, so we are going to focus on inputs and menu elements.

Text Input Elements

The anatomy of a text input is simple. It’s made of essentially three things: a label, a textbox, and placeholder text within the text box. This anatomy is an established design pattern, and while we want to push the envelope, we need to make sure that we maintain the anatomy for better recognizability, and therefore better accessibility.

In addition to the input anatomy there are stylistic decisions that can help with accessibility. Contrast comes into play again. A text input should have a high enough contrast to differentiate the clickable area from the background. This can be accomplished with a fill color inside the text input clickable area or with a border along the outside of the input clickable area.

A focus state is equally important as contrast. The user needs to know which text input (or other UI element) is selected. Luckily, web browsers have a default style for focus states that make it one less thing you have to think about. With that said, it’s important to make sure the default focus styles in the browser are not stripped away with any custom CSS.

input-anatomy

Menu Elements

A theme within accessibility is to keep things obvious. Menus can oftentimes be the exact opposite of obvious.

Here are a few menu rules to help you avoid certain design problems:

  1. Try not to hide interface elements solely for UI minimalism.
  2. If you have to hide elements inside a menu, limit the menu to a single purpose. For example, a dropdown select menu should have only one series of options to select from.
  3. Don’t rely on hover states to reveal content.
  4. Use visual cues in addition to color for focus or emphasis.

Additionally, there are accessible design patterns provided in the WCAG that offer detailed directions on how to handle certain aspects of menu elements.

Be the better designer.

Let’s face it, accessibility in web design has a cozy seat on the back-burner. Besides government websites, few to none enforce accessibility requirements. We have to hold ourselves accountable to do the right thing by bringing accessibility to the forefront. Making a design more accessible isn’t going to kill your vision. It may make it more challenging, but isn’t problem solving what we signed up for when we decided to become designers? I think so.

Like I mentioned earlier, this post is just scratching the surface of accessibility. There are countless resources out there for more information. Here are a few of my favorites:


Give this a share if you enjoyed it :)