Goal
Ensure that the purpose of input fields (such as name, email, credit card, phone number) can be programmatically determined so that assistive technologies and browser autofill can provide help to users.
Key Points
- Use HTML5 input types (
type="email",type="tel",type="url") whenever possible. - Use the
autocompleteattribute with standard values (e.g.,autocomplete="email"). - Helps screen readers, password managers, and browsers prefill forms correctly.
- Supports reducing user errors and improving accessibility for all users.
Short Summary
By marking the input purpose programmatically, users benefit from assistive technology support and browser autofill, making forms faster, safer, and easier to use.
Example Issues and Fixes
Generic Text Input
Fail
<div class="flex w-full flex-col gap-8 p-8">
<form class="flex flex-col gap-2">
<label>Name</label>
<input class="border p-2 rounded w-full" type="text" name="fullname" placeholder="Enter your full name">
</form>
</div>
Pass
<div class="flex w-full flex-col gap-8 p-8">
<form class="flex flex-col gap-2">
<label for="fullname">Full Name</label>
<input id="fullname" type="text" name="fullname" autocomplete="name" placeholder="Enter your full name" class="border p-2 rounded w-full">
</form>
</div>
Email Without Autocomplete
Fail
<div class="flex w-full flex-col gap-8 p-8">
<form class="flex flex-col gap-2">
<label>Email</label>
<input class="w-full rounded border p-2" type="text" name="email" />
</form>
</div>
Pass
<div class="flex w-full flex-col gap-8 p-8">
<form class="flex flex-col gap-2">
<label for="email">Email Address</label>
<input id="email" type="email" name="email" autocomplete="email" class="border p-2 rounded w-full">
</form>
</div>
Quick Checklist
- Are HTML5 input types used for emails, phone numbers, URLs, passwords, etc.?
- Are autocomplete attributes properly assigned?
- Can assistive technologies programmatically detect input purpose?
- Are forms tested with screen readers and autofill?