WCAG 2.2 Demo Suite

3.2.5 Level AAA Guideline 3.2 Predictable Added in WCAG 2.0 Partly detectable automatically

Change on Request

Changes of context are initiated only by user request, or a mechanism is available to turn off such changes.

Who this affects

Users with cognitive disabilities and screen reader users, for whom any unrequested change — an auto-redirect, a pop-up, a page that refreshes itself — breaks the mental model of where they are.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 3.2.5

Open the failing example in a new tab

fail.html — the problem

<h1>Events</h1>

<!-- FAILURE 1: a link that opens a new window with no warning. The back button
     stops working, which disorients users who navigate by it. -->
<p><a href="#a" target="_blank" rel="noopener">Festival programme</a></p>

<!-- FAILURE 2: content that reorders itself on a timer. A user who has moved
     toward a link finds something else there when they arrive - a particular
     problem for anyone using a switch, a head pointer or magnification, all of
     which make targeting slow. -->
<ul id="list" class="plain">
  <li>Friday: opening readings</li>
  <li>Saturday: workshops</li>
  <li>Sunday: signings</li>
</ul>

<!-- FAILURE 3: an automatic redirect after a delay, with no way to stop it. -->
<p id="redir" role="status"></p>

<p id="a">Programme.</p>

Meets 3.2.5

Open the passing example in a new tab

pass.html — the fix

<h1>Events</h1>

<!-- FIX 1: no new window. If one is genuinely necessary, say so in the link
     text so it is part of the accessible name, not only in a title attribute. -->
<p><a href="#a">Festival programme</a></p>
<p><a href="#a">Download the programme (PDF, opens in a new tab)</a></p>

<!-- FIX 2: the list is stable. If new content arrives, the user is told and
     chooses when to load it - the pattern every good news site now uses. -->
<ul id="list" class="plain">
  <li>Friday: opening readings</li>
  <li>Saturday: workshops</li>
  <li>Sunday: signings</li>
</ul>
<p id="newstuff" hidden>
  <button type="button" class="button button--secondary" id="load">Show 2 new events</button>
</p>

<!-- FIX 3: no automatic redirect. The user is offered the move and takes it
     when ready. If a redirect is unavoidable, do it server-side with a 301 -
     that is instantaneous and does not strand anyone mid-page. -->
<div class="callout callout--note">
  <p class="callout__title">We have moved this page</p>
  <p>Events now live on our new listings page.
     <a href="#a">Go to the new events page</a></p>
</div>

<p id="a">Programme.</p>

<!-- Note how the three "predictable" criteria stack up:
       3.2.1 (A)   no change of context ON FOCUS
       3.2.2 (A)   no change of context ON INPUT, unless the user was warned first
       3.2.5 (AAA) no change of context AT ALL unless the user requested it,
                   or there is a way to switch such changes off
     3.2.5 is the strictest: even a warning is not enough - the change has to
     be requested. -->

How to test it

Confirm no automatic redirects, timed refreshes, unrequested new windows, or auto-updating regions that move focus. Links opening new windows must say so.

  • Automated

    A meta refresh is detectable; script-driven context changes generally are not.

    This demo's failure is not machine-detectable. axe's meta-refresh rule catches only the <meta http-equiv="refresh"> technique. The failing page redirects with a JavaScript timer and reorders its own content on an interval - both invisible to a static scan, and both far more common than meta refresh in modern code.

    Relevant axe rules:

    • meta-refresh
    • meta-refresh-no-exceptions

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification