Example of a timeout warning with a button to stay logged in
Image description: A green cartoon character looking at an error message with alarm. The message says, "Due to inactivity, you will be logged out for security reasons in 8:47 minutes” Below is a button that says, “Stay logged in.”

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Warn users about timeouts so that they are aware that it will occur. This helps give autonomy and awareness to people with cognitive and physical disabilities.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

If a timeout might result in the loss of data, then it's important to notify users about that potential loss. This helps them make informed decisions about what to do (such as if they should take a break or finish something now).

Time-sensitive activities are especially stressful for neurodivergent people, people with attention disorders, and people with other cognitive disabilities. They are also inaccessible to people who might require more time to complete something, such as someone with a motor disability using in inaccessible app. If there needs to be a time limit, ideally users should be able postpone time limits and log back into the application without losing data.

This references WCAG criterion 2.2.6 Timeouts (Level AAA).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

Provide a warning that is not too disruptive and is available to screen readers. A banner is a great option because it doesn't cover the entire screen the way that a modal dialog does. That way, the user can read the message and continue with what they're doing.

Mint App has a great example of a banner that is bright and noticeable, giving the users a direct countdown of the time limit, and the option to stay logged in. (This is a slightly older version of Mint but I think the banner is still great!)

Mint App time warning banner
Image description: a screenshot of the Mint App, which displays a bright orange banner that says, "Hey! You will be logged off in 47 seconds due to inactivity." The link says, "Click here to continue using Mint.com"

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • Open the website/app and leave it idle (meaning don't interact with anything).
  • If there is a timeout, make note if there was a warning message before it ended the session.
  • Make sure that message is screen reader accessible by turning the device screen reader on.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.