How to fix aria input field name on Squarespace

Add a meaningful accessible name (label) to every ARIA input field so screen readers can identify and announce it to users.

Steps for Squarespace

  1. In the Squarespace editor, click on the Form Block or Search Block containing the unlabeled input.
  2. For Form Blocks: click Edit on the form, select the specific field, and ensure the 'Label' field is filled in and 'Show Label' is enabled — Squarespace renders this as a proper <label> element.
  3. For the Search Block: Squarespace's built-in search input should have an accessible label by default; if it doesn't (e.g., in older templates), go to Pages → Not Linked → add a Code Block with a CSS/JS override using aria-label injection: document.querySelector('input[type=search]').setAttribute('aria-label', 'Search site');
  4. Add that JavaScript via Settings → Advanced → Code Injection → Footer, or via a Code Block on the relevant page.
  5. Verify in the live preview using the axe browser extension.
Official Squarespace documentation ↗
<label for="product-search">Search products</label>
<input id="product-search" type="text" role="searchbox" />

<!-- OR, when a visible label isn't possible: -->
<input type="text" role="searchbox" aria-label="Search products" />

<!-- OR, referencing existing visible text: -->
<h2 id="filter-heading">Filter by price</h2>
<input type="text" role="spinbutton" aria-labelledby="filter-heading" />

What is aria input field name?

Any interactive form field that uses an ARIA role (such as `role="textbox"`, `role="spinbutton"`, `role="searchbox"`, `role="combobox"`, or `role="slider"`) must have an accessible name — a short text label that describes what the field is for. This name can be provided via an HTML `<label>` element, an `aria-label` attribute, or an `aria-labelledby` attribute pointing to visible text on the page. Without it, assistive technologies like screen readers have nothing to announce when a user reaches the field. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that all user interface components have a name that can be determined programmatically.

Screen reader users — including many people with visual impairments — rely entirely on accessible names to understand what a form field is asking for. An unnamed input field is announced as a blank or generic "edit field," leaving the user completely unable to fill it in correctly, which means lost sales, failed sign-ups, and broken checkout flows on your store. Beyond conversions, failing WCAG 4.1.2 is one of the most commonly cited violations in accessibility lawsuits and regulatory audits (ADA, Section 508, EN 301 549, and the EU Web Accessibility Directive), exposing your business to real legal and financial risk. Fixing it also improves SEO indirectly, since search engines use semantic HTML signals — including proper labeling — to better understand page content and forms.

See the complete Aria input field name guide for every platform and the full background.

Not sure if your Squarespace store has this?

Run a free SEOLZ audit — we’ll find aria input field name and every other issue across your whole site.

Scan my site free

Fix aria input field name on another platform