Accessibility: A Starting Point To Designing For All

Consulting is a fast-paced and rewarding environment, in stark contrast to the iterative and perfection-chasing product design environment. But one thing is constant and should be a top priority: Accessibility. Trying to come up with the coolest and innovative design tends to leave accessibility considerations behind. As a designer I had to break the habit of light grays on white (a contrast visibility no-no). I’m still hurting from my break-up with small fonts — yeah, I was one of THOSE.

Due to the fact that I work on Fintech, medical & government solutions, WCAG/ADA compliance is a top priority. Coming from a specialized background of product design & development, needless to say I had a lot of research to do. I am by no means an authority on accessibility but I want to share a basic foundation for anyone who wants to get started on a path to designing for all.

You may ask, “How can I execute my amazing designs if standards limit my color, focus states, animations, etc.”. I know… I know… simple answer: GET OVER YOURSELF. This shouldn’t cramp your style that bad hot shot. Designing for accessibility doesn’t block innovation or creativity. All it does is require you to work within some boundaries — boundaries that can actually make you think OUTSIDE the box. I like to use the chef competition tv show Chopped as an example. Consider accessibility as the secret ingredient — a crucial component that should be integrated flawlessly to the end-product, not something sloppily thrown on just to meet the requirement.

After all, the goal is to come up with solutions that caters to the wider audience — and serve the information efficiently and dependably. With that said, here are some things to consider:

Contrast… Contrast… Contrast

One of the considerations to always start with is contrast — that’s making sure your text stands out from its background. The goal is to have a 4.5 to 1 ratio for a AAA rating (WCAG). For text 14px or smaller, bold is recommended as well as if the text overlays imagery (along with other ways to provide contrast from the background).

Using plugins to check contrast ratio is one way to validate compliance.

With the same background, which option would you choose for more contrast?

Source: W3C

Custom Focus States

For keyboard users, focus states should be clear and recognizable. Although some browsers have default focused states — it’s highly recommended to design a custom solution for this.

MailChimp uses custom focus states to really make forms stand out (Chrome)

Chase uses default browser focus states (Chrome)

Source: W3C

Inputs: set users up for success

When it comes to asking users to input information, no need to be cute… be CLEAR. Let users know up front what information they will need to provide — as well as success criteria. Rule of thumb is to not rely on color to indicate errors alone, utilize text to describe the error and added visual cues.

Focus states, form criteria, hide/show password, etc. are all good things to consider.

Source: W3C

Opt for clicks instead of hovers

For users with motor disabilities, trying to land on that small icon or hovering to expose navigation will be a daunting task. In cases of main navigation and key functions, opt for clicks as the main interaction. You definitely do NOT want to hide things behind a hover. See example below (I’ve created some mockups to illustrate):

Mockup: Example of showing functionality on hover. User has no idea of function without hovering.

Mockup: A possible solution — lighter gray to hint of functionality, becomes pronounced on hover.

Alt text for images are your friends

Visually impaired users rely on screen readers to navigate and ‘read’ the website so it’s important that when the focus is on an image, an alt text should be in place as a backup. The goal is to establish context to the image at hand.

Source: WebAim

Color cannot be the only way to distinguish important information

Let’s say the website was black and white… how else would you convey content of importance? Since color can’t be the solution (text color, color blocking, etc.), other ways to convey importance like iconography, underlines and div lines can be used.

Source: UCLA

Consistency is the key

For cognitive impairments, being able to identify each section clearly can be a challenge if consistency is not considered. Are functions clearly presented? Are labels clear? Are sections divided by section headers?

The goal is to have a solution that is a breeze to navigate and content that is easily recognizable and processed. Site nomenclature can fall into this as well, no need to get too creative — make it CLEAR.

Can’t make it accessible? Make an alternate solution

If a certain component is created to be interactive in a way that cannot be accessible (interactive experiences, maps, animations, etc.), then consider making a screen reader-friendly alternative. An alternative to videos are links to transcripts, perhaps describing the experience to those users can be a good starting point.

The Wrap-Up

The major takeaway here is that these ‘limits’ really aren’t limits at all. They’re an opportunity to come up with more creative ways to design interactions. Best part about it — you end up with a design that reaches a wider audience and will get kudos from any steering committee.

If you found this helpful, don’t hesitate to give me a shout and feel free to share and use your social currency.