How to fix aria input field name on Shopify

Steps for Shopify

1. From your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. Locate the relevant template or snippet file — common offenders are sections/header.liquid (search bar), templates/cart.liquid or snippets/cart-drawer.liquid (quantity inputs), and templates/contact.liquid (contact form).
3. For a search input, find the <input type="search" ...> tag and add aria-label="Search products" if it has no associated <label>.
4. For quantity fields in the cart, add aria-label="Quantity for [product name]" — you can dynamically include the product title using Liquid: aria-label="Quantity for {{ item.product.title }}".
5. Save the file. Preview your store, open browser DevTools → Accessibility tab, focus the field, and confirm the Accessible Name is now set.
6. If your theme uses a JavaScript-rendered component (e.g. a React-based cart drawer from a theme app), contact the app developer or add the aria-label via a JavaScript snippet in theme.liquid after the component mounts.

What is aria input field name?

An "ARIA input field name" is the text label that screen readers and other assistive technologies announce when a user focuses on a form field — a text box, search bar, date picker, quantity field, or any other input that uses an ARIA role like `textbox`, `spinbutton`, `searchbox`, `slider`, or `combobox`. When that label is missing or empty, the field has no accessible name. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires every user-interface component to have a name that programs can determine. A field without a label is essentially invisible to assistive technology users.

Screen reader users — including many customers with visual impairments — cannot understand what to type into an unlabeled field, which means they cannot complete your checkout, search for products, or fill in any other form on your site. This directly costs you sales and excludes a significant portion of your potential customers. Legally, WCAG 2.1 AA compliance (which includes SC 4.1.2) is referenced in accessibility laws and regulations in the US (ADA), EU (EAA), UK (PSBAR), and elsewhere — stores with unlabeled form fields are at real legal risk. Search engines also use accessible markup signals as part of overall quality assessment, so fixing this contributes to long-term SEO health.

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