Pattern: Inline Error
When a user submits invalid form data, there are two things you need to do — and accessibly.
- Mark the field as invalid
- Associate an error message with the field
How it looks
The accessible way to mark the invalid state of the input is to attribute it with aria-invalid="true". The "true" value is necessary: ARIA attributes do not work like HTML5 boolean attributes.
<input type="text" id="email" aria-invalid="true">
The visual representation of this state is manifested by the red cross icon. This can be achieved in CSS, using a background image, for example.
background: url(path/to/cross.svg) no-repeat center right;
The label is associated with the input by making the for and id attributes share a value. Similarly, aria-describedby should take the id of the error message element.
<input type="text" id="email" aria-invalid="true" aria-describedby="email-error">
<div id="email-error">Please make sure your email address is formatted correctly</div>
Now, when a screen reader user focuses the input, the label and invalid state will be announced, and the error message will be appended to that announcement.