PRACTICE 2 OF 6 · Dynamic updates
Loading state
Start an async action and listen for progress and completion without losing focus.
Check whether loading and completion states are communicated without relying on animation alone.
PREPARE
Set up your test
- Turn on a screen reader you know how to operate.
- Navigate by controls or use Tab where the task asks you to.
- Listen for purpose and state, not one exact sequence of spoken words.
WORKING EXAMPLE
Establish the expected behavior
Activate the button and keep focus on it. Listen for loading and completion messages.
Expected behavior: progress and completion are communicated without forcing focus away from the control.
INTENTIONAL DEFECT
Find the barrier
The example below deliberately contains one accessibility defect. Skip the defective example.
Activate the button and determine whether the loading state is available without sight.
Loading
Hint
The visible spinner is hidden from assistive technology and there is no live status.
End of intentional defect.
DIAGNOSE
Choose the primary cause
EXPLANATION
Understand and repair it
Reveal explanation
What happened
The defective example relies on a visual spinner. Users who do not perceive the animation may not know that work started or completed.
Repair
Use text and status semantics for important progress or completion messages. Keep focus stable unless the task genuinely changes context.
<button type="button">Generate report</button>
<p role="status"></p>Retest
- Activate the action and confirm loading is communicated.
- Confirm completion is announced.
- Confirm the button state prevents accidental repeat activation when needed.
Report it
Example: The report generation flow shows a spinner but does not announce loading or completion, so screen reader users may not know whether the action succeeded.
Standards and support
This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.
Editorially reviewed 20 July 2026.