A while ago I wrote a blog post about colors in web design and their effect on usability, more specifically on accessibility. There is always more to talk about when it comes to A11y (accessibility’s cool abbreviation). I’m not an expert on the matter, in fact I’m learning all the time, but I still want to share what I know, because the more we talk about this, and the more we build a consciousness about this, then the more web designers and developers will start to take accessibility into account when designing their new projects, and, soon, we’ll get the web to be truly for everyone.
Today’s topic will be…
Many users don’t use the mouse/touchpad to navigate the web. They’re either oldschool or don’t have another option in terms of navigating, but to use the almighty keyboard. Sometimes the websites are not ready for it, and the almighty keyboard ends up being not that almighty after all. Here are a few tips to keep in mind so that you can make sure your keyboard users don’t get frustrated and leave your site the minute after they came to check it out.
Let me paint a picture here. You’re browsing a site with your mouse and see a button. You can click on it, interact with it. Now that element is focusable. If you were navigating with a keyboard, you should be able to hit the TAB key and interact with that element as well.
Out of the box, these are the most common tabbable elements (meaning you can get to them by pressing TAB on your keyboard):
There are ways to make other elements tabbable, and to make even these I just listed not tabbable too. It’s the magic word tabindex.
From what I’ve learned it’s best to just use the elements the way that they are built and not tweak their standard behaviors. However, it is possible to do that, so if you didn’t have a choice, you could change the tabbable condition of any element by changing their tabindex attribute.
Here’s how it works:
This attribute makes an element focusable by keyboard navigation. So for example, a <span> with a tabindex=0 attribute will be tabbable:
This attribute removes the tabbable condition from any element. Used on a button for example, it will make the button unreachable by keyboard, and reachable only by clicking or focusing by JS.
Using tabindex=1, tabindex=2, tabindex=3, etc. is permitted, but not recommended. The numbers indicate the order of the navigation. This might be useful for you as a developer, but will quickly become confusing for your users, so the general rule is to avoid it.
Summing up what we learned so far, all of these are tabbable:
And on the other hand, none of these are (tabbable):
So you know what tabbing into an element means now: you hit on TAB, and… and what? Yes, magic words in the title hint it… you need visual feedback!
Developers tend to remove it, but one precious attribute in CSS, the outline, is all you need to give your user visual feedback.
The outline is very similar to a border, but doesn’t occupy any space, and you should use it to let users know what they’re focusing on.
Usually you’d add it on CSS like this:
But I noticed that it responds to clicking as well. In this case, it makes sense to have the outline only by keyboard tabbing. There is a pseudo element called focus-visible that does exactly this (out of the box!), but is not functional in IOS Safari yet. I ended up installing a very cool library called focus-visible that allows you to define your outline to only affect elements focused by tabbing like this:
TIp: Make sure that the focused element stands out. A good option is to use a color with high contrast to the rest of the pallet in your site and make the outline really thick.
Do you know someone called “float: left”? Well, one careless implementation with that bad boy was my first encounter with a non-sequential keyboard navigation. I didn’t understand the importance of this until I tried keyboard-navigating a site that used lots and lots of floats to order HTML elements.
Here’s a very good example of what not to do (try following the focused element).
I find this to be a very good example of how to confuse your users.
Keyboard navigation must follow a logical order, or else it will confuse your users. Make sure you follow a reasonable path that visits all your links in an easy-to-understand order.
I think that’s enough for today. Stay tuned, we still have a lot to talk about!
Get accessibility tips on how to handle color on your website to better reach your user.