Library
Forms18 items

Form Accessibility Checklist

For: Designers, frontend developers, conversion optimizers

Forms are where accessibility and conversion overlap most. The same patterns that screen readers need (clear labels, persistent error text, autofill hints) also drive higher form-completion rates for sighted users. This checklist covers both — pass WCAG and convert better.

References: WCAG 2.2 SC 1.3.1, 1.3.5, 2.4.6, 3.3.1, 3.3.2, 3.3.3, 3.3.7, 4.1.2

Want to audit color contrast against this checklist on real screens — instantly, from your phone?

Use AccessAudit AI — runs offline, captures photo evidence per item, exports a sharable PDF.

Get AccessAudit AI

Labels

  • Every input has a visible, persistent label (not placeholder-only)

    WCAG 3.3.2

  • Label associated with input via for/id (not adjacent visual proximity)

    WCAG 1.3.1

  • Required fields marked with both visual indicator AND text ("required")

    WCAG 3.3.2

  • Optional fields explicitly marked when most fields are required (or vice versa)

Input Behavior

  • Autocomplete attribute set per WCAG 1.3.5 (email, tel, name, etc.)

    WCAG 1.3.5

  • Input type matches data (type="email", inputmode="numeric")

  • Spellcheck disabled on usernames, codes, IDs

  • Password fields have show/hide toggle, accessible label

Error Handling

  • Errors appear near the field that caused them (not only at form top)

    WCAG 3.3.1

  • Error text describes WHY + HOW to fix ("Email must contain @")

    WCAG 3.3.3

  • Errors announced to screen reader via aria-live or role="alert"

    WCAG 4.1.3

  • Error icon + color + text — not color alone

    WCAG 1.4.1

  • Submit button stays enabled (don't disable based on perceived validity — let user try)

Focus & Navigation

  • Tab order follows visual order through every field

  • Focus indicator visible on every interactive element

  • Skip-link to first form field if form is below masthead nav

  • After submit error, focus moves to first invalid field (or to error summary)

  • Time-sensitive forms (sessions) warn before timeout, allow extension

    WCAG 2.2.1

Run this on your phone

Point your iPhone camera at any color pair to see WCAG contrast ratio + pass/fail in real time. 100% on-device.