Overview

Some people use keyboards or other devices to move through a page by jumping from one interactive element to the next.

The Focus Visible feature, which creates a Focus State, allows users to know which element they’re currently on and that it is ready to be interacted with. This helps the focused link stand out from the rest of the content on the page.

After feedback from users, we’ve improved the default focus style for all components to make sure they meet accessibility standards and user expectation.

This improvement is based on Vision Australia recommendations, supported through Blind Citizens Australia (SA) and through UK Government usability research.

Using the Focus Visible component to create a clear Focus State works well for:

  • ​People who use screen readers. Screen reader users are often blind, but not always totally blind. These users use tabbed browsing to navigate the screen reader and require a strong visual cue to their whereabouts on the page.
  • People with low vision or cognitive disabilities (like dyslexia) also use tabbed browsing to help them understand and locate content on a website.
  • People with limited mobility. For example, people who don’t have enough fine motor control in their hands to use a mouse. They may use something like a mouth stick to operate a standard keyboard, or a switch, which simulates a keyboard.
  • Power users. A power user could be someone like a digital specialist, who spends all day on the web using keyboard controls.

Feature showcase

Type 1 - Black and yellow

Developed in partnership with Vision Australia, this is the best option for usability and accessibility.

This is because the yellow has a high contrast with dark backgrounds and the thick black border has a high contrast against light backgrounds.

The yellow/black focus visible is now adopted across the UK as their standard, for example on GOV.UK and National Health Service.

Test the functionality by visiting these websites and navigating using your 'Tab' key.

Examples of the black and yellow focus visible on a drop down menu and standard hyperlink.

Type 2 - Blue border

Developed in partnership with Vision Australia, the blue border option also provides a clear focus state for the user.

Both options represent best practice and meet the standards expected (and required) of government.

Examples of the blue border focus visible on a drop down menu and standard hyperlink

Changing default colours

You can apply different colour combinations to align with your corporate branding. Focus visible colours can be changed via the site metadata. However it's important that your new colour combinations continue to meet level AA requirements.

For example, the black colour in Type 1 can be swapped to a royal blue or dark purple and the yellow to a pale orange, pale green or other suitable colour.

Colour combinations can be tricky to master, how you make focus states accessible also depends on whether the focus state:

  • is focusable text without a background colour or border
  • is another focusable element with a background colour or border
  • meets a colour contrast of at least 3.0:1 against the default state

More information about colour and contrast (including free colour contrast testing tools): accessibility.sa.gov.au/colour-and-contrast

Your site focus controls are provided on your site metadata screen.

Support and accessibility advice

As always, the WDS team is here to help you and can work with you to find the right colour combinations to suit your site and maintain its accessibility standard.