Countdowns and timers – forgotten detail that can make your users really hate your product

(Loaded 1864 times)

Please make sure you consider all users when developing countdowns, timers and similar dynamic information or risk making some experiences horrible.

I tested a financial website and mobile app and wanted to check how it works with different assistive technologies. Screen-reader testing is mandatory and practically always reveals issues that can not be detected visually or with automatic tools alone.

Sometimes countdowns and timeout warnings are legally required, and not just a dark pattern used to trick us into buying more. Financial sector has a lot of legal requirements and with the Payment Services Directive 2 (PSD2) they also got a requirement for automatic logout after five minutes of inactivity (and in case of credit cards we also have other rules like Payment Card Industry Data Security Standard (PCI-DSS) that demands 15 minutes). See article 4, paragraph 3, item d of the PSD2 regulation 2018/389 (opens in new window) and you will find the following:

The maximum time without activity by the payer after being authenticated for accessing its payment account online shall not exceed 5 minutes.

Now, this limitation can’t be turned off, which is fair – you know – to protect us. But if we can’t extend or adjust it, then the page or app is failing WCAG Success Criterion 2.2.1 – Timing Adjustable (opens in new window).

Back to my experience with a screen reader that made me horrified and that can be found on most financial digital products – the countdown to automatically logging me out due to inactivity. Visually, it looked great. Supported different browser and operating system settings, semantically correct and everything. But when I used a screen reader, the experience was horrible. As every second it notified about the remaining time.

I couldn’t actually navigate very efficiently due to the “spamming” of my screen reader. Constant status messages made my navigation practically impossible. Now, when I test with a screen reader I usually start with my screen off, to minimize bias. But here it was almost impossible. And I needed to inform them about this and provide guidelines that would made this a better experience.

Please consider and test with a screen reader

It’s so easy to just wrap the countdown in an role alert div or similar and check the check-mark for status messages. And we can also see that conformance to WCAG is not enough with this example – we support status messages but WCAG does not define that we must not use them to spam screen readers with too much statuses.

My recommendation is to be gentle, start slowly and absolutely don’t trigger a status message for each second. I guess we can start with the first message, then wait for at least a minute or two, and then when it is just a minute from session expiration send another status message. And that’s it. It does not help users if we send them a warning every second, at all. And some may even hate our solution because of this experience.

Perhaps, in the future, we will have something like AriaNotify (opens in new window) that will help us with such scenarios as well, throttling our status messages in a more automatic and centralized way, but for now we need to design and develop this by ourselves. And users are different, so perhaps this is also another thing that should be a part of user profile settings, but anyways makes sure to design, develop and test it soon enough.

Author: Bogdan Cerovac

I am IAAP certified Web Accessibility Specialist (from 2020) and was Google certified Mobile Web Specialist.

Work as digital agency co-owner web developer and accessibility lead.

Sole entrepreneur behind IDEA-lab Cerovac (Inclusion, Diversity, Equity and Accessibility lab) after work. Check out my Accessibility Services if you want me to help your with digital accessibility.

Also head of the expert council at Institute for Digital Accessibility A11Y.si (in Slovenian).

Living and working in Norway (🇳🇴), originally from Slovenia (🇸🇮), loves exploring the globe (🌐).

Nurturing the web from 1999, this blog from 2019.

More about me and how to contact me: