Time limits

Overview – Time limits

Time limits are a potential barrier to people with disabilities such as blindness, low vision, dexterity impairments, and cognitive limitations. These users may require more time to read content or to perform a task such as completing an on-line form. WCAG requires that content with time limits offers one of the following features:

Turn off
The user is allowed to turn off the time limit before encountering it.
Adjust
The user is allowed to adjust the time limit before encountering it to a length at least ten times the default setting.
Extend
The user is warned before time expires and given at least 20 seconds to extend the time limit.

Any process that happens without user initiation after a set time or on a periodic basis is a time limit. This includes a partial or full update of content (such as a page refresh), changes to content, and the expiration of a window of opportunity for a user to react to a request for input. It also includes content that is updating too fast for the user to read or understand – any animated, moving or scrolling content.

Examples:

  • A form with a time limit offers a control that allows the user to turn it off or extend it up to ten times the default.
  • After a period of user inactivity, a client-side script asks if the user needs more time. If it doesn’t get a response within 20 seconds, it times out.
  • A site with a rotating banner offers a control that allows the user to extend the time between updates as much as ten times the default.
  • A site with a rotating banner offers a pause button.
  • A page with animated text that scrolls, appears and fades away offers the user a pause button.

With session timeouts, present warning messages in a popup dialog with options for the user to either extend or end the session. (The ARIA Dialog pattern and the WET session timeout are described in module 12.)

For timers with fixed deadlines, provide a countdown feature with ARIA live announcements at strategic intervals. See the example in the preceding section, Good example: Countdown announcing at intervals

When refreshing/reloading a page, ask the user’s permission. An automatic page refresh/reload can cause difficulties for people with motor impairments, people with low vision, people who are blind, and people with certain cognitive limitations. Screen reader users may not have sufficient time to find their place before the page refreshes again. Instead, notify users that newer content is available and provide the options to update or continue with the old content. If the content update is urgent, use a popup dialog and shift the user’s focus to it; otherwise, use an eye-catching ARIA live region with role="alert".

  Good example: Session timeout

In this example, after 15 seconds of inactivity JavaScript launches and shifts user focus to a pop-up dialog that uses the role="alertdialog" attribute. The user can choose to Continue Session or End Session. If the user clicks Continue Session, JavaScript resets the 15 second counter. If the user clicks End Session, JavaScript exits the page.

Open the session timeout example (opens in new tab).

View CSS 
#modalOverlay {
   width:100%;
   height:100%;
   top: 50%;
   left: 50%;
   position: absolute;
}
[role=alertdialog] {
   position: relative;
   width: 80%;
   margin-left: -40%;
   height: 400px;
   margin-top: -200px;
   padding: 5px;
   border: thin #000 solid;
   background-color:#fff;
}
View Javascript

To accommodate a focus bug in VoiceOver, the JavaScript hides the <main> element with aria-hidden="true" and CSS display: none, then a millisecond later cancels that out.

startTimeout();
function startTimeout(){
   setTimeout(function(){
      $('main').attr('aria-hidden','true').css('display','none');
      setTimeout(function(){
         $('main').attr('aria-hidden','true').css('display','inherit');
      }, 1);
      $('body').attr('style','background-color:gray;');
      $('a').attr('tabindex','-1');
      $('a').attr('style','cursor:default;');
      $('button').attr('disabled','true');
      var modalOverlay = $('<div>').attr({id:"modalOverlay"});
      $(modalOverlay).appendTo('body');
      var dialog = $('<div>').attr({role:"alertdialog", "aria-labelledby":"alertHeading", "aria-describedby":"alertText"});
      $(dialog).html('
         <h1 id="alertHeading">Session Timeout!</h1>
         <div id="alertText">
            <p>Due to inactivity, your session will expire in 2 minutes. If additional time is required, please click "Continue Session". To allow this session to end, click "End Session".</p>
         </div>
         <button id="continue">Continue Session</button>
         <button onclick="window.location.href = "https://accessible.canada.ca/"> End Session </button>').appendTo('#modalOverlay');
      $('#continue').focus();
      $('#continue').click(function(e) {
         $('main').attr('aria-hidden','false');
         $('body, a').removeAttr('style');
         $('a').removeAttr('tabindex');
         $('button').removeAttr('disabled');
         $(modalOverlay).remove();
         $(dialog).remove();
         startTimeout();
      });
   }, 15000);
}

Source: Paul J Adam Session timeout alertdialog

Bad example: Session timeout with no option to extend

Ending a session without proper warning risks frustration and loss of work. This example demonstrates a warning message to the user without the option of continuing to extend the session. Also, the countdown lacks an ARIA live region.

Screenshot of warning message that says "You will be auto logged out in 19 seconds" Screenshot of notification message that says "Your session has expired. Please login again."

HTML

<div>
   You will be auto logged out in <span id="timeOut">19</span> seconds.
</div>

CSS

#timeOut { background-color: rgb(247, 231, 14); }
View Javascript 
var IdlelTimeOut = 20; //10 seconds
var idleSecondsTimer = null;
var idleSecondsCounter = 0;
document.onclick = function () { idleSecondsCounter = 0; };
document.onmousemove = function () { idleSecondsCounter = 0; };
document.onkeypress = function () { idleSecondsCounter = 0; };
idleSecondsTimer = window.setInterval(CheckIdleTime, 2000);
function CheckIdleTime() {
   idleSecondsCounter++;
   var oPanel = document.getElementById("timeOut");
   if (oPanel) {
      oPanel.innerHTML = (IdleTimeOut - idleSecondsCounter);
   }
   if (idleSecondsCounter >= IdealTimeOut) {
      window.clearInterval(idleSecondsTimer);
      alert("Your Session has expired. Please login again.");
      window.location = "https://bati-itao.github.io/";
   }
}

Bad example: JavaScript automatically refreshes a page

HTML

<head>
   <script type="text/JavaScript">
      function AutoRefresh( t ) {
         setTimeout("location.reload(true);", t);
      }
   </script>
</head>
<body onload="JavaScript:AutoRefresh(5000);">
   <p>This page will refresh every 5 seconds.</p>
</body>

Related WCAG resources

Related WCAG resources

Success Criteria

Techniques

Situation A: If there are session time limits

Situation B: If a time limit is controlled by a script on the page

Situation C: If there are time limits on reading

Back to top