Accessibility: About Focus Indicators (Visual Indicators)

When working on a site's accessibility, you may see a setting referred to as focus indicators. These are blue rectangles that appear around interactive elements like buttons and links when visitors use a keyboard to navigate through the 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 indicators display the current position of the Tab key, so visitors know exactly where they are on the page.

If these indicators are not enabled, site visitors may not be able to navigate the page or site content. Focus indicators are therefore an important part of a site's accessibility.

Focus indicators on your Wix site

Focus 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 the indicator.

How can I test the focus indicator on a 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.

Enabling focus indicators

While checking a live Wix Editor site, you may notice that the focus indicator doesn't appear. If you previously disabled focus indicators, you are prompted to and can enable them in the Accessibility Wizard.

Working with the Studio Editor or Harmony Editor?

Focus indicators are always enabled on sites you create with the Studio Editor or the Harmony Editor, so you don't need to check this setting.

To enable visual indicators:

1. Go to your editor.

2. Click Settings at the top and select Accessibility Wizard.

3. Click Scan Site in the panel on the right side of your editor.

4. Click the Detected issues tab.

5. Open the Site level drop-down and click Show focus indicators.

6. Enable the Include visual indicators toggle.

7. Click Apply.

Note:

Once you have enabled focus indicators on your Wix Editor site, it is not possible to turn them off.

Next step:

Go back to the Accessibility Checklist to continue improving the site's accessibility.