WCAG Tips: What’s a 'Change of Context?'

One of the core principles of digital accessibility is understandability. If users can’t predict how a website will operate, you’ve probably made a design mistake — and you may be introducing barriers for people with disabilities. 

Major changes in content can impact understandability. The Web Content Accessibility Guidelines (WCAG) refers to these major changes as changes of context, rather than changes of content; not all content changes are significant enough to create a potential issue.

For instance, if your website has a dynamic menu with links, that’s a change of content, but it’s not a change of context. It’s a relatively minor change, and most users will understand why the change occurred. 

A change in context is more substantial and might affect one of the following: 

1. The user’s focus;
2. The user agent;
3. The viewport;
4. Content that changes the meaning of the webpage. 

Rather than focusing on the strict definition of a “change of context,” think about the user. You don’t want to take control from users unless they understand what’s happening — that’s basic web design. If a change of context occurs without the user’s awareness or permission, the user might be disoriented or confused. 

Related: What Are the Four Major Categories of Accessibility?

Tell users before a change of content occurs

Unfortunately, many websites try to take too much control over the user experience. Selecting a page from a drop-down menu might automatically navigate to that page, or tapping a checkbox might activate a pop-up window.

For users who don’t have disabilities, this is frustrating — and for people that use assistive technologies, unexpected changes of context can prevent them from operating the website. If you’re browsing with a screen reader and a new window pops up without warning, you might not understand how to find the content you need.

WCAG addresses this in WCAG 2.1 Success Criterion (SC) 3.2.2, “On Input,” which reads: 

“Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.”

WCAG 2.1 SC 3.2.1, “On Focus,” is another relevant requirement: 

“When any user interface component receives focus, it does not initiate a change of context.” 

Avoid accessibility issues by giving users control over changes of context

To fulfill these criteria, you’ll simply need to avoid changes of context unless it’s clear that the change will occur as a response to the user’s behavior. If possible, you should also give them a way to control major changes. 

Some quick examples:

• As a user fills a field on a web form, their keyboard focus automatically moves to the next field. Instructions at the top of the form explain that this will happen. 
• A calendar app allows users to schedule appointments with a physician. The app doesn’t automatically switch screens when the user selects a date; instead, the user must activate a “submit" button to make the appointment.
• A user selects a checkbox on an eCommerce order form. The website doesn’t automatically launch a popup window; the user must tap “place order" to complete the process. 

Related: Accessibility Tips: Be Cautious When Using Autofocus

Test keyboard accessibility, especially on pages with complex or dynamic content

Most web designers understand the importance of giving users control, but poor markup or code can make your content unpredictable. Third-party widgets may also create keyboard traps or unexpected changes of context, so it’s important to test your website carefully. 

A simple way to test for keyboard accessibility: Unplug your mouse (or, at least, set it to the side). Use the Tab and Shift-Tab commands to browse through your content, paying close attention to forms and interactive controls. 

• Does the keyboard focus move predictably?
• Does focusing on any component cause a change in context?
• Does a change of context occur as a result of an interaction (for example, selecting a checkbox)? If so, have you included instructions that make this change predictable? 

This is also a great time to make sure that your keyboard focus indicator remains visible when browsing through content. For more detailed guidance, read: Give Yourself an Accessibility Test: Don't Use a Mouse.

While a quick keyboard test can highlight opportunities for improvements, it’s a good idea to have a regular testing strategy. Auditing your content against WCAG helps you provide a better experience for all visitors, including keyboard users, screen reader users, and people who don’t have disabilities. 

To learn more, get started with a free automated website analysis or download our free eBook: The Ultimate Guide to Web Accessibility.