Accessible error messages
When the form is submitted, check the email field and report problems accessibly:
1. Connect the field to its message element with aria-describedby="email-error" (in the HTML).
2. On submit (keep preventDefault()): if the field is empty or not a valid email, put a helpful text message in #email-error, set aria-invalid="true" on the field and move focus to it.
3. If the email is valid, clear the message and set aria-invalid="false" (or remove it).
Don't mark the field invalid before the first submit. The form has novalidate, so the browser's own bubbles stay out of the way; you can still use email.validity.
What Check tests
- The field is linked to
#email-errorwitharia-describedby - Before any submit, the field is not marked invalid
- Submitting empty shows a message and sets
aria-invalid="true" - After a failed submit, focus is on the email field
- A badly formed email (
asha@) is also reported - A valid email clears the message and the invalid state
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.