The CSS Podcast - 018: Focus

On your webpage,you click a link that skips the user to the main content of the website.These are often referred to as skip links, or anchor links.When that link is activated by a keyboard, using thetab andenter keys,the main content container has a focus ring around it. Why is that?

This is because the<main> has atabindex="-1" attribute value,which means it can be programmatically focused.When the<main> is targeted—because the#main-contentin the browser URL bar matches theid—it receives programmatic focus.It's tempting to remove the focus styles in these situations,but handling focus appropriately and with care helps to create a good,accessible, user experience.It can also be a great place to add some interest to interactions.

Why is focus important?

As a web developer,it's your job to make a website accessible and inclusive to all.Creating accessible focus states with CSS is a part of this responsibility.

Focus styles assist people who use a device such as a keyboard or aswitch controlto navigate and interact with a website.If an element receives focus and there is no visual indication,a user may lose track of what is in focus.This can create navigation issues and result in unwanted behaviour if,say, the wrong link is followed.

How elements get focus

Certain elements are automatically focusable;these are elements that accept interaction and input, such as<a>,<button>,<input> and<select>.In short, all form elements, buttons and links.You can typically navigate a website's focusable elements using thetab key to move forward on the page, andshift +tab to move backward.

There is also a HTML attribute calledtabindex which allows you to change the tabbing index—which is theorder in which elements are focused—every time someone presses theirtab key,or focus is shifted with a hash change in the URL or by a JavaScript event.Iftabindex on a HTML element is set to0,it can receive focus via thetab key and it will honour the global tab index,which is defined by the document source order.

If you settabindex to-1, it can only receive focus programmatically,which means only when a JavaScript event happensor a hash change (matching the element'sid in the URL) occurs.If you settabindex to be anything higher than0,it will be removed from the global tab index,defined by document source order.Tabbing order will now be defined by the value oftabindex,so an element withtabindex="1" will receive focus before an element withtabindex="2", for example.

This behavior can be changed with CSS,using the:focus,:focus-within and:focus-visiblepseudo-classes that you learned about in thepseudo-classes lesson.It is important to set a focus style which hascontrast with the default style of an element.For example, a common approach is to utilize theoutline property.

a:focus{outline:2pxsolidslateblue;}

Theoutline property could appear too close to the text of a link,but theoutline-offset property can help with that,as it adds extra visualpadding without affecting the geometric size that the element fills.A positive number value foroutline-offset will push the outline outwards,a negative value will pull the outline inwards.

Currently in some browsers,if you have aborder-radius set on your element and useoutline,it won't match—the outline will have sharp corners.Due to this,it is tempting to use abox-shadow with a small blur radius becausebox-shadow clips to the shape,honouringborder-radius,butthis style will not show in Windows High Contrast Mode.This is because Windows High Contrast Mode doesn't apply shadows,and mostly ignores background images to favor the user's preferred settings.

In summary

Creating a focus state that has contrast with an element's default state is incredibly important. The default browser styles do this already for you, but if you want to change this behaviour, remember the following:

• Avoid usingoutline: none on an element that can receive keyboard focus.
• Avoid replacingoutline styles withbox-shadow.as they don't show up in Windows High Contrast Mode.
• Only set a positive value fortabindex on an HTML element if you absolutely have to.
• Make sure the focus state is very clear vs the default state.

Check your understanding

Test your knowledge of focus