Form fields with invalid autocomplete values on Next.js
What this is
3 fields use an `autocomplete` value browsers do not understand, so autofill cannot help people who find typing hard.
Who it affects
- People with motor disabilities
- People with cognitive disabilities
Standards
How to fix it
- Use a valid token from the HTML autocomplete list, such as `email`, `given-name`, `family-name`, `tel`, `postal-code`.
Example
Before
<input name="email" autocomplete="mail">After
<input name="email" autocomplete="email">On Next.js
Render `<label htmlFor="id">` for each input (use `useId()` for ids) or an `aria-label`. Fix it in shared Input components.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.