Form
A form is a set of fields and buttons that allow a user to transmit data on a website. To be accessible, each field must have a label linked in the code, related controls must be grouped in a fieldset, and errors must be reported as text. WCAG dedicates 13 criteria to it, its most comprehensive topic.
Login, registration, payment, search. Every time a website asks for information, a form comes into play. It is also where accessibility most often breaks down: the WebAIM Million 2025 identifies more than 1.7 million fields without proper labels on one million analyzed pages.
#Three pillars of an accessible form
The W3C WAI Forms tutorial summarizes requirements along three axes.
Label each field. Every <input>, <select> or <textarea> needs a <label> linked by for and id. The placeholder does not count: it disappears as soon as input begins and is not reliably announced by all screen readers.
Group related controls. A set of radio buttons or checkboxes sharing the same question is placed in a <fieldset> with a <legend>. Without this grouping, a screen reader announces each option without context.
<fieldset>
<legend>Delivery method</legend>
<label><input type="radio" name="livraison" value="standard"> Standard</label>
<label><input type="radio" name="livraison" value="express"> Express</label>
</fieldset>Describe errors as text. When input fails, each field in error must receive a visible message, linked via aria-describedby. The WCAG 3.3.1 criterion requires it at level A. A red border alone is invisible to screen readers and indistinct to colorblind users.
#What WCAG verifies
Topic 11 of the RGAA covers forms in 13 criteria. The most frequently failed:
- 11.1: each field has a linked label
- 11.5: fields of the same nature are grouped (
<fieldset>) - 11.10: required fields and expected format are indicated before input
- 11.11: errors are identified and correction suggestions are offered
13 criteria for a single topic. No other RGAA category has as many.
#The trap nobody mentions
Screen readers enter "form mode" inside a <form>. In this mode, they only read form elements: <input>, <select>, <textarea>, <legend> and <label>. A help paragraph placed between two fields without being linked by aria-describedby? Invisible.
A search form with a single field seems too simple to cause problems. Yet the requirements are the same: a label (visible or via aria-label), an explicit submit button. The W3C H32 technique reminds us that a form without a button removes from the user the control of when the action is triggered.
<label for="recherche">Search</label>
<input id="recherche" type="search">
<button type="submit">Search</button>Three lines. Zero excuses.
#In summary
Label each field with <label>. Group related controls in <fieldset>. Describe errors as text, not color. Link your instructions to fields with aria-describedby, otherwise screen readers will ignore them.