Perform the 60-Second Tab Test - Webflow

Perform the 60-Second Tab Test in Webflow

1. Publish your Webflow site to the staging domain using the Publish button in the top-right corner.
2. Open the published page in a new browser tab so you can test the live version.
3. Click anywhere near the top of the page to ensure the browser window has keyboard focus.
4. Press the Tab key once and observe which element receives focus. Confirm a clear, visible focus indicator appears.
5. Continue pressing Tab repeatedly for 60 seconds, moving through all interactive elements (links, buttons, forms, toggles, menus, sliders).
6. Watch for accessibility issues:
   • Elements that receive no focus at all,
   • Focus rings that are missing or very hard to see,
   • Focus jumping unpredictably between areas,
   • Any element requiring a mouse to operate.
7. Use Shift + Tab to move backward and confirm reverse navigation works correctly.
8. Note any elements that trap focus (e.g., open modals or custom components that you can't tab out of).
9. Return to Webflow Designer and fix identified issues:
   • Add or adjust Focused styles,
   • Set tabindex="0" on custom interactive divs,
   • Add keyboard triggers to interactions as needed.
10. Republish the site and run the 60-second tab test again to confirm the fixes work across the full page.