Accessibility: About Focus Indicators (Visual Indicators)
2 min read
In this article
- Why focus indicators are important
- Focus indicators on your Wix site
- Enabling focus indicators
Depending on the site builder you're using, you may see a setting referred to as focus indicators (Studio Editor), or visual indicators (Wix Editor). These are blue rectangles that appear around interactive elements like buttons and links when visitors use a keyboard to navigate through a live site.
Where does Wix get its information?
- We make recommendations as per the Web Content Accessibility Guidelines (WCAG) document, which has been developed by the World Wide Web Consortium (W3C).
- This article is based on the Focus Visible criterion (2.4.7).
Why focus indicators are important
Some visitors navigate sites using the Tab key on their keyboard. Focus/visual indicators display the current position of the Tab key, so these visitors know exactly where they are on the page.
If indicators are not enabled, these site visitors may not be able to navigate the page or site content, making them an important part of site accessibility.
Focus indicators on your Wix site
Focus/visual indicators are automatically enabled on all sites you build with Wix.
The indicator is designed to fit most site color combinations. However, it is less visible on buttons with a white fill over a blue background. We therefore recommend checking the color of your site elements to ensure that all visitors can see it.
How can I test the focus indicator on my site?
To check how the focus indicator looks, open your live site or site preview, and navigate the page using your keyboard's Tab key. If the focus indicator does not appear on the preview or live version of your site, you can change the settings from the Accessibility Wizard.
Enabling focus indicators
If you are using the Wix Editor, you might need to enable the focus indicators from the Accessibility Wizard.
Using the Studio Editor?
Focus indicators are always enabled on Studio Editor sites, so you don't need to check this setting.
To enable visual indicators:
- Go to your editor.
- Click Settings at the top and select Accessibility Wizard.
- Click the More Actions icon
at the top of the Accessibility Wizard panel. - Select Advanced accessibility settings.
- Select Visual Indicators.
- Enable the Allow keyboard users to navigate through your site toggle.
Next step:
Go back to the Accessibility Checklist to continue improving the site's accessibility.
