Skip to content Skip to footer

The role of the focus and how to style it.

Illustration of keyboard tab key.
Article Content
  • What the focus is and how it appears visually in the browser.
  • How to style the focus and best practices to ensure this styling is accessible.
  • How to give HTML elements different focus styling and why you might need to.
  • The value of spending time mastering the basics of focus styling.

When you use the tab key to cycle through elements on the page, you will find a small box that appears around each link outlining it. This box is the focus. It may also change the colour of the link text. All the links in your HTML document will have this box appear over them. It visually demonstrates to the user when they have successfully interacted with a link.

If you were to do nothing, most browsers would display a default styling for this. However, you will find that you want to customise the styling for this to match the overall design of your website. This is both in terms of the colour size of the outline box and the colour the link changes to when you are over it with the tab key.

What a pseudo class means

To do this, you need to use the pseudo-class ‘focus’. Think of this name in a semantic sense. It refers to the ‘focus’ of the keyboard on a particular link when you are navigating a website. It forms part of a specific list of pseudo-class used to style and control how interactions with links look to the user. Each of these pseudo-classes has rules on the order and how you style them (For a detailed explanation of this styling order read our article on how to make links accessible).

How to style them accessibly

The number one rule with the focus element is if you remove the outline on links (the box) with ‘display none’, always replace it. If you don’t then there will be no visual indication for keyboard users navigating the website as they have successfully tabbed to a link.

The other key factor to consider is legibility. This is both in terms of appropriate colour contrast, the colour of the outline and the colour of the link (Read more about this in are article on making links accessible here). You also need to be careful when doing any styling that affects the size and width of the outline box, as well as the thickness of the line. For example, don’t make them so thin that they can’t be seen, or the box so large that it interferes with the interaction with other links. As with all accessibility (and design in general), you need to make sure that you consider usability alongside the aesthetics that you want to achieve with your design. Your styling should allow users to predict behaviour and feel more comfortable and confident in using a website.

Useful Tip

The UK government website has a great example of accessible focus styling, which makes links clear and obvious to users when they tab over to them. Visit the UK GOV site here. However, Don’t feel you necessarily have to do focus styling as complex as this, when starting out, you could simply start by just increasing the thickness of the outline lines for the focus box to make it clearer. (Visit the Firefox MDN web docs on outline here and Read a Firefox article on Focus here).

Giving different elements their own specific styling

You will find that you may want different elements of the page, and different pages have their own focus link styling. For example, if different sections of your page were in different colours, you would need different colours for the focus styling. This is done by putting the name of the HTML element before the colon. So, if it were an article element you were styling, it would look like this:

article focus styling code sample.
Written article and a colon before the focus, two curly brackets at the start and the end, color followed by colon and blue and semi-colon.

whilst the nav would like this;

navigation focus styling sample code.
Written nav and a colon before the focus, two curly brackets at the start and the end, color followed by colon and blue and semi-colon.

Another example would be when you start to create forms and you want the focus to appear on specific inputs (read this useful CSS tricks article on focus and forms). You may also want to add specific extra enhancements to the focus element, such as the text being magnified when tabbed over.

Why at first you should keep things simple.

You can see how things can quickly become complicated. When starting out, my advice would be to keep things simple. Choose your colour carefully, double-check that the focus element is appearing properly and that you can clearly see the outline. Over time you can add more complexity but make sure that you get the basics right first.

Leave a Reply

Your email address will not be published. Required fields are marked *