Border focus is the term used with web development to explain the visual identification of where a user is within the content. It gives visual identification to the user which is different to the standard view of the webpage. These are outlined in colour, and it is a solid line.

When a user is navigating around a web page, they may be using keyboard controls and not a mouse. This is done by using the TAB key and it will guide you through the webpage. To identify where the focus is, there needs to be a border focus that highlights where you are on the page.

We have selected our border focus colour to be green (#228833). This colour contrasts against the majority of our brand colour palette, but there are some limitations.

This includes navigation handles and content core anchors.

Option 1

When you TAB onto a button, the focus border will be created using the inset property technique. The border focus must be at least 3px thick.

Use these button colours with the following background colours. Click to expand the content.

When you TAB onto a button, the focus border will be created using the outset property technique. The border focus must be 2px thick and must leave a 3px space between the edge of the button.

Use these background colours with the following button colours. Click to expand the content.

Inline links must be underlined. When you TAB onto an inline link, the focus border will be created using the CSS outline property technique. The border focus must be at least 2px thick.

Use these link text colours with the following background colours. Click to expand the content.

When you TAB onto a page item, the focus border will be outset from the page item frame. The border focus must be 2px thick and must leave a 3px space between the edge of the page item.

The background colour of a page item can be:

• White
• Dark Purple
• Bright Green
• Pastel Green
• Bright Yellow
• Pastel Yellow