“Hey Mags, whenever you have the chance, would you mind coming down to help us with the computer?”

Long before jumping into the UX world, I had accessibility at the forefront of my mind.

I have very fond memories of being called down the road to help my grandparents with using their computer; my grandfather had increasingly debilitating and frustrating macular degeneration and my grandmother — understandably — didn’t know about all of the bells and whistles and how to troubleshoot issues.

What seemed like nothing for me (and usually resulted in some cookies and coffee to boot) seemed like the day’s biggest feat to them.

I always looked at it as quality time with them and loved helping them type out letters or simply showing them how to view an email attachment.

As endearing as it was for me, I also felt frustrated for them. How could I make it easier for them so that they feel in control of their computer? Could our constantly changing technology keep the older generations in mind?

A few years later I learned about the UX field and was immediately hooked. I found my mind racing 100 different directions that I could take this new interest, especially down the accessibility route. After finishing a UX certification course and a few projects, I find myself still wanting to dive deeper into the wide topic of accessibility.

This number above is the number of people with disabilities worldwide according to the World Health Organization (WHO) — over 15% of the world’s population.

It’s important to note that this is only the bare minimum at this point in time — there are likely many disabilities unaccounted for and, on top of that, the current population is considered to be aging so we can continue to expect an increase in disabilities in years to come.

As designers, it is our responsibility to design for everyone. This is where keeping accessibility in mind comes into play.

What is accessibility?

According to usability.gov, accessibility “focuses on how a disabled person accesses or benefits from a site, system or application”.

This is a very broad definition which means it is rightfully a very broad field and should be at the forefront of every designer and developer’s mind.

A high-level breakdown of disabilities can be categorized by the following:

How is it incorporated into design?

There are standards from which to work off of when designing. The Web Content Accessibility Guidelines (WCAG) 2.0 establish the requirements and techniques of meeting basic accessibility needs.

(The entire checklist of guidelines can be seen here.) There are three conformance levels that equate to meeting the needs of different groups and situations: A, AA and AAA. Level A sets the minimum level of accessibility while AAA sets the highest level.

Many tools exist that allow someone to check a webpage for accessibility issues or check the color contrast rating between two colors. WebAIM offers two solid ones that are quick and simple to use:

WAVE (Web Accessibility Evaluation Tool) — after entering in a URL, the system will point out specific issues on the page and give recommendations.

WebAIM Contrast Checker — allows the user to check the contrast of a foreground text color and background color by giving the contrast ratio and WCAG rating.

Examples of Accessibility Design

The following are some basic accessibility design principles:

Color contrast

To have an optimal user experience, text should be easy to read for all. According to the WCAG, text and its background should have a contrast ratio of at least 4.5:1.

For larger fonts at 24px or 19px bold, the ratio must be at least 3:1. Tools such as the Contrast Checker above provide a great visual of the ratio and rating. As seen below in the example, the light blue on the left has too low of a contrast ratio and fails the WCAG ratings while the dark green succeeds in both.

Source: WebAIM Contrast Checker

Patterns and symbols

Since those with colorblindness are limited in what colors can be seen, colors can be confused for being others. There needs to be other ways in which to differentiate between information, especially if they’re being used in data visualization. Using patterns in a pie chart, for example, will give a clear indication to users about which data corresponds to which category.

Clear labels can be added too, for extra certainty!

Green and red are universally known as being colors for something that is correct or incorrect. But how does that work for people who are colorblind? In addition to the use of color representations, symbols should be used as well.

Filling out input fields comes to mind when thinking of this. If I type my email into an input field incorrectly, I would want the alerts to be very noticeable. The view of someone with protanopia colorblindness seen below with just the color outline makes it unnoticeable that there’s an error. The combination of the error label and the symbol, however, make it stand out.

Labeled text input fields

Placeholder text disappears when a user selects it, so text fields should have labels outside of the field. Otherwise it’s easy for users to forget what they’re supposed to be inputting — there have definitely been times when I quickly forget if I’m supposed to be typing in ‘Address Line 2’ or entering in my city or if I’m confirming a password and so on.

Hierarchy

Creating a clear visual hierarchy is of course crucial not only for the overall user experience, but also for those who might have limited vision.

For example, if one is using a screen magnifier and can only see a small part of the screen at a time, it’s likely they’ll look for the call to action button on the bottom of the page, rather than on the side. They’ll spend less time looking for the button if the hierarchy remains predictable.

Keyboard navigation

The use of keyboards, or hardware that replaces a keyboard, must be kept in mind when designing the hierarchy.

Those who are blind or who have motor disabilities are reliant on keyboards for navigation so the order of the links, input fields and buttons on the page should make sense, usually meaning the flow goes from left to right and from top to bottom.

For those that use traditional keyboards to navigate, they have to use the Tab button to go through each and every element until they arrive at the one they want to select — the order of the page must be kept intuitive.

Final Thoughts

Accessibility should no longer be a trend, but a fundamental responsibility of designers and developers, to be taken into account from research to designs to developing.

From here on out, I will keep everyone in mind in my designs and be critical of others’ designs that might not. I will be the voice for users of all abilities.

I will keep all of my grandparents lovingly in mind.

I realize that all of this is truly only scratching the surface of the accessibility field. There is an infinite amount more of topics to delve into and I look forward to never stop learning more.