Label All Controls in Squarespace
- Open your Squarespace site and navigate to the page containing the controls you want to label (form fields, buttons, icons, menu triggers, etc.).
- Hover over the section containing the control and click Edit.
- Select the first control on the page:
- For form elements, click the form block to open its settings panel.
- For buttons or links, click directly on the element to open its editing toolbar.
- For form fields:
- In the form settings panel, click the field you want to label.
- Enter a clear, descriptive Field Label (e.g., “Email Address”, “Full Name”).
- Ensure the Placeholder text is optional and not used as the only label.
- For buttons:
- Click the button text to edit it.
- Rewrite the label to clearly indicate the action (e.g., “Submit Form”, “View Services”, “Start Checkout”).
- For image or icon buttons (e.g., social icons, hamburger menu icons):
- Select the element → click Edit → open the Design or Content panel.
- In the Accessibility Label or Alt Text field, enter a descriptive purpose-based label such as “Open Menu”, “Close Modal”, or “Visit Instagram Page”.
- For images used as links:
- Select the image block → click Edit.
- Open the Content tab and locate the Alt Text field.
- If the image functions as navigation, describe the action (e.g., “Go to Portfolio”).
- Repeat steps 3–7 for all interactive controls on the page to ensure every action is clearly labeled and accessible.
- Switch to Mobile preview and check that mobile-only elements (hamburger menus, mobile buttons) also have proper labels using the same steps.
- Save your changes and preview the site. Use a screen reader or browser accessibility inspector to verify that each control is announced with the correct label.
.png)
.png)
.jpeg)
.png)
.png)
