Designing Accessible Web Forms: A Practical Guide

Why Form Accessibility Matters

Forms are where users actually do things on your website—buy products, sign up for services, or contact support. If your forms aren't accessible, you are actively preventing users from converting.

Stop Using Placeholders as Labels

The most common and damaging trend in form design is using the HTML placeholder attribute as the only label for an input field. Why is this bad?

1. Once the user starts typing, the label disappears. Users with cognitive issues might forget what field they are filling out.
2. Placeholders often have low contrast (usually a light gray), failing WCAG contrast requirements.
3. Screen readers sometimes skip placeholders entirely.

The Fix: Always use a visible <label> element permanently positioned above or beside the input, connected via the for attribute to the input's id.

Visible Focus States

Many CSS resets and frameworks include outline: none; by default. This is a severe accessibility violation for users navigating via keyboard. A user relying on the Tab key must be able to visually see which input currently has focus.

If you don't like the browser default blue ring, style it yourself using the :focus-visible pseudo-class:

input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Clear Error States

When a user makes a mistake, don't just turn the border red. Instead:

• Turn the border red to signal the error visually.
• Add an icon (like an 'X' or a warning triangle).
• Provide explicit text explaining why the error occurred beneath the input.
• Link the error text to the input using aria-describedby so screen readers announce it.

Validating Contrast

Input borders must have a contrast ratio of at least 3:1 against their background to be clearly identifiable as interactive elements. Use tools like the LiveTheme WCAG Contrast Checker to ensure your input border colors meet the required specifications for non-text UI components.