Role and semantics
Section titled “Role and semantics”The clock has role="timer" and is named with label; the role is not live, so seconds are not read. Milestones are in a separate polite status region. The ring has aria-hidden.
Keyboard
Section titled “Keyboard”CountdownTimer takes no focus.
Focus does not move when time is up; the app can move it to the next action if needed.
Screen reader output
Section titled “Screen reader output”| Moment | Output |
|---|---|
| 1 minute left | “1 min left” |
| 10 seconds left | “10 s left” |
| Zero | “Time is up” |
Moments already past at mount are not read.
Contrast
Section titled “Contrast”All state colours meet 4.5:1 for text; the ring track is decoration.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How CountdownTimer meets it | What product teams must do |
|---|---|---|
| 2.2.1 Timing adjustable | The time is shown and announced. | Offer a way to extend or restart it. |
| 4.1.3 Status messages | Milestones are read without moving focus. | — |
| 2.3.3 Animation from interactions | The ring steps under reduced motion. | — |