Focus indicators are the outline boxes you’ll see around clickable things when someone is navigating a website using a keyboard or assistive technology. They show which item is currently “selected” so a person can confidently move around the page without using a mouse.
You’ll see focus indicators around things like: Menu items, Buttons, Linked picture blocks, File uploads
Focus indicators are important for accessibility because they:
Show where you are on the page
If someone is tabbing through a page, they need a clear visual cue for what’s selected right now.Make keyboard navigation usable
Without a visible focus indicator, people can get lost quickly and might not know what pressing Enter will activate.Support people who can’t use a mouse
This includes people with mobility limitations, temporary injuries, or anyone using specialised input devices.Reduce frustration and mistakes
Clear focus states help people move faster, avoid clicking the wrong thing, and feel more confident.
Because of how important they are, focus indicators are always on for Rocketspark sites and can’t be turned off.
When you will (and won’t) see them
Focus indicators usually don’t show up during normal mouse browsing.
They’re designed to appear when someone is using:
A keyboard (Tab, Shift + Tab, Enter, arrow keys in some contexts)
A screen reader or other assistive tools that move focus through interactive elements
So if you’re testing and you don’t see any outlines, try pressing Tab on your keyboard while viewing your published site.
Styling focus indicators on your Rocketspark website
Focus indicator colours are tied to your site’s design settings, which helps keep things consistent and readable.
Focus indicators in the header (skip link, logo, and menu)
The focus indicator you see around: Skip to main content (learn more in the Skip to main content), Logo image, Menu items…is controlled by your menu mouseover text colour.
To update it:
Go to Change design
Open Header & menu
Update the menu mouseover text colour
Tip: Choose a colour that’s clearly visible against your header background, especially when the focus outline appears.
Focus indicators throughout the rest of the site (buttons, links, images, galleries, file uploads)
For focus indicators outside the menu, the outline colour default will match your sitewide linked text colour. This includes: Buttons, Linked text, Linked picture blocks, Linked grid galleries, File uploads, Social icons, etc. You can customise the outline colour per stack if needed to ensure the outline stands out.
To update it sitewide:
Go to Change design
Open Headings & paragraphs
Update the linked text colour
Styling focus indicators per stack (handy for contrast)
Sometimes a sitewide link colour looks great, but a specific stack has a background where the focus outline needs more contrast. You can adjust this per stack.
To change the focus indicator colour for a specific stack:
Open the stack
-
Select the edit pencil for Stack design
Go to Headings & paragraphs and scroll to the bottom of these settings
Change the Focus indicator colour
Click save changes
This is a great option when you want to make sure the focus indicator is clearly visible on darker images, coloured panels, or high contrast sections.
Quick checklist for a great focus indicator
When choosing colours, aim for:
Strong contrast against the background
A colour that’s easy to spot quickly
Consistency across the site, unless a stack needs a special tweak for readability
Learn more about Rocketspark accessibility features:
If you have any questions, please contact support@rocketspark.com