After feedback received, 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 research.
Why it's important
Some people use keyboards or other devices to move through a page by jumping from one interactive element to the next.
Focus states let users know which element they’re currently on and that it is ready to be interacted with.
When links are focused, by default they now show a yellow background with a black bottom border.
This helps the focused link stand out from the rest of the content on the page.
UK Government approach
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.
Why it works well
The yellow has a high contrast with dark backgrounds and the thick black border has a high contrast against light backgrounds.
Having a clear focus states work 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.
Changing default colours
You also have the option to use different colour combinations to maintain accessibility standards and align with your corporate branding.
We’ve achieved this by making your focus visible colours editable via the site metadata.
However it's important that your new colour combinations continue to meet level AA requirements.
For example, the black 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
As always, the 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.
Free colour contrast testing tools and more information about colour and contrast: accessibility.sa.gov.au/colour-and-contrast