ARIA: timer role
This page is not complete.
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.
<div role="timer" id="eggtimer">0</div>
This defines this
div element as a timer with no remaining time.
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.
- Used to provide the name of the timer.
- Elements with the role
timerhave an implicit
- Used to indicate the idref of an element that contains additional instructions for navigating or operating this element.
- Used to give the timer a more descriptive role text for screen readers to speak. This should be localized.
Keyboard interaction is XXX. Focus is being managed via XXX.
The tab , Space and Enter keys, as well as Escape , must be handled by the application. The one exception is if focus XXX.
- Used to handle keyboard input and control the focus
- Click, Touch
- Handle as appropriate for your widget as well
- Changing attribute values
aria-activedescendantis used to manage the focus inside the application container. Set in response to keyboard or other application events that change focus or point of interaction.
timer role does not have a related HTML widget and XXX. The author of the timer must take full responsibility for not letting users get stuck in a focus limbo or trap focus inside something the user cannot exit of. All aspects of interaction, including returning to the regular web content on other parts of the page, must be handled. Use wisely, and cautiously!
Some prominent web timers include clocks, stop watches and countdowns, such as ticketing websites, e-commerce sites, and event countdowns (see https://countingdownto.com/).
As an illustration of
aria-atomic, consider a site with a simple clock, showing hours and minutes. The clock is updated each minute, with the new remaining time overwriting the current content.
<div id="clock" role="timer" aria-live="off">20</div> <button onclick="startTimer('clock')">start</button>
The first time the function executes, the entirety of the string that is added will be announced. On subsequent calls, only the parts of the content that changed compared to the previous content will be announced. For instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users.
One way around this would be to first clear the contents of the live region, and then inject the new content. However, this can sometimes be unreliable, as it's dependent on the exact timing of these two updates.
aria-atomic="true" ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "Time: 17:34").
<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
Improperly using the
timer role can unintentionally XXX
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'timer' in that specification.
timer role will cause this and all of the descendant elements of this element to be treated like XXX