Posted on Monday, 7 March 2022 by Patrick H. Lauke in Design and development

Tags: Assistive Technology, Foundations, WCAG

Session timeouts are designed to protect privacy and security, but if they’re implemented incorrectly, they can prevent people from completing tasks on a website.

Typical problems include:

• The session times out too quickly. People with cognitive and learning disabilities, keyboard users, and those who use assistive technologies like screen readers, may need more time to read through a page or to perform specific tasks
• The site has a timeout notification, and an option to extend the session. But the notification is not explicitly announced by assistive technologies - people who use a screen reader may not even be aware of it
• There is an option to extend the timeout, but there is not enough time for a person using a keyboard to activate the option before the timeout ends

Implementing session timeouts

Avoid using any form of time limit. However, there may be situations where a time limit or session timeout is unavoidable.

Right from the outset, make sure that the default session duration is generous enough that it doesn’t put anyone under pressure. This will depend on the amount of content provided on each page, and the time that is required on average to complete any activities on those pages.

It’s a good idea to provide a visible indication on the page about any session timeouts. As an example, a site could provide a discreet timer as part of its overall navigation or interface.

Make sure that changes to the timer are conveyed to people using assistive technologies. Generally, this is done by making the timer an ARIA live region.

<div aria-live="polite" aria-atomic="true">Time remaining: 5 Minutes</div>

If the site has a user profile or settings page, consider adding options for people to adjust the specific timeout limit, or to turn off session timeouts altogether.

If the session timeout is intended to automatically log out "inactive" visitors, consider automatically resetting/extending the timeout whenever a person moves their mouse or uses the keyboard while on a page, rather than just basing "activity" on new page loads.

When a session timeout is about to occur, show a dialog that allows people to extend the session.

When the dialog appears, move focus to it programmatically. This ensures that the timeout warning message is announced by assistive technologies. For people using screen magnification, this will also result in their zoomed-in viewport being moved to / centred on the dialog, so that they won’t miss it accidentally. See WAI-ARIA Authoring Practices 1.2 - Alert and Message Dialogs for implementation advice.

Provide a clear warning message that the session is about to end, and offer a way to extend the timeout. As the focus has already been moved to the dialog, the option should be easy to reach for keyboard users.

Make sure to provide enough time before the actual timeout to enable people to read, understand, and respond to the alert dialog.

• WCAG 2.1 Success Criterion 2.2.1 Timing Adjustable (Level A)
• WCAG 2.1 Success Criterion 4.1.3 Status Messages (Level AA)

More information

• Tink: Accessible timeout notifications
• W3C Perspectives: Notifications and feedback
• W3C WAI-ARIA Authoring Practices 1.2: Alert and Message Dialogs
• A web of anxiety: accessibility for people with anxiety and panic disorders [Part 1]
• A web of anxiety: accessibility for people with anxiety and panic disorders [Part 2]

Next steps

Read more accessibility foundations posts or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.