ARIA: timer role
The timer role indicates to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point. Assistive technologies will not announce updates to a timer as it has an implicit aria-live value of off.
html
<div role="timer" id="eggtimer">0</div>
This defines this div element as a timer with no remaining time.
Description
The timer role indicates to assistive technologies that this part of the web content is a live region containing a timer listing the time remaining or elapsed time. A timer's inner text should be an updating current time measurement. While the value does not necessarily need to be machine parsable, it should continuously update at regular intervals unless the timer is paused or reaches its end-point.
Along with alert, log, marquee, and status the timer role is a live region and can be modified by live region attributes.
Associated WAI-ARIA roles, states, and properties
aria-labeloraria-labelledby-
Some screen readers announce the name of a timer element before announcing its contents. If a name is visible, reference it using
aria-labelledby. Including anaria-labelprovides a method for prefacing the visible content of a timer element with text that is not displayed when a screen reader reads the content. Naming a timer is not required so if nothing is appropriate both these attributes can be omitted. aria-live-
Elements with the role
timerhave an implicit aria-live value ofoff.
Accessibility concerns
If a time limit needs to be in place, for example, for security reasons, the user should have the option to turn it off or extend it. This restriction does not apply if the time limit is due to a live event, such as an auction or a game, or if the time to complete the form is essential for a valid submission.
Specifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # timer |