A quick demo of a link containing a count down timer that would update until a promotion period has ended (after 7 days).

The demo doesn’t make you wait 24 hours though, and instead uses setInterval() to run the countDown function every 8000ms (milliseconds).

See the Pen simulated countdown timer by Scott (@scottohara) on CodePen.

The contents of the link are not used to compute the accessible name, but rather an aria-label is added to the wrapping <a> element. This is to compensate for NVDA’s virtual cursor (2019 with Chrome and Firefox) reading the SVG and spans within the <a> as separate “links” when using the Up or Down arrows to navigate.

This was partially fixed with NVDA + Firefox by giving the span elements a role="presentation" (which are still unnecessarily in the markup). However the undesired behavior could not be corrected with NVDA + Chrome, so aria-label was used instead.

A visually hidden element with role="status" is populated with a message when the counter has changed. The contents of the live region are then removed after a short 300ms delay. The delay is specifically to give VoiceOver enough time to register and start announcing the content that was added. If the delay was shorter than 200ms, VoiceOver may not notice the change and thus would not announce the content injected into the live region. The announced content is removed so that it doesn’t linger in the DOM to be found by a screen reader.