How To Use Focus Indicator and Focus Styles

Introduction

Do you want your website to be easily accessible and to be used by all people, regardless of the device they are connecting from? Or maybe you are annoyed by this blue ring next to links, buttons? In this case, you will need the pseudo-class :focus and other similar classes.

What is a focus indicator?

Focus indicators are blue outlines that sometimes show up around buttons (when you click the TAB key by accident) or inputs when you’re filling out a form. Focus indicators can receive focus in two ways – when users use the tab key or click into a focusable element. The: focus pseudo-class is used every time an element is active, regardless of the input device (mouse, keyboard, stylus, etc.). Let’s take a look at it from the technical side.

The elements on which focus works by default are:

• buttons (<button>)
• links (<a>)
• form elements (<input>, <textarea>)

And additionally, each element can be given the tab-index property, which will make this element focusable.

What is tab-index?

The ‘tabindex’ attribute indicates that an element can be focused on, and determines how that focus is handled. It takes an integer as a value, and the resulting keyboard interaction differs depending on whether the integer is positive, negative, or 0.

• When ‘tabindex’ is set to 0, the element is inserted into the tab order based on its location in the source code.
• When ‘tabindex’ is set to -1, it becomes active but is not included in the tab order. In other words, it cannot be reached by someone using the Tab key to navigate through the content.
• A ‘tabindex’ of 1 means that it will be the first item to be selected on the page. It doesn’t matter how many focusable elements appear in the source order/visual presentation before it.

Should we change default styles of focus indicator?

The default focus indicator is ok in most cases, but when we want our website to look better, we can style the focus elements ourselves. The main things we should change when styling focus are:

• adding an outline
• creating an animation/transition
• changing the background color
• changing text color – but in this case, it’s best if the focus didn’t change only the font color, but for example, also add an outline or underline to the texts

The most important thing in styling focus is that it should be clearly visible and it should have high contrast to the page.

Selectors that will make our focus look better

:focus

The basic selector is of course :focus, which behaves like any other pseudo-class, so we can add most CSSes using it – although as I mentioned earlier, it’s better not to go crazy with it.

a:focus { 
outline: 3px solid red; 
}

Remove outlines for mouse users only, if you truly must do so but it’s highly recommended not to because it prevents people using other devices from navigating the site.

Tip: When using external files like CSS Reset to reset styles, we have to be careful because some of them are deleting an outline from focus.

:focus-within

Another selector is :focus-within.

form:focus-within {
box-shadow: 0px 5px 5px #c4c4c4;
transform: scale(1.03); 
}

It adds styles to the parent when one of his children receives the focus, what is kind of unusual because it’s not common in CSS to be able to select a parent element based on the existence or state of child elements. It’s pretty useful while styling forms.

As you can see most browsers support focus-within, except IE, but we can use polyfill to fix it.

:focus-visible

Another selector that gives us new possibilities is :focus-visible. This selector fires when the browser determines that a focus event occurred through an input other than a mouse cursor or a finger tap.

a:focus-visible { 
background-color: red; 
}

Here is a table that shows in what situations this selector is used:

Focus-visible is supported on almost all browsers except Internet Explorer and like in focus-within, we can use a polyfill to use it on older browsers.

outline-offset

The last thing I want to present is outline-offset. It is not a selector but a property that moves the outline away from the edge of the element’s border by a certain amount and in combination with the transition, it gives us further styling options. Outline-offset takes the value of length, and it can be:

• by default 0
• any valid length with a unit (including negative values)

Note that outline-offset does not accept percentage values.

In this case it is similar to the one mentioned above, but the outline offset does not have polyfill yet.

Conclusion

Focus is one of the most useful things to make our website easily accessible. It is worth remembering about it in order to enable the use of our website by as many people as possible.