How can a countdown timer for an online test conform to WCAG 2.1

Hi,

I am auditing a site for online assessments. Each assessment has a countdown timer for the remaining time. The countdown timer consists of three parts in source code order: (1) an animated SVG that fills a circle with a different colour as time is used up, (2) a textual countdown for remaining minutes and seconds that is updated every second, and (3) the label "Remaining time".

The two main issues I currently see are the following:

(1) Marking this with aria-live=polite would probably still be too disruptive for screenreader users who are thinking how to solve a specific question, even if the update frequency were reduced from every second to every minute.
(2) The animation is an issue for people with certain attention disorders (SC 2.2.2).
(3) You would probably want the label to be read out before the remaining time, but that should be easy to fix (e.g. using aria-labelledby).


For the first issue, one might offer a keyboard shortcut that allows screenreader users to get to the remaining time indicator; this would also require a keyboard shortcut that takes you back to what you were working on. (This assumes that the countdown timer has aria-live=off, but this is already implicit in role=timer.)

For the first issue, I can imagine an option on the initial screen that allows you to choose a lower update frequency and to turn of the SVG animation. (The site I am auditing already has an initial screen where test takes need to choose between a male or female role, so no additional page would need to be created for this.)

I wonder if people on this list have any thoughts on these suggestions or perhaps better ideas.

Best regards,

Christophe Strobbe