Example of an annoying pop-up
Image description: A website with a pop-up that says, "Annoying Pop-up. Hi I came here to ruin your day." It has a close button at the upper right and a pattern of black diagonal lines behind it, covering the rest of the page.

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

Unexpected changes can be highly distracting and disruptive, especially to people with attention disorders, physical disabilities, and Blind and visually impaired people.

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.

Unexpected changes can really disrupt the thought process of someone with an attention disorder. These might also be confusing to screen magnifier users, who are now looking at a screen that's mysteriously covered up. They might also be disorienting to screen reader users, especially if the change is not screen reader accessible.

This references WCAG criterion 3.2.5 Change on Request (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

By "change context," WCAG is referring to changes on the website/app. Changing the context by user request includes navigating to a different page, clicking a button to open a dialog, or changing a setting that would change the display or functionality somehow. Changes that don't occur by user request include content that appears as a surprise that was not initiated by the user.

The Hated Pop-Up

A popular example of an unexpected change is the pop-up modal dialog. Pop-ups often appear as a surprise, fill the entire screen, and are often used to beg people to sign up for a newsletter. They are terrible. Please do not use them!

Instead of a pop-up, you can use a banner notification (sometimes called a toast or snackbar). A banner, while still a surprise, doesn't take up the entire screen and allows the user to continue doing what they are doing. They can appear at the top, to the bottom, or on the side. They should still be used sparingly for important messages and emergencies (as opposed to 3 video ads at once, for example).

Comparison of surprise banner (accessible) vs. surprise pop-up (inaccessible)
Image description: Comparison of an accessible message, which displays a surprise banner at the bottom of a webpage, vs. an inaccessible message, which displays a large surprise pop-up in the middle of a page.

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • Leave the website/app open for a certain amount of time. Make note of any unexpected pop-ups or other content that appears.
  • Note: most newsletter pop-ups appear within the first 10 seconds of entering a website. However, some appear after a longer period of time and/or scrolling on the page.

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.