How to fix aria input field name on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Audit all <input>, <select>, <textarea>, and elements with role='textbox'/'searchbox'/'spinbutton'/'slider'/'combobox' in your component library.
2. 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.
3. 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.
4. Add automated accessibility checks to your CI pipeline using jest-axe or Playwright with axe-core so unlabeled inputs are caught before deployment.
5. Verify in the browser with axe DevTools and by navigating the form using only VoiceOver (macOS) or NVDA (Windows).

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.