Day 8: Check error messages on the Gift Labelling Machine
The Gift Labelling Machine applies tags to presents as they move through Santa’s workshop. When something goes wrong, elves rely on clear error messages to understand what needs fixing.
Some elves have reported that error messages are easy to miss or unclear, especially when using assistive technologies like screen readers.
Your mission today
Check that error messages are easy to spot, clearly explained and linked to the fields they relate to.
Quick 5-minute check
- errors should appear next to the field that needs fixing
- error messages must explain what went wrong and how to fix it
- errors must be programmatically linked to the input
- screen readers should announce errors when focus moves to the field
- automated tools such as the Web Accesibility Viewer for Elves (WAVE) can sometimes help highlight problems with errors, but manual testing or code inspection is essential for this check
Test the Gift Labelling Machine
The form below contains one deliberate accessibility issue related to error messaging.
Show answer and explanation
Which field has the issue
The “Festive label text” field displays an error message, but that message is not associated with the input.
What users experience
Screen reader users are not told that this field has an error when they move focus to it.
The error text is visible on screen, but it is not announced or connected to the field in any meaningful way.
What works correctly
The Gift ID field uses a clear error message that is visually and programmatically associated with the input.
When focus moves to that field, screen readers announce both the error and the label together.
What this checks for
1.3.1 info and relationships (opens in a new tab) – error messages must be programmatically linked to the fields they describe.
Why this matters
If users cannot find or understand an error message, they cannot correct it. This can completely block people from completing a task.
Error messages must be programmatically linked to the input they relate to, so assistive technologies can announce them at the right time. Without this connection, users may not know what went wrong or how to fix it.
Bonus challenge
Try completing the form using only a screen reader. Which error message is hardest to find or understand?