You get a11y, you get a11y, everyone gets a11y!

A few years ago I got interested in usability. I was interested in how a website can redefine itself to invite the user to browse it, be engaged, understand the functionality.

I thought about my older relatives, who keep misunderstanding the functionality of some sites and need to ask me to help them browse the web most of the time. Later on, I realized that there were other aspects to this issue. I thought about my dad being color blind. His colorblindness is mild, but it’s there. I asked myself, does this affect his understanding of web functionality? What about all the people I know that have other types of disabilities? Oh my. I realized that most of the web was not meant for any of them.

You cannot trust color to be the sole medium of communication.

Accessibility (a11y) comes in the picture. Great people thought about this and did something about it. 

They established guidelines for us, web developers, to follow.

Here is my small list of tips and tricks that I started gathering to learn about the subject. Hope this helps you in understanding this issue and invites you to do something about it too.

First chapter: Colors are subjective

I see red, you might see green, I see light blue, you might not see it at all. I learned that you cannot trust color to be the sole medium of communication.

When the color is meant to be the message

As I stated before, color cannot be the only way to transmit a message. Instead, make sure it’s used to complement the message you’re trying to convey by changing contrast, font sizes, font styles, and adding icons (more on this later).

The easiest example to show you is an error message:

This is a screenshot of Olivero, Drupal 9’s new theme. See how the red icon lets the user know there is something wrong? What if you didn’t see red? Well, the icon would still be there. Here’s another screenshot of the same message, now in grayscale:

Grayscale sometimes is what users actually see (thank you Andrew MacPherson for correcting me on this), and it helps us notice contrast, shapes, and sizes. 

Because of this, it is a good exercise to test your site in grayscale colors: can you still read and understand everything? 

• A tip here: use Greyscale Chrome extension or similar.

Talking about contrast… 

This is one of the main accessibility concerns, I’ve seen many designs that look polished, light, and beautiful, but the color palette is just not good enough to discern a bunch of text from its background. 

There is not much I can add here but this: if the text is not readable, your users are not going to read it. 

There are cool sites like https://webaim.org/resources/contrastchecker/, http://colorsafe.co/ (our main image for this post is a screenshot of their site), or http://a11yrocks.com/colorPalette/ that let you check if your colors are good enough for any user to see and distinguish well.

A cool trick I learned is that if you cannot improve contrast, another option is to make the fonts bigger, so keep that in mind too.

User actions

Now, going back to the colors… Say you have a button, and when you hover on that button, it slightly changes its color to let the user know that he is interacting with it.

If you cannot see well, that subtle hint is lost. 

If the effect would however affect another aspect of the button, like it’s border, font-style, font-size, perhaps underlining the text, it would have a much better chance of reaching your user.

See, I'm not a designer, so this might be uneasy on the eyes. What I want to show you, is that there are many variations we can do to make the web more accessible to our users.

In this short video, I play around with a navigation bar. I start with subtle effects on hover, and then I start increasing the changes. I then play the same video on grayscale, to show why some extra steps are really necessary.

Hope this was helpful to you, that's it for today. More tips are coming, stay tuned!