Skip to content
EUID Audit service & seal, Home
Get your website audited

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

Accessibility

How does a form prevent errors before submitting?

Level AA (3.3.4) requires error prevention on forms with legal or financial consequences: review, confirm or undo submissions. Level AAA Criterion 3.3.6 extends this to any form that submits data: contact request, login, comment, appointment booking. An error in sending is a high price for people who fill out a form with difficulty.

What the Criterion Requires

For each page where visitors send data, at least one of three applies. Undo: The sending can be revoked, for example by an edit link in the confirmation mail or a deadline in which the request can be withdrawn. Checked: Entries are checked for errors and the visitor can correct them before they take effect. Confirmed: Before final submission, the page shows all input for control and requires confirmation. The check in the browser (such as mandatory fields, e-mail format) is a form of check if it takes effect before the data takes effect.

For whom this counts

Those who fill out with audible reading program do not see the form as a whole and can hardly detect number rotators and field confusions. Anyone who is motor-restricted, taps it. Anyone who has a learning difficulty only notices a mistake when someone shows it. For everyone, the overview before sending is the place where they find errors. Undoofable dispatches also take away the fear of doing something final wrong.

This is how we deal with it

The measurement finds forms and checks whether there is an input check in the browser (required, type, pattern) and whether fields carry error messages; a confirmation page or a revocation shows itself only when sending and is checked by a person. The criterion belongs to the category AAA in knowledge; At level AA, the service checks 3.3.4 for order and contract forms.

Examples

Contact form sends unchecked

Not met
<form action="/kontakt">
  <input name="email">
  <button>Senden</button>
</form>
Passes
<form action="/kontakt">
  <input name="email" type="email" required aria-describedby="email-hilfe">
  <button>Anfrage senden</button>
</form>
<!-- danach: Bestätigungsmail mit den Angaben und einem Link zum Ändern -->

At level AAA, every form applies: check, have confirmed or cancelable, not only for money and law.

  • Check input before submitting in the browser and on the server; show errors in the field with a statement on how to fix them.
  • For multi-level forms, show an overview of all information with edit links before the last button.
  • After submitting, send a confirmation with the information and a way to modify or withdraw it.
  • Label the send button with what happens: “Send request”, “Book date binding”.

Deutsche Fassung dieser Seite

  • Seal Digitale Barrierefreiheit
  • Seal Daten & Recht
  • Seal Technische Qualität
  • Seal Digital Excellence
  • Seal Cyberversicherung

Audited. For a better digital future.euid.com

How does a form prevent errors before submitting? · euid.com