timer element - version 2This test uses aria-live="polite" instead of role="timer", so the timer's value can be announced.
Caution: a naive version of this technique updates the live region every second, causing the screen reader to announce every single number change, effectively reading the countdown aloud non-stop. This is highly disruptive and should be avoided in production.
This example demonstrates a more usable approach instead: the visible number still updates every second for sighted users, but the aria-live region is only updated at meaningful milestones, every 5 seconds, and once more when the timer finishes. Screen reader users hear periodic progress updates rather than a constant, unbroken stream of numbers.
<button id="startButton">Start timer</button>
<!-- Visible countdown, updates every second, hidden from AT -->
<div id="eggtimer" aria-hidden="true">20</div>
<!-- Announced only at 5-second milestones and on completion -->
<div id="eggtimer-announcer" aria-live="polite" class="hidden"></div>
<button id="resetButton">Reset timer</button>