Aria input field name
Moderate effortFound on 8% of audited stores.
Add a descriptive accessible name (aria-label, aria-labelledby, or a visible <label>) to every ARIA input field so assistive technologies can identify it.
What it is
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.
Why it matters
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.
How to fix it
- Identify the offending field: find any HTML element with a role of textbox, spinbutton, searchbox, slider, or combobox (or a native <input>, <select>, or <textarea>) that lacks a visible <label>, an aria-label attribute, or an aria-labelledby attribute pointing to visible text.
- Preferred fix — use a visible <label> element: give the input a unique id attribute, then add <label for="that-id">Descriptive text</label> immediately before or after the field. This is the best approach because it helps all users, not just screen-reader users.
- When a visible label is not possible (e.g. an icon-only search bar): add aria-label="Search products" directly on the input element with a short, descriptive phrase.
- When label text already exists elsewhere on the page (e.g. a heading or a nearby span): add aria-labelledby="id-of-that-text" on the input to associate the existing text as its accessible name.
- Never use placeholder text as the only label — placeholder disappears as the user types and is not reliably read by all assistive technologies.
- Verify the fix: open your browser's DevTools Accessibility panel, focus the field, and confirm the 'Accessible Name' property is populated; also run axe DevTools or WAVE to confirm the aria-input-field-name rule passes.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria input field name on Shopify
- From your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
- 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).
- For a search input, find the <input type="search" ...> tag and add aria-label="Search products" if it has no associated <label>.
- 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 }}".
- Save the file. Preview your store, open browser DevTools → Accessibility tab, focus the field, and confirm the Accessible Name is now set.
- 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.
How to fix aria input field name on Shopify Plus
- Same steps as Shopify above. Additionally, if you use Checkout Extensibility (the new checkout editor), go to Settings → Checkout → Customize and inspect any custom checkout UI extensions you have installed.
- For custom checkout UI extensions built with Shopify's checkout UI kit, ensure every <TextField> component includes the required label prop — Shopify's own components handle aria-label automatically when label is supplied.
- For legacy checkout.liquid (if still enabled on your Plus plan), edit the file directly at Online Store → Themes → Edit code → layout/checkout.liquid and apply the same aria-label or <label for> patterns.
How to fix aria input field name on WooCommerce
- Install and activate the free WP accessibility plugin (e.g. 'WP Accessibility' by Joe Dolson) to catch common label issues automatically.
- For theme-level fixes, navigate in WordPress Admin to Appearance → Theme File Editor (or use a child theme) and locate the relevant template: woocommerce/templates/cart/cart.php (quantity inputs), woocommerce/templates/global/form-login.php, or your theme's search form (searchform.php).
- To override WooCommerce templates safely, copy the file from /wp-content/plugins/woocommerce/templates/ into /wp-content/themes/your-child-theme/woocommerce/ preserving the folder structure, then edit that copy.
- In the quantity input template (form-quantity-input.php or inside cart.php), find <input type="number" ...> and add: aria-label="<?php printf( esc_attr__( 'Quantity for %s', 'woocommerce' ), $product_name ); ?>"
- For the site search bar, open searchform.php (or your theme's search widget template) and ensure the <input type="search"> has either a wrapping <label> or aria-label="Search".
- Update and verify with the WAVE browser extension or axe DevTools.
How to fix aria input field name on BigCommerce
- In BigCommerce Admin, go to Storefront → Themes → click Customize on your active theme → click Advanced → Edit Theme Files (opens Stencil theme editor) or download the theme via the Theme Marketplace for local editing.
- Common problem files: templates/components/cart/item-quantity.html (cart quantity inputs), templates/components/search/quick-search.html (search bar).
- In item-quantity.html, locate the <input type="number"> and add aria-label="Quantity for {{name}}" using the available Handlebars context variable for product name.
- In quick-search.html, ensure the search <input> has aria-label="Search our store" or is wrapped in a <label>.
- Upload/save the modified theme files, preview the change, then publish the theme.
- Verify with axe DevTools browser extension on the live storefront.
How to fix aria input field name on Wix
- Open the Wix Editor for your site. Click on the form or input element that is flagged.
- In the left panel, click the element's Settings (gear icon) or the Accessibility panel (if available in your plan) and look for 'Accessible Label' or 'ARIA Label' fields — Wix exposes these for many elements.
- If the element is a Wix Forms field, go to the field settings and ensure the 'Field Title' / 'Label' is filled in and set to visible (not hidden with CSS). A visible label is always preferred.
- For elements where Wix does not expose an ARIA label field natively, use Wix Velo (Developer Mode): enable Dev Mode → click the element → use $w('#inputId').accessibility.ariaLabel = 'Descriptive label'; in your page code.
- Publish your site and verify with the WAVE browser extension.
How to fix aria input field name on Wix Studio
- Open Wix Studio and select the page containing the unlabeled input.
- Click the input element, then open the Properties & Events panel on the right. Look for the 'Accessibility' section and fill in the 'ARIA label' field with a descriptive name.
- For Wix Studio's native form widgets, ensure the 'Label' field is populated in the component settings — Studio auto-generates the accessible name from the visible label text.
- For custom-coded components using Velo, add $w('#elementId').accessibility.ariaLabel = 'Your label'; in the relevant page or site code.
- Publish and verify with axe DevTools.
How to fix aria input field name on Squarespace
- In Squarespace, go to Pages → select the page with the form → click Edit, then click on the Form Block.
- Click the pencil/edit icon on the form. For each field, ensure the 'Label' field is filled in and 'Show Label' is toggled ON — Squarespace uses the visible label as the accessible name automatically.
- Do not rely solely on placeholder text; always enable the visible label.
- For search blocks, Squarespace typically injects an accessible label automatically, but if flagged, add a Code Injection snippet: go to Settings → Advanced → Code Injection → Footer and add a small JavaScript snippet: document.querySelectorAll('input[type="search"]:not([aria-label])').forEach(el => el.setAttribute('aria-label', 'Search'));
- Save and verify with the WAVE browser extension.
How to fix aria input field name on Webflow
- Open the Webflow Designer and click the input or form element that is flagged.
- In the right-hand Settings panel (the gear icon), scroll to the 'Accessibility' section. Fill in the 'Custom Attribute' fields: Name = aria-label, Value = your descriptive label text (e.g. 'Email address').
- Alternatively, if a visible label exists, ensure the label's 'For' attribute matches the input's 'ID' — set both in the Settings panel to create a proper label association without needing aria-label.
- For Webflow's native Form Block fields, click the label element inside the form and ensure it is not set to 'Display: None' in the Style panel — hiding labels visually removes them for sighted users but assistive tech may still read them; use the visually-hidden CSS technique instead if you need to hide labels.
- Publish and verify with axe DevTools.
How to fix aria input field name on Adobe Commerce (Magento)
- Identify the problematic template file. Common locations: app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/templates/cart/item/default.phtml (quantity), Magento_Search/templates/form.mini.phtml (search), Magento_Customer/templates/form/login.phtml.
- Create an override in your custom theme by copying the file from vendor/magento/module-*/view/frontend/templates/ to app/design/frontend/<Vendor>/<Theme>/<Module>/templates/ preserving the same relative path.
- In the quantity input, add: aria-label="<?= $escaper->escapeHtmlAttr(__('Quantity for %1', $item->getName())) ?>"
- In the mini-search form (form.mini.phtml), ensure the <input type="search"> has: aria-label="<?= $escaper->escapeHtmlAttr(__('Search entire store here...')) ?>"
- Run bin/magento cache:flush after saving template changes.
- Verify with axe DevTools browser extension on the storefront.
How to fix aria input field name on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template override process and file paths are identical for Magento Open Source 2.x.
How to fix aria input field name on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → identify your active theme.
- Navigate to your theme folder at /themes/<your-theme>/templates/ and locate the offending template — common files: checkout/_partials/form-fields.tpl (checkout inputs), catalog/_partials/search-filters.tpl (filter inputs), layouts/search.tpl (search bar).
- In form-fields.tpl, find the <input> tag inside the loop and add: aria-label="{$field.label|escape:'html':'UTF-8'}" to associate the field label text directly on the input as well as using the visible <label>.
- Clear the PrestaShop cache: Advanced Parameters → Performance → Clear cache.
- Verify with WAVE or axe DevTools.
How to fix aria input field name on Headless / Custom (I build in code)
- Audit all <input>, <select>, <textarea>, and elements with role='textbox'/'searchbox'/'spinbutton'/'slider'/'combobox' in your component library.
- For each, ensure one of the following is true: (a) a <label htmlFor='inputId'> exists with matching id on the input, (b) aria-label='...' is set directly on the element, or (c) aria-labelledby='someId' points to an existing element with descriptive text.
- In React/Next.js/Nuxt, build a reusable <FormField> component that always renders a <label> and throws a prop-types or TypeScript error if the label prop is missing.
- Add automated accessibility checks to your CI pipeline using jest-axe or Playwright with axe-core so unlabeled inputs are caught before deployment.
- Verify in the browser with axe DevTools and by navigating the form using only VoiceOver (macOS) or NVDA (Windows).
How to fix aria input field name on Wix eCommerce
- Follow the same steps as Wix above; for product page custom fields or checkout inputs, use Wix Velo: $w('#inputElement').accessibility.ariaLabel = 'Descriptive label'; in the product page code.
- For Wix Stores checkout fields, go to the Wix Editor → Checkout page → click the form field → check field label visibility settings in the panel.
How to fix aria input field name on Squarespace Commerce
- Follow the same steps as Squarespace above.
- For checkout form fields managed by Squarespace Commerce (billing/shipping), these are system-generated — contact Squarespace support to report the accessibility issue, or inject a JavaScript fix via Settings → Advanced → Code Injection → Footer using setAttribute('aria-label', '...') targeting the specific input.
How to fix aria input field name on Webflow Commerce
- Follow the same Webflow Designer steps above for product page and cart form inputs.
- For Webflow Commerce checkout (if using native checkout), custom form inputs added to the checkout can be labeled via the Settings panel custom attribute: aria-label = 'value'.
Does your site have this issue?
Run a free SEOLZ scan to find aria input field name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does aria input field name matter?
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.
How do I fix aria input field name?
Add a descriptive accessible name (aria-label, aria-labelledby, or a visible <label>) to every ARIA input field so assistive technologies can identify it.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Forms tutorial — W3C WAI
- ARIA basics — MDN