Aria input field name
Moderate effortFound on 5% of audited stores.
Add a meaningful accessible name (label) to every ARIA input field so screen readers can identify and announce it to users.
What it is
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.
Why it matters
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.
How to fix it
- Identify every input element that uses an ARIA input role (role="textbox", "spinbutton", "searchbox", "combobox", "slider") by searching your templates/theme files for these role values.
- For each field, choose the best labeling method: (a) associate a visible <label> element using its 'for' attribute matching the field's 'id'; (b) add an aria-label attribute directly on the element with a short descriptive string (e.g., aria-label="Search products"); or (c) add aria-labelledby pointing to the id of an existing visible text element on the page that describes the field.
- Prefer a visible <label> element over aria-label wherever possible — visible labels help all users, not just screen reader users, and are the most robust solution.
- If the field is intentionally visually hidden (e.g., a search icon with no visible label), use aria-label with a concise, meaningful description (e.g., aria-label="Search") rather than leaving it blank.
- After making changes, use a browser accessibility tool (axe DevTools browser extension, Chrome Accessibility Tree, or NVDA/VoiceOver) to confirm the field now announces a meaningful name when focused.
- Re-run your automated accessibility scanner to verify the aria-input-field-name violation is resolved.
<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" />Fix it on your platform
Pick your platform for the exact steps.
How to fix aria input field name on Shopify
- Go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
- Search for the ARIA role causing the issue (e.g., role="textbox") using the search bar in the code editor across Sections, Snippets, and Layout files.
- Open the relevant file (e.g., sections/header.liquid for a search bar, sections/main-cart-footer.liquid for cart inputs) and add a <label> or aria-label to the affected element.
- For Shopify's built-in search input, locate the search form snippet (often snippets/predictive-search.liquid or the Dawn theme's search-modal.liquid) and ensure the <input> element has aria-label="Search" or a linked <label>.
- Save the file and use the Shopify theme preview plus a browser axe extension to confirm the fix.
- If you use a third-party theme or app that injects forms (e.g., reviews, currency selectors), contact the app developer or use the 'Edit code' approach to override their template snippets.
How to fix aria input field name on Shopify Plus
- Follow all standard Shopify steps above; Shopify Plus also allows editing checkout.liquid (under Online Store → Themes → Edit code → Layout/checkout.liquid) for checkout-specific input fields.
- For custom checkout fields in the Checkout editor (Shopify Plus only), go to Settings → Checkout → Customize and use the drag-and-drop UI — for custom code blocks, add aria-label attributes directly in the custom HTML/Liquid blocks.
- If using Hydrogen (headless), edit the React component responsible for the input field and add an aria-label prop or a <label> element in your component JSX.
How to fix aria input field name on WooCommerce
- Go to your WordPress Dashboard → Appearance → Theme File Editor (or use a code editor via FTP/SFTP).
- Locate the template file containing the problematic input — common locations are woocommerce/templates/global/form-row.php, templates/checkout/form-checkout.php, or a widget template.
- To override a WooCommerce template safely, copy it to your child theme under yourtheme/woocommerce/... preserving the folder structure, then edit the copy.
- In the template file, add a <label for="field-id">Descriptive name</label> before the <input>, or add aria-label="Descriptive name" directly on the <input> element.
- For theme-level custom inputs (e.g., in a page builder widget), use your child theme's functions.php with a woocommerce_form_field filter to inject label attributes programmatically.
- Install and run the free 'WP Accessibility' plugin (by Joe Dolson) as a supplement — it patches common labeling issues in WordPress core forms automatically.
How to fix aria input field name on BigCommerce
- Go to Storefront → My Themes → click Customize on the active theme → select Edit Theme Files (Advanced) or use the Web DAV connection to download the theme files locally.
- Search the Handlebars (.html) template files for the ARIA role causing the violation — commonly found in templates/components/search/quick-search.html, templates/components/cart/, or templates/components/account/.
- Add a <label for="..."> element before the input, or add aria-label="..." directly to the <input> or element with the ARIA role.
- For Stencil CLI users: edit the file locally, run 'stencil start' to preview, verify with axe DevTools in the browser, then push via 'stencil push'.
- Upload the corrected theme via Storefront → My Themes → Upload Theme, then apply it.
How to fix aria input field name on Wix
- Open the Wix Editor and click on the form or input element with the accessibility issue.
- In the element's settings panel, look for an 'Accessibility' section (available on some Wix form and text input widgets) and fill in the 'Accessible Label' or 'aria-label' field.
- For Wix Velo (custom code): open the Dev Mode panel, click the input element to get its component ID, then in the page code (or site code) use the element's 'accessibility.ariaLabel' property: $w('#myInput').accessibility.ariaLabel = 'Search products';
- If the input is inside a Wix Form app widget, go to the form editor, click the specific field, and edit the field label — ensure 'Show Label' is toggled on, or use the field settings to add placeholder/label text.
- Publish the site and verify using the browser axe extension or Chrome Accessibility Tree.
How to fix aria input field name on Squarespace
- In the Squarespace editor, click on the Form Block or Search Block containing the unlabeled input.
- 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.
- 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');
- Add that JavaScript via Settings → Advanced → Code Injection → Footer, or via a Code Block on the relevant page.
- Verify in the live preview using the axe browser extension.
How to fix aria input field name on Webflow
- Open your Webflow project in the Designer and select the Form Block or specific Input element that is missing a label.
- In the right-hand Settings panel for the Input element, find the 'Label' toggle — enable it and fill in a descriptive label text. Webflow will render a proper <label> element linked to the input.
- If a visible label is not desired for design reasons, keep the label hidden visually: select the Label element, go to Style panel → add a class (e.g., 'visually-hidden') and apply CSS: position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; — this hides it visually while keeping it accessible.
- Alternatively, select the Input element → Settings panel → Custom Attributes section → add a new attribute: Name = aria-label, Value = 'Your descriptive label text'.
- Publish the site and verify using the axe DevTools browser extension.
How to fix aria input field name on Adobe Commerce (Magento)
- Locate the PHTML or HTML template responsible for the input field — search under app/design/frontend/<Vendor>/<Theme>/ (custom theme) or vendor/magento/module-*/view/frontend/templates/ (core module).
- Override the template by copying it to your custom theme directory under app/design/frontend/<Vendor>/<Theme>/Magento_<ModuleName>/templates/ preserving the path.
- In the overridden template file, add <label for="field-id">Descriptive name</label> linked to the input's id, or add aria-label="Descriptive name" directly on the <input> or ARIA-role element.
- For UI Component-based forms (e.g., checkout), edit the XML layout file in app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/layout/checkout_index_index.xml and add an 'additionalClasses' or 'label' node, or use a JavaScript mixin to add the aria-label attribute at runtime.
- Run bin/magento cache:clean && bin/magento setup:static-content:deploy, then verify with the axe browser extension on the frontend.
How to fix aria input field name on Magento Open Source
- Follow the same template override and XML layout approach as Adobe Commerce (Magento) above.
- For JavaScript-rendered components (e.g., minicart, checkout), create a RequireJS mixin in your module or theme to add aria-label after the component renders.
- Run bin/magento cache:clean and deploy static content, then retest with axe DevTools.
How to fix aria input field name on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → and use 'Edit current theme' or access files via FTP.
- Locate the template file for the affected form — common locations are themes/<yourtheme>/templates/checkout/, themes/<yourtheme>/templates/customer/, or module override templates.
- Open the .tpl (Smarty) file and add a <label for="field-id">Descriptive name</label> before the input, or add aria-label="..." directly to the <input> tag.
- Clear the PrestaShop cache via Advanced Parameters → Performance → Clear cache, then verify the fix in a browser with the axe extension.
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 audit 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?
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.
Why does aria input field name matter?
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.
How do I fix aria input field name?
Add a meaningful accessible name (label) to every ARIA input field so screen readers can identify and announce it to users.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Forms tutorial — W3C WAI
- ARIA basics — MDN