How to fix error not associated on Shopify

Steps for Shopify

1. In your Shopify admin, go to Online Store → Themes → click 'Edit code' on your active theme.
2. Locate the form templates: checkout is controlled by Shopify's native checkout (customisable only on Shopify Plus via checkout.liquid or Checkout Extensibility); contact forms are in templates/page.contact.liquid or sections/contact-form.liquid.
3. Open the relevant Liquid file and find each <input> or <textarea> element inside the form.
4. Directly below each input, add a hidden error span: <span id="FIELDNAME-error" class="form-error" hidden></span>
5. Add aria-describedby="FIELDNAME-error" to the matching input element.
6. In your theme's main JavaScript file (assets/theme.js or assets/application.js), hook into the form's submit/validation logic to: set input.setAttribute('aria-invalid','true'), set errorSpan.textContent = 'Your descriptive error text', and errorSpan.removeAttribute('hidden') when invalid; reverse these on correction.
7. For Shopify Plus stores, use Checkout Extensibility (checkout UI extensions) or the checkout.liquid theme section to add the same ARIA attributes to checkout fields.
8. Save all files and test with a screen reader.

What is error not associated?

When a customer fills out a form on your site (checkout, contact, newsletter sign-up) and submits it with a mistake, your site needs to tell them two things: (1) that the field is in an error state, and (2) what the error actually is. Sighted users see this visually — a red border, an error message below the field. But screen reader users rely on invisible HTML attributes called `aria-invalid` and `aria-describedby` to receive the same information. Without these attributes, a screen reader user hits Submit, nothing seems to happen, and they have no idea which field failed or why. WCAG 2.1 Success Criterion 3.3.1 (Error Identification) requires that input errors be identified and described to the user in text.

Roughly 7–8 million people in the US use screen readers, and many more use other assistive technologies. If your checkout or contact form is inaccessible, these customers simply cannot complete a purchase or inquiry — which is lost revenue you may not even know about. Beyond conversions, the ADA and similar laws in many countries treat web accessibility failures as discrimination, creating legal exposure including demand letters and lawsuits that have cost retailers thousands to hundreds of thousands of dollars to resolve. Fixing form error accessibility is also a direct ranking signal for Google's Core Web Vitals and overall page-experience scores, meaning it can influence organic search visibility. This is a quick, targeted fix with an outsized impact on inclusivity, revenue, and legal risk.

See the complete Error not associated guide for every platform and the full background.