PRACTICE LAB
Learn the output
Begin with a correctly accessible experience. Then try contained defects with hints and explanations.
LEARN MODE
A working task
Find the heading, select the option, enter a name, and submit the form. First try an empty name to hear the error.
DIAGNOSE MODE
Three simulated defects
Each example shows how broken output would behave while the controls on this training page remain accessible. Hints become progressively more specific.
1. Find the close button
Navigate to the control that visually shows a cross.
Simulated broken announcement: “button”.
Hint
Listen to the control's name.
Stronger hint
The visual symbol is hidden from assistive technology and no other name is provided.
Reveal explanation
The button has no accessible name. It should expose a stable name such as “Close”.
2. Find the form error
The field has visible error text, but check what happens when you reach the field.
Project code must contain six characters.
Simulated broken output: the field is announced as invalid but without the error message.
Hint
Check whether the error is heard with the field.
Reveal explanation
In the broken version, the error text is not programmatically associated with the field. This simulation uses aria-describedby so the training page remains accessible.
3. Listen for status
Activate the button and determine whether the change is announced without searching for it.
Hint
In the broken product, text changes visually after the button.
Reveal explanation
The broken status lacks a live region or another focused mechanism, so the change may remain silent. The simulation above uses role="status" so the training page remains accessible.