Home › Knowledge base › WCAG criterion

Form labelling per WCAG

Every form field must have a programmatically associated label, so that screen-reader users know what to fill in, and a click on the label focuses the field.

The right way

<label for="email">Email</label><input id="email"> — or wrap the field in the <label>. aria-label / aria-labelledby only when a visible label is not possible.

Why a placeholder is not enough

The placeholder disappears on input, often has too low a contrast and is not recognised as a label by some screen readers.

Error messages

Link the error to the field (aria-describedby) and word the text concretely (“Enter a valid email”, not “Error”).

How a11yglass helps

The free scan checks the delivered HTML and CSS for automatically recognisable WCAG breaches, and names per finding the success criterion and a concrete step. It finds roughly 20–35% of issues and does not replace a full assessment.

Read on

• Alt text per WCAG 1.1.1
• Keyboard operation per WCAG 2.1.1
• Visible focus per WCAG 2.4.7

General information to the best of our knowledge, not legal advice. For an individual case, contact a law firm specialising in IT law.