Make Focus Visible - Wix

Make Focus Visible in Wix

1. Open your site in the Wix Editor and navigate to the page containing links, buttons, form fields, menus, or other interactive elements.
2. Select the first interactive element on the canvas (button, link, menu item, icon link, etc.).
3. In the right-hand panel, click Accessibility.
4. Locate the option labeled Show focus ring (or Keyboard focus indicator).
   • Turn this setting On to ensure the element displays a visible outline when selected by keyboard.
5. For elements with design customization (buttons, boxes, strips):
   • Click Design → Customize Design.
   • Look for the Focus state in the state selector (Normal / Hover / Click / Focus).
   • Apply a clearly visible focus style, such as a 2–3px solid outline, a high-contrast border, or a glow-style box shadow.
6. Repeat steps 2–5 for:
   • All buttons and links,
   • Form inputs, dropdowns, checkboxes, radio buttons,
   • Menu items in both desktop and mobile menus,
   • Icon-based controls such as close buttons or hamburger menus.
7. If an interactive element has no Focus state in its design panel (common for custom boxes or images with click actions):
   • Open Accessibility and enable Show focus ring.
   • Add a descriptive label so screen readers identify it correctly.
8. Switch to Mobile view and repeat the same checks. Ensure mobile-only elements (like hamburger menus) also show visible focus indicators.
9. Click Preview and press Tab repeatedly to move through interactive elements. Confirm a visible outline or highlight appears each time focus changes.
10. Publish the site and test the live page to verify that all interactive elements display a reliable, high-contrast focus indicator across devices and browsers.