Accessibility: About Focus Indicators (Visual Indicators)
3 min read
Depending on the site builder you're using, you may see a setting referred to as 'Focus indicators (Studio Editor), or as '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 the live site.
In this article, learn more about:
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, and they are therefore an important part of site accessibility.
Indicators and Wix sites
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 site elements to ensure that all visitors can see it.
Testing focus indicators
You can check how the focus indicator looks whenever you want. Simply open the live site (or site preview), and navigate the page using your keyboard's Tab key.
If you notice the visual indicator does not appear on the preview / live version of your Wix Editor site, you can check and change the settings from the Accessibility Wizard.
Building a site with the Studio Editor?
It is not possible to disable focus indicators on Studio Editor sites, so you don't need to check this setting.
To check 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.
- Click the toggle beside Allow keyboard users to navigate through your site:
- Enabled: Visitors using a keyboard to navigate your site see a blue rectangle to indicate their location on the page.
- Disabled: Visitors do not see an indication of their location on the page.
Next step:
Go back to the Accessibility Checklist to continue improving the site's accessibility.
Did this help?
|