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!

CONTACT US TODAY

Find us on DesignRush!

Sort

Author

Sara Kauten

Art Director

View All Stories By Sara

    Comments:

  • Nonni

    Jan 29, 2019

    Such a beautiful and smart young lady! Proud to say she is a wonderful granddaughter ‼️

Leave a Reply

Your email address will not be published. Required fields are marked *