Help users to Manage a session timeout
Use this pattern to let users extend their session when it is about to end and explain what has happened after a session has timed out.
This pattern helps services meet the Extend condition of WCAG 2.2 success criterion 2.2.1, ‘Timing Adjustable’. This says that to meet level AA a service must warn users before a session timeout occurs and allow them to extend the time limit.
See an example session timeout warning (opens in a new tab)
When to use this pattern
A service with sessions will normally end a session automatically after a certain amount of time if the user takes no action. If your service has an automatic timeout you should use this pattern to warn users and allow them to extend the session if they want to.
You should warn a user at least 2 minutes before the end of this time. This will give them time to decide if they want to keep using the service.
How it works
Show the user the timeout warning at least 2 minutes before the time runs out. This should be shown to the user in a modal dialog, also known as a pop-up.
The user can:
- select a button to stay in the service and not time out
- press the escape key to close the warning, stay in the service and not time out
- do nothing
If the user does nothing within the time limit, redirect them to a timeout page. This page explains what has happened and gives them options for how to continue.
This pattern uses the HMRC frontend timeout component. This has been implemented in a number of DWP services including:
An alternative modal dialog can be found on the GOV.UK Design System community backlog.
When the user is signed in to a service
If a user signs in to your service, tell them they will be signed out if the time runs out. You should tell the user if any information they have entered will be deleted or not. You should include a countdown of the remaining time.
See an example of a sign-out warning (opens in a new tab)
If the user does not continue the session they are redirected to a page that tells them the time has run out. You should tell the user if any information they have entered has been deleted or not.
You have been signed out
You have been signed out and any information you have not saved has been deleted because you did not do anything for 20 minutes. This is to protect your information.
<h1 id="dialog-title" class="govuk-heading-l">
You have been signed out
</h1>
<div class="govuk-body">
<p>You have been signed out and any information you have not saved has been deleted because you did not do anything for 20 minutes. This is to protect your information.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Sign back in</button><h1 id="dialog-title" class="govuk-heading-l">
You have been signed out
</h1>
<div class="govuk-body">
<p>You have been signed out and any information you have not saved has been deleted because you did not do anything for 20 minutes. This is to protect your information.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Sign back in</button>When the user is not signed in to a service
If a user is not signed in to your service, tell them their answers will be deleted if the time runs out. You should include a countdown of the remaining time.
The service team should work with the relevant security team to agree the length of inactivity before the user is timed out of a session. This should be at least 20 minutes and you should not limit the number of times the user can extend their session.
See an example warning that answers will be deleted (opens in a new tab)
If the user does not continue the session they are redirected to a page that tells them what has happened.
Your answers have been deleted
We have deleted your answers because you did not do anything for 20 minutes. This is to protect your information.
You will need to start again.
<h1 id="dialog-title-notsignedin" class="govuk-heading-l">
Your answers have been deleted
</h1>
<div class="govuk-body">
<p>We have deleted your answers because you did not do anything for 20 minutes. This is to protect your information.</p>
<p>You will need to start again.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Start again</button><h1 id="dialog-title-notsignedin" class="govuk-heading-l">
Your answers have been deleted
</h1>
<div class="govuk-body">
<p>We have deleted your answers because you did not do anything for 20 minutes. This is to protect your information.</p>
<p>You will need to start again.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Start again</button>If the user’s device is not running JavaScript
If the user’s device is not running JavaScript, display a banner which warns them about the timeout. The banner should include the content specified above for if a user is signed in or not signed into a service.
<div class="govuk-notification-banner govuk-notification-banner--blue" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<div class="govuk-body">
<p>We will delete your answers if you do not do anything for <strong>20 minutes</strong> and you will have to start again. This is to protect your information.</p>
</div>
</div>
</div>{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{% set html %}
<div class="govuk-body">
<p>We will delete your answers if you do not do anything for <strong>20 minutes</strong> and you will have to start again. This is to protect your information.</p>
</div>
{% endset %}
{{
govukNotificationBanner({
html: html,
classes: "govuk-notification-banner--blue"
})
}}Accessibility
The code for the modal dialog itself is compliant with WCAG 2.2 level AA, and implementing this pattern will help your service to meet the requirements of WCAG 2.2 success criterion 2.2.1, ‘Timing Adjustable’.
To meet WCAG 2.2 success criterion 2.2.6, ‘Timeouts’, which is required for level AAA compliance, you also need to warn users about timeouts at the start of a task or process. However services that have implemented this have found that users struggle to understand the warning: see ‘Research’, below.
We recommend reading the WCAG guidance ‘Understanding Guidelines 2.2: Enough Time’ for other ways to help make sure users have enough time to read and use your service’s content.
For more about building accessible services see the DWP Accessibility Manual.
Research
Some services have added information about session timeouts to the start page of a service, but this was not well understood: it was usually mistaken for a time limit to complete the whole service.
If you have evidence that users are often timing out mistakenly, it may be more effective instead to display the timeout modal for longer.
Contribute
If you use this pattern, please let us know so we can make it better for everyone. There is an open discussion for this pattern on GitHub where you can share your results or anything else you think might be useful.
Get in touch
If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk