Sexy and accessible focus state on keyboard navigation

Let’s make it simple Accessibility, Design and Front-end

The article cover shows an artwork on a dark background with a yellow keyboard TAB key.

But what the hell is keyboard navigation?

The keyboard serves as an alternative method of navigation to the computer mouse and can be beneficial and even essential for some people. There are two main groups that need to be taken into account:

  1. People with some level and type of mobility reduction in their hands, whether due to tremors, paralysis, difficulty in movement and others, derived from illnesses or disabilities, find it easier to navigate using the keyboard, which requires precise movements.

How it works

Keyboard navigation is done via the TAB key, which will navigate by functional elements, and the directional arrows will help you go back and forth, as well as entering options within a dropdown. You can test this type of browsing at any time while visiting a website on your computer.

Default browser focus

People who depend on the keyboard to navigate and use it with the aid of their eyes- that is, disregarding uses with a screen reader — depend on visual cues to know where they are on the screen.

A “buy now” link is getting keyboard focus, no customization, showing the blue and white outline around it.
A “buy now” link is getting keyboard focus, no customization, showing the blue and white outline around it.
Keyboard focus on a link without customization

But then I need to use the infamous blue outline?

The blue border may often not match the brand and therefore may be very out of the style guide standards. The good news, however, is that there is a way out for everything.

How to make features navigable from the keyboard

First of all, we need to ensure that all functional elements are navigable. For that, we need to include the tabindex, which will ensure focus. Some elements are naturally navigable, such as form elements: <button>, <input> etc. See an example applied to a link.

HTML code of a link with tabindex attribute
HTML code of a link with tabindex attribute
HTML code of a link with tabindex attribute

Everything can be good with CSS

The outline parameter is not so flexible to customize, but you can hide it with outline: none; and use pseudo-elements to simulate that state.

Example

First of all, we create the button with all its size and color settings and remove the outline in focus state. Don’t forget to apply position: relative; so that the pseudo-element has a place to anchor.

Sample customization in code
3 examples of yellow “learn more” buttons are shown in different states: default, hover and focus.
3 examples of yellow “learn more” buttons are shown in different states: default, hover and focus.

Et voilà!

This is just an example made to illustrate the explanation, but you can play around with animations and transition effects — just don’t forget to let users turn off these effects if they want, as it can cause dizziness if the person is predisposed to that.

Product Designer, Web Accessibility Owner at Descomplica and Writer hobbyist.