Enable Keyboard Access - Squarespace

Enable Keyboard Access in Squarespace

1. Open your Squarespace site and navigate to the page containing interactive elements (buttons, links, form fields, menus, image links, or icon-based controls).
2. Hover over the section you want to edit and click Edit to activate inline editing.
3. Check native interactive elements first:
   • Buttons, links, and form fields in Squarespace are keyboard accessible by default.
   • Press Tab in Preview mode to confirm they receive visible focus.
4. For image blocks that act as links:
   • Select the image block → click Edit.
   • Open the Content tab → ensure a valid Clickthrough URL is set.
   • Add or update Alt Text so keyboard and screen reader users understand the link’s purpose.
5. For icon buttons (hamburger menus, close icons, social icons):
   • Select the icon → click Edit.
   • Open the Design or Content panel (varies by template).
   • Add an Accessibility Label describing the action (e.g., “Open Menu”, “Close Menu”, “Visit Twitter”).
6. Check navigation menus:
   • Open the site header editor and select the navigation menu.
   • Ensure menu items are created using the built-in navigation list (keyboard accessible by default).
   • For mobile menus, select the menu icon → open Settings → add an accessibility label like “Open Navigation”.
7. For gallery blocks and sliders:
   • Click the gallery → Edit.
   • Check arrow buttons or navigation dots if present.
   • Add Alt Text for each slide under Manage Images so keyboard users can identify slide content.
8. Identify custom code blocks or third-party embeds:
   • Select the Code Block.
   • Review the embedded content and ensure links or buttons within the code include tabindex="0" and accessible labels.
   • Replace inaccessible widgets with accessible alternatives if they cannot be fixed.
9. Click Preview and press Tab through the page:
   • Verify each interactive element receives focus,
   • Confirm navigation order follows the page layout,
   • Check that dropdowns, menus, and modals can be opened with Enter or Space.
10. Save your changes, publish the site, and repeat the keyboard test on the live version to ensure all controls are keyboard accessible across devices and browsers.