Make Focus Visible - Squarespace

Make Focus Visible in Squarespace

1. Open your Squarespace site and navigate to the page you want to edit, then click Edit to activate inline editing.
2. Enter Preview mode and press Tab once to see how default focus indicators appear on your template. Note which elements show visible focus and which do not.
3. Exit Preview and select the first interactive element (button, link, menu item, form field, or icon button).
4. For buttons and text links:
   • Click the element → select Edit.
   • Open the Design panel.
   • Adjust Button Styles or Link Styles so the focused state is clearly visible—this may include adding a higher-contrast outline, underline, or color shift that remains visible on focus.
   • Squarespace inherits browser focus rings for many elements; ensure your design does not hide them with outline overrides.
5. For navigation menus:
   • Open the header editor → select the navigation element.
   • In Style, ensure the link focus or active styles have enough contrast and are not fully removed.
   • For mobile menus, click the menu icon → ensure its focus ring is not disabled and stands out visually.
6. For form fields:
   • Click the form block → Edit.
   • Open Design for the form.
   • Ensure field borders or background colors visibly change on focus (e.g., darker border, distinct glow, or clear highlight).
7. If your template suppresses browser focus outlines, re-enable them using custom CSS:
   • Go to Design → Custom CSS.
   • Add a visible focus rule (e.g., outline or box shadow). Avoid removing outlines without replacing them with an accessible alternative.
8. Repeat the process for icon-based triggers (hamburger menus, close icons, gallery arrows) by selecting each icon → Edit → verify it shows a visible outline or highlight on focus.
9. Return to Preview and press Tab repeatedly:
   • Confirm each interactive element has a strong, visible focus indicator,
   • Ensure the outline is not hidden against dark or complex backgrounds,
   • Verify hover and focus styles do not conflict visually.
10. Save and publish your changes, then test again on the live site to ensure focus visibility works consistently across browsers and devices.