A contact or checkout form is often the single most critical conversion point on any commercial website. Yet thousands of forms remain practically unusable for visitors relying on screen readers, keyboard-only navigation, or voice dictation software.
Every Input Demands an Explicit Label
Placeholder text inside an input field is not an accessible replacement for a `<label>` element. Placeholders typically have poor color contrast, disappear the moment a user begins typing, and are inconsistently announced by assistive screen readers.
Every form control must have an associated `<label>` using the `for` attribute matching the input's `id`: `<label for="user-email">Email address</label><input type="email" id="user-email" name="email">`. This ensures screen readers announce the field's intent and enlarges the clickable target area.
Logical Keyboard Focus and Descriptive Errors
Power users and visitors with motor disabilities navigate forms exclusively using the `Tab` key. Never remove the CSS focus ring with `outline: none` unless you replace it with an unmistakable, high-contrast custom focus style (`:focus-visible`). When errors occur, pair color cues with clear text and link them using `aria-describedby` so assistive software explains exactly how to correct the input.
Accessibility test checklist
- Navigate the page with a keyboard and ensure focus is always visible.
- Give each form field a persistent label and associate errors with the field.
- Add useful alternative text to informative images; use empty alt text for decorative ones.
- Check text and control contrast, zoom, headings, link purpose, and responsive reflow.
- Test important tasks with assistive technology where possible.
Fix barriers by impact
Prioritise issues that stop people completing essential tasks. Retest after changes and make accessibility checks part of normal releases.