Change of Context

In web accessibility, a change of context designates a major upheaval of the page: opening a new window, moving focus, redirecting to another page or significant reorganization of content. WCAG requires that these changes never occur automatically, unless the user triggered them or was notified in advance.

You press Tab in a form, and focus jumps to an unexpected field. You select an option in a dropdown menu, and the page reloads. You didn't trigger anything. For a screen reader user who perceives only a fraction of the page at a time, this type of surprise causes disorientation.

#What WCAG calls "change of context"

The WCAG glossary defines it as a major change that, without the user's awareness, risks disorienting them. Four situations fall into this category:

• opening a new window or new tab;
• moving focus to another component;
• navigating to another page;
• significant reorganization of content.

Not to be confused with a simple content change. Displaying an error message under a field, updating a counter in real time: as long as focus remains in place and the page structure doesn't move, it's not a change of context.

#The classic trap: onchange on a <select>

The most common mistake is the dropdown menu that triggers an action as soon as you choose an option:

<!-- ❌ Automatic change of context -->
<select onchange="window.location.href = this.value">
  <option value="/en">English</option>
  <option value="/fr">Français</option>
</select>
 
<!-- ✅ The user triggers the action -->
<select id="lang">
  <option value="/en">English</option>
  <option value="/fr">Français</option>
</select>
<button type="button" onclick="window.location.href = document.getElementById('lang').value">
  Change language
</button>

A keyboard user navigates the <select> with arrow keys. With onchange, each movement triggers the redirect. The user doesn't have time to read the options.

Two success criteria frame these situations at level A (the minimum required by most legislations):

• 3.2.1 On Focus: receiving focus must never trigger a change of context.
• 3.2.2 On Input: changing a component's value must not trigger a change of context, except with prior warning.

#If automatic change is unavoidable

When your interface must react to a value change, warn the user before the component. Visible text, linked to the field with aria-describedby, is sufficient:

<p id="warning">The page will be updated automatically.</p>
<select aria-describedby="warning">…</select>

The most reliable solution remains the explicit button. No ambiguity, no unwelcome surprise.

#In summary

A change of context is not an error message appearing. It's a window opening without warning. A redirect. Focus jumping elsewhere. WCAG requires that the user originate it or be warned. The safest reflex: always place a validation button before an action that modifies the page.