✎ Technique: Session extension

For a number of reasons including data persistence, performance and security, it is sometimes beneficial to terminate idle user sessions.

So that users do not lose data, it's important to warn them of a session that is about to expire and give them the option to continue. This is especially true in the case of people who might take longer to read or interact with a page due to a disability. It's important to make such prompts accessible.

Example

In the following example, we use the standard confirm function to display an accessible confirm dialog that extends the user's session if they choose "okay." If the user presses "cancel" or one minute elapses, the session ends and data they entered is discarded.

// start the countdown
var countdown = window.setTimeout(session.end(), 60000);

if (confirm("Your session will expire in one minute. Press OKAY for more time or CANCEL to end your session.")) {
  // clear the countdown
  window.clearTimeout(countdown);
} else {
  // terminate the session immediately
  session.end();
}

When the "if..." line in the JavaScript is reached, the confirm dialog appears, the user's keyboard focus is moved to the cancel button and this message is read: "Your session will expire in one minute. Press OKAY for more time or CANCEL to end your session."

If the user is present, their activity is interrupted and they are forced to make a choice: They can’t interact with the page while the dialog is open. If they do not respond, it is assumed that the session has been abandoned, so it is terminated.