Skip to main content

Design and Accessibility: Why It Matters

Paul Chambers

By Paul Chambers | January 2019

In 2019, it’s more important than ever to make sure you’re designing for everyone that uses the web, including people with disabilities. We have the power to give equal access to the internet, and we need to use it.

 

Why Does Accessibility Matter?

It matters because we shouldn’t exclude anyone from using the internet. Think about Lucia who is blind, Carlos who can’t use his hands to access the internet, or Sandra who is 72 and has macular degeneration and tremors. We need to make sure we are designing so they can use the web the way others (who don’t have a disadvantage) use it.

 

It can be easy to overlook crucial design elements needed for accessibility when we focus so much on designing the next Awwwards Site Of The Day. I’m here to tell you that you can create a beautifully designed website and it can be accessible by every person regardless of their disability.

 

 

Here are 5 guidelines you can use to make sure you’re designing a website that is more accessible:

 

  1. Check your color contrast. Many free resources check your color contrast in your design (how much contrast your text has over the background it’s on, so the words are readable by everyone). Colorbox, designed by Lyft’s design team, automatically gives you color palettes that are Level AA WCAG 2.0 compliant. There is also a Color Contrast Analyzer plugin for Sketch that our team uses for every project we create.An example of passed/failed color contrast in a button

 

  1. Use more than color. Sometimes we will only change the color of an item to indicate an active state because of how clean it looks but to make active states accessible to everyone we need to add a shape to the active state (like an underline or dot below the active item).
    How to use shapes to indicate active state

 

  1. Avoid putting important actions in hover states. Keeping content or links away from a hover state is crucial for people who can only use a keyboard to navigate a website. The tools they use to “read” the site’s content to them won’t be able to read the button or link that appears in a hover state. If it’s a necessary action, it doesn’t deserve to be in a hover state. Source: “7 Things every designer needs to know about accessibility”
    Example of the right/wrong way to approach actions inside hover state

 

  1. Design focus states. Focus states are also crucial for people who can only use a keyboard to navigate a website. Users who need to tab through a site rely on focus states to “click” through different links and buttons. We want these users to be able to take actions like everyone else; therefore, we need to make sure we design focus states for form fields, buttons, widgets, menu items, and links.
    Example of a designed focus state in a form

 

  1. Use alt text. When we upload our graphics/images to a site, we need to make sure we fill in the alt text field so the browser readers can verbally read what is going on in that visual. Using alt text is helpful for people who have visual impairments so they can still comprehend what we are trying to get across with our illustrations, photos, or graphics we work so hard to create.
    Example of alt text field in the backend of WordPress

 

Helpful Web Design Accessibility Resources

 

Is your brand in need of a new website? We’d love to work with you!

Find us on DesignRush!

Paul Chambers

Written by

Paul Chambers

Paul credits much of his success to his supportive family, including his wife, four kids, mother, stepfather, and late grandmother and grandfather.

More from Me

Design Talk: A Guide to File Types

By Tyler Zenk

Design Tool Icons

27 Design Tools I Can’t Live Without

By Element5

5 Big Reasons Why Mood Boards are Important

Design Talk: 5 Big Reasons Why Mood Boards Are Important

By Tyler Zenk

Need our help on a new project?

Shoot us a message. We'd love to hear from you.

get a quote