WCAG 2.2 Demo Suite

2.3.2 Level AAA Guideline 2.3 Seizures and Physical Reactions Added in WCAG 2.0 Partly detectable automatically

Three Flashes

Content does not contain anything that flashes more than three times in any one second, with no threshold exception at all.

Who this affects

Users with photosensitive epilepsy, protected without relying on size and colour threshold calculations.

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 2.3.2

Open the failing example in a new tab

fail.html — the problem

<h1>New arrivals</h1>

<!-- The difference between 2.3.1 (Level A) and 2.3.2 (AAA):

     2.3.1 permits flashing above three times a second IF the flashing area is
     small enough - below about 25% of 10 degrees of visual field, roughly a
     341 x 256 pixel area - and does not involve saturated red.

     The badge below is 120 x 90 pixels, well under that threshold. It flashes
     at about 5.5 times a second. It therefore PASSES 2.3.1 under the small-area
     exception, and FAILS 2.3.2, which allows no such exception.

     As with 2.3.1, this demonstration is opt-in. Content that can trigger a
     seizure must never be started without warning, not even to teach. -->
<div class="callout callout--fail">
  <p class="callout__title">Health warning</p>
  <p>The button below starts a small rapidly flashing element.
     <strong>Do not use it if you have photosensitive epilepsy</strong>, or if you are unsure.</p>
  <button type="button" class="button" id="go">Show the flashing badge (5 seconds)</button>
</div>

<div class="small-flasher" id="box" role="img"
     aria-label="Demonstration area for the flashing badge"></div>

Meets 2.3.2

Open the passing example in a new tab

pass.html — the fix

<h1>New arrivals</h1>

<!-- FIX: nothing flashes at all. Emphasis comes from colour, weight and
     position - none of which can trigger a seizure.

     2.3.2 is one of the easiest AAA criteria to adopt, because almost no site
     needs flashing content in the first place. If you have none, you conform
     by default, and you should say so in your accessibility statement. -->
<ul class="plain">
  <li><span class="badge">New</span> Tidal Flats, by A. Marsh</li>
  <li><span class="badge">New</span> The Long Field, by R. Owen</li>
  <li>Salt, by J. Nandi</li>
</ul>

<!-- Where flashing is hardest to avoid, it is usually inside VIDEO rather than
     in your own markup - rapid scene cuts, camera flashes at a red carpet,
     explosions, strobe lighting at a concert. Screen your video with the free
     Photosensitive Epilepsy Analysis Tool (PEAT) from the Trace Center before
     publishing it.

     If a clip cannot be made safe, do not autoplay it, warn the user before
     they start it, and offer an alternative. That is not conformance with
     2.3.2 - but it is honest, and it is what 2.3.1 requires as a minimum. -->

How to test it

Confirm no content flashes more than three times per second, regardless of area or colour.

  • Automated

    Same specialist tooling as 2.3.1, applied without the threshold allowance.

    No axe rule maps to this criterion. It has to be checked by a person.

  • 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