---
title: "Explain form errors next to the field · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/form-errors
updated: 2026-10-20
licence: "All rights reserved"
---

# Explain form errors next to the field

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Show form errors as text next to the field, tie them to it with `aria-describedby`, and say how to fix them. These are WCAG criteria 3.3.1 (A) and 3.3.3 (AA).
- How: Check the form on submit and put each message in text next to its field. Link it with `aria-describedby` and set `aria-invalid="true"`. Move focus to the first invalid field or to an error summary at the top.
- Check: A browser test submits each form empty. Every invalid field has `aria-invalid="true"` and an `aria-describedby` pointing at visible, non-empty text. Focus is on the first error or the summary.

Example:

```html
<label for="email">Email</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address, like name@example.com.</p>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/form-errors`.

- Previous: [Name every link and button](https://agentwranglers.se/playbook/website/accessibility/empty-links-buttons)
- Next: [Let people check before they commit](https://agentwranglers.se/playbook/website/accessibility/error-prevention)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)