Timeout Best Practice

Timeout

Last Updated: 12/15/2011

A timeout is employed in order to track how long a user has been inactive on a document or web page. For example, ending a user's session after 5 minutes of inactivity to prevent information theft.

Challenges disabled users face with timeouts are:

Timeout warning isn't clearly identifiable on the screen
Timeout session isn't long enough for them to complete an activity

Example

Download

New Window

Launch example in a separate window

Build It
Basic Test
Advanced Test

User is advised as to how long the session state is
Indicate in text how long the application's session state is:

default.htm (excerpt)
```
<h4 …>For the purpose of this demo, the application will remain active for 15 seconds...</h4>
```

User is prompted when the session is about to expire

Provide a timeout container to allow the user to extend the session and, if possible, use JavaScript to move focus to that container:

default.htm (excerpt)

<div id="timeoutContainer">
    <h4>
        <a aria-atomic="true" aria-live="rude" href="#content">Select this link or your session will time out in 30 seconds due to inactivity:  <span id="timeoutCounter"></span></a>
    </h4>
</div>

timeout.js (excerpt)

/* Idle Function */
onIdle: function () {
    …
    $(this).slideDown("fast");
    $(this).find("a").focus();
}

Let's break this code down:

Create a timeout container:

<div id="timeoutContainer">
…
</div><!-- end #timeoutContainer -->

Add a <h4> tag to house the continue session hyperlink. Apply ARIA's atomic and live attributes to the hyperlink so that it will be read by a screen reader:

<h4>
    <a aria-atomic="true" aria-live="rude" href="#content">Select this link or your session will time out in 30 seconds due to inactivity:  <span id="timeoutCounter"></span></a>
</h4>

When the session reaches the idle point slide down the timeout container and move focus to the hyperlink:

/* Idle Function */
onIdle: function () {
    …
    $(this).slideDown("fast");
    $(this).find("a").focus();
}

Focus is returned to where the user was at

If possible, use JavaScript to capture where the user was at when the timeout prompt appeared and return them there if the session is extended:

timeout.js (excerpt)

$.idleTimeout('#idleTimeoutContainer', '#idleTimeoutContainer a', {
…
/* Idle Function */
onIdle: function () {
    /* Account for IE's inability to see :focus pseudo-class */
    if ($.browser.msie === true) {
        $("a, input, button").bind("blur", function () { $(this).attr("class", "focus"); });
    }
    else {
        $("a:focus, input:focus, button:focus").attr("class", "focus");
    }
 …
},
    …
/* If session is extended execute these functions */
onResume: function () {
    …
    $("a.focus, input.focus, button.focus").focus();
    $("a.focus, input.focus, button.focus").removeAttr("class");
}

});

Let's break this code down:

Add a class of focus to the object that last had focus:

/* Idle Function */
onIdle: function () {
    /* Account for IE's inability to see :focus pseudo-class */
    if ($.browser.msie === true) {
        $("a, input, button").bind("blur", function () { $(this).attr("class", "active"); });
    }
    else {
        $("a:focus, input:focus, button:focus").attr("class", "active");
    }
    …
}

NOTE: focus can only be captured on links, buttons and input controls.

When the session is extended, return focus to the object and remove the class:

/* If session is extended execute these functions */
onResume: function () {
    …
    $("a.focus, input.focus, button.focus").focus();
    $("a.focus, input.focus, button.focus").removeAttr("class");
}

User is notified when session has timed out

User should be alerted when the session has finally expired and provided with instructions for how to return to the application:

timeout.js (excerpt)

/* Timeout Function */
onTimeout: function () {
    …
    alert("Your session has expired!");
    $("div#example").append("<p>The application has timed out...</p><ul><li><a href=\"default.htm\">Reload Example</a></li></ul>");
},

SSA Accessibility Best Practices Library

Timeout

Example

Download

New Window

Visual Inspection

Visual Inspection

Keyboard

Visual Inspection

JAWS

Dragon

JAWS

MAGic

JAWS

MAGic

JAWS

MAGic

Timeout

Example Download New Window

Example

Download

New Window