This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

Accessibility

How does a website display form errors correctly?

A website displays form errors correctly by naming the affected field and describing the error in words: "Please enter your email address." A red outline alone isn't enough — blind visitors can't see it, colour-blind visitors overlook it. WCAG criterion 3.3.1 requires that detected input errors be automatically identified and communicated to the visitor in text form.

A red outline alone leaves visitors guessing

Imagine your contact form comes back with the message "Please check your entries" — and nothing more. A sighted visitor now looks for red outlines. A blind visitor doesn't even get that chance: their screen reader reads out text, not colours. They go through field after field again, guessing where the problem lies. Many give up at this point — and you lose an inquiry or an order. A good error message states three things: which field is affected, what's wrong with it, and, ideally, what a correct entry looks like. On top of that, the message must be technically linked to the field, so screen readers announce it right at the field itself.

How the audit service measures error detection

The audit service tests your form in a real browser with a controlled trial: it finds a form with required fields and deliberately submits it empty. It then observes the reaction. If the required fields are marked as erroneous and the error description is technically linked to the fields, the criterion counts as passed — the report notes how many fields were correctly named. The measurement deliberately skips plain search bars and forms with no required fields, so as not to trigger anything unwanted on your website; the report openly marks such cases as a manual check point. At the Gold Standard level, a human additionally checks whether the error texts are worded clearly.

Examples

Error without location and text

Not met

<p class="rot">Bitte Eingaben prüfen.</p>
<input name="iban">

Passes

<label for="iban">IBAN</label>
<input id="iban" name="iban" aria-invalid="true" aria-describedby="iban-fehler">
<p id="iban-fehler">IBAN: 20 Zeichen erwartet, 18 eingegeben.</p>

The message names the field and the error and is connected to the field so that the read-out program announces it to the field.

Deliberately submit your contact form empty once and read the error message as a stranger would.
Word every error message using the pattern: field name, problem, solution — "Email address: please enter an address with an @ sign."
Ask your agency to technically link error messages to their respective field, so screen readers announce them.
Never rely on colour alone — every red outline needs an explanatory text alongside it.

Deutsche Fassung dieser Seite

FAQ

What is an accessible error message in a form?

An accessible error message names the affected field and the problem in text form, such as "Phone number: please enter digits only". It's technically linked to the field, so screen readers announce it right at the field. Colour may additionally mark it, but never carries the information on its own — a red outline with no text stays invisible to blind visitors.

Is a red outline around the erroneous field enough?

A red outline alone fails criterion 3.3.1. Blind visitors don't perceive colour at all, and many colour-blind people barely distinguish red from green or grey. The outline may stay as an additional signal, but the actual information — which field, what error — must appear as text and be technically attached to the field.

How does the audit service test form errors automatically?

The measurement engine deliberately submits a form with required fields empty in a real browser and checks whether the fields are marked as erroneous and linked to an error description. Search bars and forms with no required fields are deliberately left untouched and marked as a manual check point — the measurement doesn't trigger anything unwanted on your website.