Accessible Forms

Also Known As

TL;DR

Explanation

Label via for/id or wrapping — never placeholder-only. Errors: aria-describedby links error to input; aria-invalid=true on invalid inputs. Required: required attribute or aria-required. Autocomplete attribute helps password managers. Announce errors with role=alert or aria-live=polite.

Watch Out

Common Misconception

Why It Matters

Common Mistakes

• Placeholder as label
• Errors not linked to inputs
• Required indicator without explanation
• Validating on every keystroke

Avoid When

• Do not use placeholder text as a substitute for a visible label — placeholders disappear on input and fail contrast requirements.
• Avoid grouping unrelated fields inside a single fieldset — it creates confusing context for screen reader users.

When To Use

• Apply accessible form patterns to every form — not just those explicitly flagged for accessibility review.
• Use aria-describedby to link error messages to their input so screen readers announce the error when focus moves to the field.
• Use aria-live regions for dynamic validation feedback that appears without a page reload.

Code Examples

<input type="email" placeholder="Email">
<span style="color:red">Invalid</span>

<label for="email">Email *</label>
<input id="email" type="email" aria-required="true" aria-invalid="true" aria-describedby="err">
<span id="err" role="alert">Enter a valid email</span>

References

• ↗ https://www.w3.org/WAI/tutorials/forms/

Tags

Related Terms