An animated banner needs a way for the visitor to pause, stop or hide it when the motion starts by itself, runs for more than five seconds and sits next to other content. A banner that flashes more than three times in any one second falls under a separate limit that no pause button can fix. Both rules are Level A success criteria in W3C's WCAG 2.2. If you buy ad space for a bike or scooter business, brief a designer, or approve creatives as a publisher, the two criteria turn into a short list of questions you can answer before a campaign goes live.
Example scenario: An e-scooter rental company prepares a summer banner. A scooter rolls across the frame, a battery icon fills up, a map pin drops, and the final frame pulses a red unlock button. The design team likes the energy. The publisher's editor worries about the article text next to it. Both are right, and the way to settle it is to look at what each criterion actually asks for.
The two rules side by side
W3C publishes an Understanding page for each success criterion. The page for 2.2.2, Pause, Stop, Hide, (Opens in a new tab) deals with distraction. The page for 2.3.1, Three Flashes, (Opens in a new tab) deals with seizure risk. They sit close together in the guidelines and apply to the same banner, but they ask for different things, and mixing them up leads to the wrong fix.
| Question | 2.2.2 Pause, Stop, Hide | 2.3.1 Three Flashes |
|---|---|---|
| Level on the W3C page | A | A |
| Concern | Distraction while using the page | Photosensitive seizures |
| What triggers it | Motion that starts automatically, lasts more than five seconds and sits beside other content | More than three flashes in any one second, unless within the thresholds |
| What fixes it | A pause, stop or hide mechanism, or a shorter animation | Reducing flashes or area until the thresholds hold |
| Does a stop button solve it | Yes, that is the mechanism the criterion asks for | No, the content itself must stay within the thresholds |
What counts as motion on the W3C page
The definitions matter because a banner rarely does just one thing. Moving, blinking and scrolling content is content in which the visible content conveys a sense of motion. Blinking means switching back and forth between two visual states in a way that is meant to draw attention. Auto-updating content updates or disappears based on a preset time interval. A banner that slides, glows and swaps its headline every few seconds touches all three definitions at once.
Starts automatically
The W3C page defines content that starts automatically as content that begins without direct user activation. It also includes content that starts from an indirect interaction such as focus, hover or scrolling into view. A banner that begins animating when it scrolls into the viewport therefore still counts. A preview that plays only after someone presses a play button does not start automatically.
Presented in parallel with other content
The criterion applies when the motion is shown alongside other content on the page. Practical suggestion: treat every in-page ad slot as parallel content, because the visitor is reading or deciding something right next to it. A full-screen player the visitor opened on purpose is a different situation.
The essential exception
The page defines essential as content that, if removed, would fundamentally change the information or functionality, and where the same information or functionality cannot be reached in another way that would conform. One of its notes says a preload animation can be essential when users cannot interact during that phase and showing no progress could make the content look frozen. A glowing button on an ad does not meet that test, because the offer reads the same without the glow.
Why the line is drawn at five seconds
According to the W3C page, five seconds is long enough to get a user's attention but not so long that a user cannot wait out the distraction. That is the reasoning behind the threshold, and it is worth repeating when a designer asks why a four-second loop is acceptable but a looping banner is not. The number is not a measure of how long an ad should run. It is the point at which the page says a person should be able to take control.
Loops are where banners cross the line. A two-second animation that repeats three times lasts six seconds in total, so it passes the five-second mark even though no single pass does. The W3C techniques reflect this: setting animated GIF images to stop blinking after a set number of cycles, within five seconds (G152), and using scripts to control blinking and stop it in five seconds or less (SCR22). If a creative must loop, the cycle count and the total time need to be known before the file is delivered.
The same page notes that automatically starting audio falls under a different criterion, 1.4.2 Audio Control. This topic stays with visual motion, so a banner with sound needs its own check.
Pause controls that hold up
The criterion names three actions, pause, stop and hide, and lets the author choose. The sufficient techniques on the page show what that looks like in practice. G4 allows the content to be paused and restarted from where it was paused. G186 uses a control in the page that stops moving, blinking or auto-updating content. SCR33 uses script to scroll content and provides a mechanism to pause it. G191 provides a link, button or other mechanism that reloads the page without any blinking content. Another group keeps the motion short in the first place: G11 creates content that blinks for less than five seconds.
Two details from the Intent section keep a control honest. First, a pause must not trap focus. An animation that runs only while it has focus and restarts when focus leaves does not count as a pause mechanism. Second, what happens on resume depends on the content. Non-real-time content can resume where it stopped. Real-time or status content, such as a stock ticker or a traffic camera, should jump to the current display, since hiding it has the same effect.
For pages with several moving elements the page recommends a single mechanism that pauses, stops, hides or controls the update frequency for all of them. Separate controls for each element meet the criterion but create a poor experience. For a publisher with three ad slots that is an argument for one page-level control rather than three buttons. An advertiser cannot supply that, but an advertiser can make sure the creative itself responds to a control.
Practical suggestion: Make the button itself accessible. Give it a text name such as Pause, make it reachable and operable with the keyboard, show a visible focus indicator, and keep it visible without hover. A control that appears only on mouse hover is invisible to keyboard and touch users.
Rotating offers: auto-updating content has no grace period
Many ad slots rotate through two or three messages. The W3C page treats that as auto-updating content and gives a separate rule: if the information starts automatically and is presented in parallel with other content, the user must be able to pause, stop or hide it, or to control the frequency of the update, unless the auto-updating is essential to an activity. The Intent section is explicit that there is no five-second exception for auto-updating content, with the reasoning that it makes little sense to auto-update for a few seconds and then stop.
This changes how a rotating banner is judged. A banner whose animation ends after four seconds still counts as auto-updating if the next message replaces the first on a preset interval. The options are the ones the criterion lists. Offer a stop or pause control, let the visitor control the update frequency, or reduce the banner to a single message. Another honest option is to replace the rotation with arrows that change the message only when the visitor presses them.
Note 3 on the page says periodically updated or streamed content does not need to preserve information generated during a pause. That helps for live data, but a promotional message is not live data. If a rotating banner hides a message the visitor never sees again, Practical suggestion: make sure the same offer is available elsewhere on the page or site.
Flashing is a different problem from blinking
The W3C page for 2.2.2 separates blinking from flashing. Blinking is a distraction problem. Flashing is a seizure-risk concern handled under Guideline 2.3, and the page states that blinking faster than three times per second also counts as flashing. The page for 2.3.1 adds that flashing, which can trigger seizures, cannot be allowed even for a second, while blinking can be allowed if it stops or can be stopped.
That is why the second question on any banner review has to be separate from the first. A slow pulsing button needs a pause mechanism or a five-second limit. A rapid strobe effect needs to be removed or brought within the thresholds, and adding a stop button does not change that. The 2.3.1 text says web pages must not contain anything that flashes more than three times in any one second period, or the flash must be within the general flash and red flash thresholds. Because non-conforming content can interfere with the whole page, all content must meet the criterion, whether or not it is used for other criteria.
General flash
The page defines a flash as a pair of opposing changes in relative luminance that can cause seizures in some people, and notes that it is a problem only when it is large enough and in the right frequency range. A general flash is a pair of opposing changes in relative luminance of 10 percent or more of the maximum relative luminance (1.0), where the darker image has a relative luminance of less than 0.80.
Red flash
A red flash is any pair of opposing transitions involving a saturated red. The page treats red more strictly because people are more sensitive to it. A banner that alternates a saturated red field with a dark one deserves a measurement even when it looks gentle on screen.
Area limit and pixel size
Content passes the thresholds with no more than three general flashes and no more than three red flashes in any one second. It also passes if the combined flashing area is no more than a total of 0.006 steradians within any 10 degree visual field on the screen, which is 25 percent of that field. For web content the page uses a 341 x 256 pixel rectangle to estimate a 10 degree field at 1024 x 768, and the Intent section converts that to 87,296 CSS pixels. The sufficient techniques are G19, ensuring that no component flashes more than three times in any one second, G176, keeping the flashing area small enough, and G15, using a tool to check the general flash and red flash thresholds. The page lists no named failures for this criterion.
Walking an e-scooter banner through both criteria
Example scenario: The rental company's banner has five moving layers. The review treats each layer separately, because a pass on one layer does not carry over to the next.
| Layer | Starts by itself | Runs more than five seconds | Flash concern | Action |
|---|---|---|---|---|
| Scooter rolling across the frame | Yes | No, one pass | None | Keep |
| Battery icon filling | Yes | No, one pass | None | Keep |
| Map pin dropping | Yes | No, one pass | None | Keep |
| Pulsing unlock button | Yes | Yes, on a loop | Treat as blinking, check speed | Limit to five seconds or add a pause control |
| Headline swapping every few seconds | Yes | Yes, on a preset interval | None | Add stop or frequency control, or fix one headline |
Three layers need nothing. They play once, finish within five seconds and carry no flash risk. The pulsing unlock button and the rotating headline are the real issues. The button is blinking in the W3C sense, since it switches between two visual states to draw attention. The rotating headline is auto-updating content, so the five-second exception does not apply to it at all.
The simplest repair keeps the design intact. Let the button pulse for a limited number of cycles that add up to five seconds or less and settle in its brightest state. Replace the rotating headline with one line that carries the whole offer. If the team insists on rotation, add one pause and play control that also stops the pulse. With those three changes the banner has no loop, no unbounded update and no strobe. The final frame, a parked scooter with the unlock button lit, still sells the service on its own.
Teams that test several headline versions can keep the experiment and drop the rotation. Run each headline as its own variant in the plan from the banner A/B testing plan rather than rotating them inside one creative.
Failure patterns to reject at intake
The page for 2.2.2 lists failures that make a reviewer's job easier, because each one names a pattern. F16 is scrolling content where movement is not essential, without a mechanism to pause and restart it. F112 is blinking content lasting more than five seconds without a mechanism to stop it. F50 is a script that causes a blink effect without a mechanism to stop it at five seconds or less. F7 is an object or applet that blinks or moves for more than five seconds.
| Failure | Pattern in a banner | Intake note to send back |
|---|---|---|
| F16 | Ticker strip or marquee that scrolls without a control | Add pause and restart, or make it static |
| F112 | Glowing call to action that never stops | Stop within five seconds or add a stop control |
| F50 | Timer script that keeps a blink effect running forever | Cap the script at five seconds or less, or expose a stop |
| F7 | Embedded object that moves for more than five seconds | Shorten the motion or provide a control |
What the four patterns have in common is that motion begins and the visitor has no way to end it. A single intake question catches all four. Does any motion run past five seconds, and if it does, can the visitor stop it? For a fuller list of what to request along with the file, the creative brief and file handoff checklist is a natural place to add the answer.
Production options for the design team
Each technique on the W3C page maps to a stage of production. A motion designer working in GIF can limit loop count at export, so the file stops on its last frame. The total duration has to be calculated, because the technique ties the stop to five seconds. A designer building an HTML5 creative can place the timer inside the creative and add the pause control in the same file, which keeps the publisher's page free of extra scripts. A designer who needs more than five seconds of motion has a second route, the control that stops the motion, rather than a stripped-down animation.
The page also describes a path for sites that cannot control a creative: G191, a link or button that reloads the page without any blinking content. In an ad server environment this means two creatives, one animated and one static, that the publisher can swap. Practical suggestion: deliver the static version with every animated banner. It works as the fallback for the page-level control, and it is the same file that appears when the animation has ended.
Practical suggestion: Design the last frame first. If the paused or finished banner shows the business name, the offer, the date and the call to action, the motion becomes an addition rather than a requirement. This also helps in the situation where a visitor pauses the banner on frame two. For general layout and message hierarchy, banner ad design tips covers the visual side.
Who owns what: advertiser and publisher
These W3C pages do not split responsibility between advertisers and publishers. They say that all content on a page must meet the criterion. Advertising appears only in the 2.2.2 page, in an example of a web advertisement that blinks to get the viewer's attention but stops after 5 seconds, and in a second example about a 15 second advertisement that every user must view before reaching free content. The 2.3.1 page does not mention ads. Practical suggestion: write the division of labor into the booking terms so that nobody discovers it after launch.
- Advertiser or designer: motion duration, loop count, flash content inside the creative, a pause or stop control inside the creative, and a static fallback file.
- Publisher: where the creative sits, whether the page offers a single page-level control, and whether the creative is checked before going live.
- Both: agree who tests, who signs off, and who removes the creative if a problem is reported.
A booking form with a few extra fields makes this concrete. Total motion time in seconds. Loop count. Presence of a pause or stop control. Presence of rotating messages. Confirmation that flashes stay within three per second. The publisher can check these fields in two minutes and ask questions only when an answer looks off. The W3C page for 2.2.2 mentions an ACT rule that checks whether automatically changing text content can be paused, stopped or hidden. It is listed as proposed, so treat it as a reference rather than a required tool.
The same page-level view is useful for accessibility and search together. Many of the fixes that help readers who are distracted by motion also help everyone else, and the web accessibility and SEO shared fixes article lists changes that serve both goals.
A rule of thumb for tight deadlines
Decision rule: Start with the fastest cure and move up only when you need to. First ask whether the motion can end by itself in five seconds or less. If yes, stop there. If the motion needs to run longer, add a pause or stop control inside the creative. If the creative rotates messages, either reduce it to one message or add frequency control. If any layer has rapid light-dark or red transitions, remove or slow it before anything else, because no control fixes a flash problem.
- Can all motion finish in five seconds or less? Then no control is needed for 2.2.2.
- Does any motion run longer or loop? Add pause, stop or hide.
- Do messages change on a preset interval? Add stop or frequency control, or use one message.
- Is there any rapid light-dark or saturated red alternation? Remove it or bring it within the thresholds.
- Does the paused or final frame carry the whole offer? If not, redesign the last frame.
Under a tight deadline the order of these steps matters more than perfection. A banner that ends by itself in five seconds and carries a complete last frame has solved most of both criteria with the least work. The pause control can come in a later revision if the creative has to run longer.
What the criteria leave open
The W3C pages describe how two success criteria work. They say nothing about legal duties for advertisers or publishers in any country, they do not set rules for banner sizes, and they do not define a maximum ad duration. Those questions are outside this topic, and the pages offer no statement on them.
Meeting one criterion does not make a page fully accessible. A banner can pass both and still lack alternative text, have poor contrast or break the focus order. Those are separate checks. The alternative text for dense visuals, for instance, is covered in the article on alt text for charts and infographics, and the same approach works for information-heavy banner art. Check the current W3C pages before relying on a technique code, since the technique lists can be revised.
Frequently Asked Questions
Does a banner under five seconds need a pause button?
If the motion starts by itself, is presented with other content and ends within five seconds, the 2.2.2 criterion does not ask for a mechanism. If the animation loops and the total passes five seconds, a mechanism is needed. Rotating messages are judged under the auto-updating rule.
Is a banner that stops on its last frame enough?
The W3C page lists content that blinks for less than five seconds (G11) and animated GIFs that stop after a set number of cycles within five seconds (G152) as sufficient techniques. A banner that ends on its last frame within that time fits those techniques. A banner that continues looping needs a control.
Is there a five-second exception for rotating offers?
No. The W3C page says auto-updating content has no five-second exception. The visitor must be able to pause, stop or hide the content, or control the frequency of the update, unless the updating is essential to an activity.
What is the difference between blinking and flashing?
Blinking switches between two visual states to draw attention and is a distraction concern. Flashing is a seizure-risk concern under Guideline 2.3. The 2.2.2 page says blinking faster than three times per second also counts as flashing.
Can a stop button fix a flash problem?
No. The 2.3.1 criterion requires the content to stay within three flashes in any one second, or within the general flash and red flash thresholds. The page says flashing cannot be allowed even for a second.
Do these W3C pages say who is responsible, advertiser or publisher?
These pages do not split duties between advertisers and publishers. They state that all content on a page must meet the criterion, and only the 2.2.2 page uses an advertisement, as an example of blinking that stops after 5 seconds. Dividing duties in the booking terms is a Practical suggestion.
Conclusion
Two questions settle a banner review, and they are separate. Does any motion start by itself, run past five seconds and sit beside other content? If so, give the visitor a way to pause, stop or hide it, or shorten the motion until it ends within five seconds. Does anything flash more than three times in a second, or alternate saturated red? If so, change the creative itself, because a control cannot repair it.
Rotating messages need their own answer, since the W3C page gives auto-updating content no five-second allowance. A single clear message, a pause control or frequency control all work. Collect the answers in the booking form, ask for a static fallback file and design the final frame to carry the whole offer. That keeps the animated version an enhancement.
When your creative is ready and you are choosing where it will run, see the options on Akua Adforce ad spaces.
Post a comment
Please log in to leave a comment. Login