Designing with accessibility in mind

Designing with accessibility in mind

2379 1189 Hunt Adkins

Designing app and website experiences are an exciting time for any brand. It is an opportunity to look at how users are currently interacting with your experience and how you are able to shape and craft a new experience with new business goals and metrics in mind. Considering that there are 285 million people in the world that are visually impaired, understanding basic accessibility standards and implementation guidelines is imperative to the foundation of your new, shiny experience. 

Creating experiences for accessibility goes beyond just visual design, however, for the purposes of this post I’m going to focus on visual design execution and some practical design decisions that need to be thought about when trying to achieve WCAG and ADA compliant experiences.

Make fonts large.

Making text clarity a priority goes a very long way. This is a huge obstacle for older adults and users that are visually impaired. Along with a mobile-first design approach, I tend to make my headers and body copy large and bold. The minimum body copy size I use is 16px. And even then, it’s mainly 20-22px. 

Contrast. Contrast. Contrast.

Another large obstacle is the legibility of your text against other background colors or photos/videos. I use a desktop app called “Contrast” to give me a quick read on whether or not something is contrasted enough. As a general rule, I like to avoid putting text over images/videos as well. Certain time and aesthetics will call for it, and in those circumstances try to use dark overlays and background color gradients to allow the text to “pop” enough to pass contrast standards. Also try to use images or videos in the background more for a texture as opposed to something you really care about the user looking at and noticing.

Don’t design exclusively for hover states.

With internet usage being mainly on touch devices (mobile), try and resist the urge to create comprehensive experiences that depend on a mouse hover state to display additional content. Ask yourself if that piece of copy is worth reading, should it even be hidden in the first place? Again, exceptions can and will continue to be made here. Sometimes the micro-interaction of having something subtle speaks to the language of the brand. In these situations, have a plan on how that will respond down to touch screen devices and how users will interact with it on that medium. 

Make forms as easy to understand as possible. 

When designing forms, make sure to include focus states that a user will, without a doubt, know that is the field they are typing in. Also make sure that validation states (successes and errors) are clear and easy to understand so the user doesn’t get frustrated and abandon the form entirely. Use tactics on mobile devices to already have the keyboard pulled up with coming to a page with a form on it. Again, conversion often happens through a form so this is one area that I personally don’t care to revolutionize with each project I work on. Lean on what is known and what has worked. 

When just keeping in mind these few areas when starting a digital experience, it will be easier to bake it into every aspect of the site. It will also help you make better design decisions moving forward. 

 

For further tips and resources for Visual/UI Designers, click here. (https://www.w3.org/WAI/tips/designing/)

– L. Prosser