Link with counter demo
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
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.