How to fix label title only on Squarespace

Steps for Squarespace

1. In the Squarespace editor, click on the Form Block containing the flagged fields.
2. Click 'Edit' on the form, then select each field. Ensure the 'Label' field is filled in with descriptive text and the label display is set to 'Show' (not hidden). Squarespace form fields support visible labels natively — do not rely solely on placeholder text.
3. For the built-in Newsletter Block or search field, go to Pages → Not Linked → or insert the block and configure its settings to display a visible label. If the template hides labels via CSS, add a CSS override via Design → Custom CSS to remove `display:none` from label elements rather than deleting them.
4. Squarespace does not give direct HTML access to most form elements; if a form requires fully custom accessible markup, use a Code Block embedding a custom HTML form with proper `<label>` elements.
5. Save, preview, and verify with an accessibility scanning browser extension.

<label for="email-field">Email address</label>
<input type="email" id="email-field" name="email" placeholder="you@example.com">

<!-- OR, for a visually-constrained search bar where a visible label isn't shown: -->
<input type="search" aria-label="Search products" placeholder="Search…">

<!-- ❌ WRONG — title-only or aria-describedby-only labeling: -->
<input type="email" title="Enter your email" placeholder="Email">
<input type="text" aria-describedby="hint-text"><span id="hint-text">Your name</span>

What is label title only?

Every input field on your website — search boxes, email fields, quantity pickers, checkout fields, newsletter sign-ups — needs a clearly visible label that tells the user what to type. Right now, one or more of your fields uses only a "title" attribute (which shows as a browser tooltip on hover) or an `aria-describedby` attribute (which is hidden to sighted users) as its label. These hidden or tooltip-only labels look fine to most visitors, but they are invisible to screen readers used in the way they expect, and they disappear entirely on touch screens, keyboard-only navigation, and many assistive technologies. A true accessible label is text that is always visible on screen next to the field, or at minimum announced correctly by all assistive technology via a proper `<label>` element or `aria-label`.

Failing this check means your store is not compliant with WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 3.3.2 (Labels or Instructions), which are the accessibility standards referenced by ADA, Section 508, and the European Accessibility Act. This creates real legal risk — accessibility lawsuits against e-commerce stores have increased sharply, and missing form labels are one of the most commonly cited issues. Beyond legal exposure, unlabeled fields make checkout and sign-up forms unusable for the roughly 1-in-5 shoppers who have a disability, directly costing you conversions. Search engines also use accessible markup as a quality signal, so fixing this supports your overall SEO health.

See the complete Label title only guide for every platform and the full background.