Template · reference
Error message component
GOV.UK / Government Digital Service · GOV.UK Design System Free Beginner
This is a ready-made, accessible pattern for error messages with real wording examples you can adapt (it even shows the phrasing to use for common cases). Because it is a component spec, it also covers the markup so your errors are announced to screen readers. Use it as a template rather than inventing error styling from scratch.
- Start the error with what the user must do to fix it
- Keep error wording consistent with the question or field
- Errors must be reachable by keyboard and screen readers