If there is one component that most web portals often overlook, it would be the timeout feature in web applications. As disabled users, we require ample time to discover, navigate, and explore before taking action. Unfortunately, designers, developers, and product managers often fail to consider this aspect and build something primarily for able-bodied users, assuming it will work universally for all users who access the web differently. This question from a community member addresses a few nuances of timeout modals.

Hello everyone, this is Megha. I have a question related to timeout messages. Below is the list of questions I have regarding this topic:
How important is it to include a counter in a modal dialogue for a timeout message?
Regarding the frequency of announcements by the screen reader, should the visual changes be announced every five seconds or ten seconds?
In terms of design choices for timeout messages, should they include additional controls like a closed button or cancel button?
These are the questions related to timeout messages and their design choices that I have. Thank you.

Before we answer Megha’s question, we need to understand Success Criterion 2.2.1 Timing Adjustable. The normative part of this success criterion covers various methods to achieve it, one of which is the “Extend” method. In this method, the user is warned before the time limit expires and given at least 20 seconds to extend the time limit with a simple action, such as pressing the space bar. The user should be allowed to extend the time.

Most internet portals allow users to extend the time limit using a modal dialog. This dialog typically includes a visual countdown timer, and the user is provided with an option to extend the time limit or not, based on various reasons.

Now, let’s address the question:

From a design perspective, it is a good practice to include a timer counter. This visually informs users about the remaining time before the session times out or becomes invalid. Adding the timer reduces cognitive burden, especially when the session cannot be extended due to factors like security or session invalidation.
For screen reader users, it is best to use the live region sparingly. Notify the time changes every 10 seconds, and in the last 5-10 seconds, use the live region to provide a countdown. To achieve this, use attributes like "aria-live" or "role=status” for the 10-second interval, and “aria-live=assertive" with other related ARIA attributes for the last few seconds.
There is no need for a cancel/close button in the design. The user needs to take action to extend the time limit or acknowledge the alert dialog by activating a control. Providing a close/cancel button may lead to users dismissing the dialog without extending the time limit. As a screen reader user myself, I often find it difficult to locate the right element in a dialog to extend the time. Instead, have a single element like an “Ok” button and ensure it follows all the best practices of a modal dialog to convey the information to assistive technology users.