From mid-October, many online shops rebuild their home page for the promotion weeks. A countdown bar runs across the top until the Advent sale ends, the basket holds sale items for a short time only, and on the first visit a prize wheel spins to reveal a voucher. All three elements have one thing in common: they set a time limit or move on their own. WCAG has two Level A success criteria for exactly this, 2.2.1 Timing Adjustable and 2.2.2 Pause, Stop, Hide. Mixing them up leads either to extensions nobody needs or to obligations that get overlooked. This article maps each element to the right criterion, shows what a countdown bar, a basket reservation and a promo pop-up actually need, and ends with a test routine you can work through before the campaign goes live. How an accessible online shop is audited and built as a whole is described on our service page.
Key takeaways
- A countdown bar keeps updating by itself and therefore falls under WCAG 2.2.2: users must be able to pause, stop or hide it, or control how often it updates. Auto-updating content has no five-second exception (W3C, Understanding SC 2.2.2).
- The end of the sale itself does not have to be extendable if it applies to everyone at the same time. The W3C uses an auction as the example, where extending the limit for one person would be unfair (W3C, Understanding SC 2.2.1).
- A basket reservation is a time limit under WCAG 2.2.1: warn before it expires, give at least 20 seconds to extend it with a simple action and allow at least ten extensions (W3C, Understanding SC 2.2.1).
- Promo pop-ups must not trap keyboard focus (W3C, WCAG 2.2, SC 2.1.2); a visible close control and closing with the Escape key make leaving easy. A voucher code that vanishes after a few seconds should remain available somewhere else.
- A countdown that restarts on every visit is also a legal risk: falsely claiming that goods are available only for a very limited time is considered unfair towards consumers in all circumstances under German law (UWG, Annex No. 7).
- For the 2025 holiday season the HDE expected online sales of 22.2 billion euros (HDE, forecast 2025). Test countdown, reservation and pop-up before the campaign starts, using a keyboard, a screen reader and reduced motion.
Why promo elements matter in the holiday season
The last two months of the year carry great weight in German retail. According to the forecast of the German Retail Federation, retailers generate 18.5 per cent of their annual turnover in the last two months of the year (HDE, forecast 2025). For online retail, the federation expected holiday sales of 22.2 billion euros in 2025 (HDE, forecast 2025). On top of that come the deal days at the end of November: for Black Friday and Cyber Monday 2025, the HDE forecast sales of 5.8 billion euros (HDE, forecast 2025).
In a survey commissioned by the HDE and carried out by IFH Köln among more than 1,000 online shoppers in October 2025, 48 per cent said they planned to go bargain hunting on Black Friday, and 54 per cent also use the day for Christmas shopping (HDE, survey 2025). Anyone shopping in these weeks meets shops that have rebuilt their home page for exactly these days: countdown bars to the end of the sale, baskets with an expiry time, voucher pop-ups, prize wheels and Advent calendars with a new door every day.
All of these elements work with time. They count down, expire, move or disappear by themselves. For many people this is no problem; for others it is a hard limit. At the end of 2025, a good 7.8 million people with severe disabilities lived in Germany (Destatis, 2026), and 16 per cent of them had an intellectual or mental disability (Destatis, 2026). People who use a screen reader, work with voice control, have limited use of one hand or read more slowly need more time for the same task. The W3C gives exactly this as the reason for the timing criterion: people with blindness, low vision, dexterity impairments or cognitive limitations may need more time to read content or fill in forms (W3C, Understanding SC 2.2.1).
Every time limit in the shop counts
Legally, this is tied to the accessibility duty for online retail. The German Accessibility Strengthening Act (BFSG) applies to e-commerce services provided to consumers after 28 June 2025 (BFSG, Section 1). The implementing regulation requires websites and mobile applications to be perceivable, operable, understandable and robust in a consistent and appropriate way (BFSGV, Section 12). Breaches of certain obligations can be fined up to 100,000 euros (BFSG, Section 37). Micro-enterprises that offer or provide services are exempt (BFSG, Section 3). Our page on BFSG requirements summarises what applies in detail. The practical yardstick for technical implementation is the set of WCAG success criteria, which are tied into the European framework through the European standard EN 301 549; the article on EN 301 549 behind the BFSG explains how they connect.
Two criteria, several elements: the right mapping
WCAG 2.2.1 Timing Adjustable covers time limits set by the content. For each such limit, at least one of the following conditions must be met. The user can turn the limit off beforehand. The user can adjust it beforehand over a wide range of at least ten times the default length (W3C, Understanding SC 2.2.1). Or the user is warned before it expires, gets at least 20 seconds to extend it with a simple action and may extend it at least ten times (W3C, Understanding SC 2.2.1). In addition there are three exceptions: the limit is a required part of a real-time event such as an auction, it is essential and extending it would invalidate the activity, or it is longer than 20 hours (W3C, Understanding SC 2.2.1).
WCAG 2.2.2 Pause, Stop, Hide, by contrast, covers content that moves, blinks, scrolls or updates automatically. For motion the rule is: if it starts automatically, lasts more than five seconds and runs in parallel with other content, there must be a mechanism to pause, stop or hide it (W3C, Understanding SC 2.2.2). For auto-updating information, starting automatically next to other content is already enough. Here the shop may alternatively let users control the update frequency, but there is no five-second exception (W3C, Understanding SC 2.2.2). Both criteria are Level A, the base level that must also be met for Level AA conformance.
| Element | What happens over time | Criterion under WCAG 2.2 | What the shop needs |
|---|---|---|---|
| Countdown bar to the end of the sale | The display updates itself; the end of the sale applies to everyone | 2.2.2 for the display; the end is comparable to the real-time exception in 2.2.1 | Pause or hide the display, add the end date as text |
| Personal offer timer | A limit starts with the visit and applies to this one person only | 2.2.1 | Turn off, adjust, or warn and extend |
| Basket reservation | Items are released when the time runs out | 2.2.1 | Warning before expiry, at least 20 seconds, at least ten extensions |
| Voucher notice that disappears | The code is visible only briefly | 2.2.1 | Code also in the basket, the account or the confirmation |
| Prize wheel, animated calendar, ticker | Motion starts automatically | 2.2.2, plus 2.3.1 for flashes | Stop button, no flash sequences above the threshold |
The distinction has practical consequences. Treating the countdown bar as a 2.2.1 case leads to the belief that the end of the sale must be postponable for every single person, and the bar gets dropped altogether. Treating the basket reservation as a 2.2.2 case leads to a pause button for the display while the actual time limit keeps running. Both miss the point. The first question for every element is therefore: does the content set a time limit that restricts a person in their task, or does motion running next to the content distract them? Some elements do both, and then both criteria apply side by side.
The countdown bar: pause it, do not extend it
A fixed end of the sale, say Sunday at midnight, applies to all customers at the same time. The W3C gives an example for a comparable case: in an auction the time limit applies to all bidders, and it would be unfair to extend it for one particular person; the criterion therefore requires no extension, adjustment or deactivation there (W3C, Understanding SC 2.2.1). A shared end of a sale can usually be classified the same way. The shop therefore does not have to extend the Advent sale for individuals.
The situation is different for a timer that only starts when the page loads and applies to this one person, for example a notice saying an offer is reserved just for you and only for a short time. Here the content sets an individual time limit. In our assessment, 2.2.1 then applies with its options to turn off, adjust or extend. There is also a question of unfair competition law, which the section on honest deadlines below addresses.
The display itself falls under 2.2.2. A bar that counts down days, hours, minutes and seconds updates automatically and sits in parallel with the rest of the page. It therefore needs a mechanism to pause, stop or hide it, or a way to control the update frequency (W3C, Understanding SC 2.2.2). For real-time information, the W3C describes a particular kind of pause: when resumed, the display jumps to the current state instead of continuing from where it stopped. It explicitly names an auction timer as an example that would otherwise show misleading values (W3C, Understanding SC 2.2.2).
A button that pauses the countdown only while it has focus is not enough. The W3C makes clear that such a mechanism makes the page unusable while paused and therefore does not count as a pause (W3C, Understanding SC 2.2.2). If a page has several moving elements, such as the bar, a carousel and a prize wheel, the W3C recommends as good practice a single control that pauses them all at once. The article on accessible sliders shows what this looks like for carousels.
- A visible "Pause countdown" button inside the bar, reachable by keyboard and operable with Enter or the space bar
- The choice persists across page changes so that the bar does not start again on every page
- The end of the sale is also shown as text in the bar, for example "ends Sunday, 11:59 pm", so the information stays correct while the display is paused
- With the reduced motion setting enabled, flip and counting effects on the digits are switched off
- The bar does not stick to the top edge in a way that hides focused elements; spacing via scroll-padding keeps the focus visible
The last point is a criterion of its own. A sticky bar must not entirely hide an element that receives keyboard focus (W3C, WCAG 2.2, SC 2.4.11). The W3C names sticky headers and footers as a typical cause (W3C, Understanding SC 2.4.11). Promo bars are often added on top of an existing header later on, and then the space the page keeps free when scrolling is no longer sufficient. The following example shows a bar that states the end as text, keeps the remaining time separate and brings its own button.
<!-- Promo bar: end date as text, remaining time separate, own button -->
<div class="promo-bar" role="region" aria-label="Advent sale">
<p>Advent sale ends Sunday, 11:59 pm.
<span class="promo-remaining" role="timer">2 days 14 hrs left</span>
</p>
<button type="button" class="promo-toggle">Pause countdown</button>
</div>
<style>
/* Sticky bar: focus stays visible (SC 2.4.11) */
html { scroll-padding-top: 4.5rem; }
/* No flip effect on the digits with reduced motion */
@media (prefers-reduced-motion: reduce) {
.promo-remaining { animation: none; transition: none; }
}
</style>
<script>
const end = new Date('2026-12-06T23:59:00+01:00');
const remaining = document.querySelector('.promo-remaining');
const toggle = document.querySelector('.promo-toggle');
let paused = localStorage.getItem('promo-paused') === '1';
function render() {
toggle.textContent = paused ? 'Resume countdown' : 'Pause countdown';
if (paused) return;
// Always derive the remaining time from the fixed end:
// after a pause the display jumps to the current state (SC 2.2.2)
const min = Math.max(0, Math.floor((end - Date.now()) / 60000));
remaining.textContent = Math.floor(min / 1440) + ' days '
+ Math.floor(min / 60) % 24 + ' hrs left';
}
toggle.addEventListener('click', () => {
paused = !paused;
localStorage.setItem('promo-paused', paused ? '1' : '0');
render();
});
render(); // the stored choice also applies after a page change
setInterval(render, 60000); // update once a minute instead of every second
</script>For screen readers the bar is a trap of its own. The WAI-ARIA specification has the timer role for exactly this kind of counter and states that elements with this role have an implicit aria-live value of off (W3C, WAI-ARIA 1.2). A screen reader therefore does not read out every change by itself, and that is as it should be. Writing the remaining time into a region with aria-live="polite" instead creates a new announcement every second that drowns out everything else. What is worth announcing is a change of state, such as the end of the sale, as a status message that reaches the user without a change of focus (W3C, WCAG 2.2, SC 4.1.3). The article on accessible error and status messages explains how to use live regions properly.
The basket reservation: warn and let users extend
Many shops hold sale items in the basket for a limited time only, so that scarce products are not blocked indefinitely. When the time runs out, the items go back into stock. This is a time limit set by the content and therefore a case for 2.2.1. The W3C ranks the options by their benefit to the user: being able to turn a limit off is better than adjusting it, and adjusting is better than asking for more time just before it expires (W3C, Understanding SC 2.2.1).
Turn off
Before the limit starts, the reservation time can be switched off, for example with an "I need more time" checkbox in the basket. For the user this is the simplest option (W3C, Understanding SC 2.2.1).
Adjust
The user sets the limit before it starts, over a wide range of at least ten times the default length (W3C, Understanding SC 2.2.1).
Extend
A warning appears before expiry, the user has at least 20 seconds for a simple action and can extend at least ten times (W3C, Understanding SC 2.2.1).
The third option is the most common in shops, and its implementation often fails in the details. The warning must appear in a way that is noticed: as a dialog that moves focus to the "Extend reservation" button and is announced to screen readers. The 20 seconds count from the warning, not from the last click. The simple action is a single click or key press, not a fresh sign-in and not a puzzle. After extending, the user returns to the same place with the same input. The W3C describes this flow using a ticket site that gives two minutes to confirm, warns shortly before the time runs out and allows an extension via a button (W3C, Understanding SC 2.2.1).
That leaves the question of whether a reservation can count as essential. The W3C covers this case as well: a ticket site gives two minutes to confirm, because tickets sell out quickly and holding them longer would change the nature of the offer (W3C, Understanding SC 2.2.1). Even there, the site in the example moves as much of the process as possible out of the time-critical stage, for instance by asking for name and payment method beforehand. For an online shop with ordinary stock, this exception rarely holds. Anyone relying on it for a limited promotion should document the reasoning and collect all input before the time limit starts.
A second lever is what happens on expiry. If only the reservation is cancelled while the items stay in the basket, nobody loses their selection. The AAA criterion 2.2.6 describes the same idea for sessions: users must be warned of any period of inactivity that could cause data loss, unless the data is preserved for more than 20 hours (W3C, WCAG 2.2, SC 2.2.6). Level AAA is not the BFSG benchmark, but the idea helps with the design. How session handling behind a login is audited is covered in the article on auditing accessibility behind the login.
No silent emptying of the basket
Pop-ups, prize wheels and Advent calendars
The third typical element of the season is the promo pop-up. It appears on the first visit or when the user is about to leave, offers a voucher or invites them to spin a prize wheel. Aktion Mensch tested the web shops among the most visited company websites in Germany and explicitly listed overlaid content such as banners and cookie overlays among the barriers, because they cover the main content and cannot easily be closed (Aktion Mensch, 2025). Only 20 of 65 tested websites could be operated by keyboard alone (Aktion Mensch, 2025).
Screen reader users confirm the picture. In the WebAIM survey with 1,539 valid responses, interactive elements such as menus, tabs and dialogs that do not behave as expected rank second among the most problematic items, and screens or parts of screens that change unexpectedly rank fourth (WebAIM, 2024). A pop-up that appears over the page without warning and does not take focus combines both.
What an accessible promo pop-up needs is well known: a visible close control with an understandable name, closing via the Escape key, focus moving into the dialog on opening and back to its starting point on closing. Focus must not be trapped so that it can no longer be moved out with the keyboard (W3C, WCAG 2.2, SC 2.1.2). The technique behind this is described in the article on accessible modals and overlays. For promo pop-ups there is an additional question: when does the window appear? Criterion 2.2.4 Interruptions requires that interruptions can be postponed or suppressed by the user (W3C, WCAG 2.2, SC 2.2.4). It is Level AAA and therefore not a BFSG duty, but it describes good behaviour: a pop-up that only appears after an action by the user and can be switched off for the visit is less disruptive.
It gets tricky when the voucher code itself is visible only briefly. A notice that shows the code and disappears after a few seconds sets a time limit on reading. The W3C describes an uncritical case: a toast about new email disappears after 5 seconds but is not a problem, because the same information is available in the inbox (W3C, Understanding SC 2.2.1). Applied to a shop: if the code is also shown in the basket, the customer account or the confirmation email, the disappearing notice is not a problem. If the code exists only in that one window, its display time must be possible to turn off, adjust or extend.
Prize wheels and animated Advent calendars touch 2.2.2 directly. A wheel that spins by itself or waits for the user with a long animation starts automatically, lasts more than five seconds and runs next to the other content, so it needs a stop (W3C, Understanding SC 2.2.2). Light effects must not flash more than three times in any one second, unless they stay below the general flash and red flash thresholds (W3C, WCAG 2.2, SC 2.3.1). If the wheel plays a sound automatically for more than 3 seconds, users must be able to pause or stop it or control its volume independently of the system volume (W3C, WCAG 2.2, SC 1.4.2). A game that requires clicking at exactly the right moment can become a barrier for people with limited motor control; it then needs an alternative next to it that leads to the same voucher without any reaction time. How to reduce motion overall is covered in the article on prefers-reduced-motion.
For the Advent calendar, one of the 2.2.1 exceptions helps. A door whose offer is valid for a whole day does set a time limit, but one of more than 20 hours, and for such limits the criterion requires no extension (W3C, Understanding SC 2.2.1). The W3C explains the threshold by saying that 20 hours is longer than a full waking day (W3C, Understanding SC 2.2.1). A flash deal that ends for everyone at the same time is treated like the end of the sale. If the limit only starts when the door is opened, however, it applies individually and falls under 2.2.1.
Honest deadlines: where accessibility meets fair trading law
A countdown that starts again at the same value on every page load is first of all a barrier for everyone who decides worse under time pressure. It can also be a question of competition law. The annex to the German Act against Unfair Competition (UWG) lists the false claim that goods or services are available only for a very limited time, made in order to push consumers into an immediate decision, among the commercial practices that are considered unfair towards consumers in all circumstances (UWG, Annex No. 7). Whether a specific countdown falls under this is a legal question for the individual case, which we do not answer. Technically, however, it is easy to check whether the displayed deadline matches the actual end of the sale.
For accessibility, an honest deadline is the better solution anyway. A fixed end date shown as text in the bar can be read aloud, enlarged and looked up at leisure. It needs no ticking seconds and no announcement on every change. Anyone who wants to keep the countdown as a design element places it next to the text and makes it pausable. The W3C explicitly lists people with cognitive or language limitations among those who need more time to read and understand (W3C, Understanding SC 2.2.1). For them, a clear date is information, while a ticking counter is mostly pressure.
A deadline that ends the same way for everyone may end. A deadline that runs for one person only needs a way to more time.
Test routine before the campaign starts
Many findings on promo elements can be caught before launch if you look for them specifically. In 2026, Black Friday falls on 27 November and the first Sunday of Advent on 29 November; planning the test for the weeks before leaves time for fixes. The following routine covers the three elements in this article and can be carried out with a screen reader, a keyboard and the system settings of your own computer.
- Take stock: record every time limit and every piece of motion in the shop, including basket, checkout and customer account, and note for each element whether it sets a time limit (2.2.1) or moves or updates (2.2.2).
- Reach the countdown bar by keyboard, pause and hide it, and check whether the choice persists across page changes.
- Load the home page with a screen reader and listen for a while: if announcements about the remaining time keep coming, the bar is wrongly marked up as a live region.
- Tab through the page and check whether the sticky bar entirely hides a focused element.
- Let a reservation expire on purpose: does the warning come in time, are there at least 20 seconds left after it, can it be extended with one click or key press, and at least ten times?
- Close the pop-up by keyboard and with Escape, check where focus returns, and whether the voucher code is available elsewhere.
- Turn on reduced motion in the operating system and check whether the prize wheel, digits and calendar stay still; assess flash effects separately.
- Document exceptions: where a time limit applies to everyone or is classified as essential, put the reasoning in writing.
Such a run does not replace a full audit of the shop, but it covers the parts that are new during the promotion period. If you run several campaigns a year, add these points to the acceptance check of every new campaign; our page on accessibility monitoring describes ongoing checks after changes. If the promo elements come from a page builder or an extension, the article on third-party widgets and BFSG duties is worth a look, because the obligation usually remains with the shop operator.
Planning promotions everyone can use
Accessible promo elements do not mean giving up urgency. An end of sale stated as clear text, a countdown bar with a pause button, a reservation with a warning and an extension, and a pop-up that can be closed and does not swallow the code sell the same promotion without locking customers out. The effort usually lies in a few components that can be built properly once and reused in every further campaign.
For implementation it makes sense to keep promo elements as dedicated components in the design system, with defined behaviour for pausing, warnings, focus and reduced motion. You then test them thoroughly once instead of repairing every campaign anew. We support this with a WCAG audit of the promotion journey, with accessible development for the components and with training for teams that set up campaigns themselves. Our articles on the accessible checkout and on older customers show how the other steps of a purchase become accessible.
Related Articles
Customers over 65: removing barriers in your online shop
Three in four people over 65 are online, and 76 per cent of them shop there. Which WCAG criteria slow this clientele down and in which order to fix them.
Accessible Product Pages: Variants, Gallery, Add to Cart
A flaw in the product template appears on every item page. How to make variant choice, gallery, price line and add-to-cart feedback accessible.
Accessible Withdrawal and Cancellation Buttons for Shops
Since 19 June 2026, § 356a BGB requires a withdrawal function. How it and the cancellation button work with keyboard, screen reader and zoom.