Perform the 60-Second Tab Test - Framer

Perform the 60-Second Tab Test in Framer

1. Publish or update your Framer project so the live site reflects your latest changes.
2. Open the live version of the page in a new browser tab.
3. Click near the top of the page to give the browser keyboard focus.
4. Press Tab once and observe which element receives focus—ensure a visible focus indicator (outline, glow, or highlight) appears.
5. Continue pressing Tab repeatedly for 60 seconds to move through all interactive elements:
   • Buttons
   • Text links
   • Navigation items
   • Image links
   • Icon buttons (hamburger, close, arrows)
   • Form fields
   • Carousels or slider controls
   • Custom Frame-based controls
6. Identify any accessibility issues:
   • Elements that do not receive focus,
   • Missing or faint focus indicators,
   • Illogical or jumpy focus order,
   • Controls that cannot be activated using Enter or Space.
7. Use Shift + Tab to confirm reverse navigation works properly and doesn’t skip important elements.
8. Open interactive components to test keyboard trapping:
   • Open a mobile menu → tab through to ensure focus stays inside until closed,
   • Open any modals or overlays → verify that focus moves inside the modal and returns to the trigger when closed,
   • Test slider arrows or pagination dots → confirm they can be reached and activated with the keyboard.
9. Return to Framer to fix issues:
   • Select missing-focus elements → enable Focusable in the Accessibility panel,
   • Add or improve focus indicators using Design → States → Focused,
   • Reorder layers or adjust Auto Layout direction when focus order doesn’t match the reading order,
   • Add ARIA Labels for icon-only controls.
10. Publish the project and re-run the 60-second tab test until every interactive element is:
    • Keyboard reachable,
    • Clearly highlighted,
    • Logically ordered,
    • Operable with Enter or Space.