A public library's auto-rotating homepage hero carousel advances every five seconds; what must its design include to meet WCAG 2.2 SC 2.2.2 Pause, Stop, Hide?

## What WCAG 2.2.2 asks for **SC 2.2.2 Pause, Stop, Hide** is a **Level A** criterion in WCAG 2.2. It has two parts: - **Moving, blinking or scrolling** content that starts automatically, lasts **more than five seconds** and is presented **in parallel with other content** needs a mechanism to pause, stop or hide it, unless the movement is essential. - **Auto-updating** content that starts automatically and is presented in parallel with other content needs a mechanism to pause, stop or hide it, or to control how often it updates, unless essential. The W3C Understanding document lists **auto-advancing presentations** among auto-updating content and notes there is **no five-second exception** for auto-updating content. A homepage hero carousel that advances on a timer sits beside the rest of the page, starts without the user asking and keeps changing, so it needs a real pause mechanism. The slide transition animation can also count as movement, which points the same way. ## Why a hover or focus pause is not enough by itself The Understanding document is explicit: an animation that stops only while the user has focus on it, and restarts when focus moves away, is **not** a mechanism for the user to pause, because it ties up the user to keep it still. Hover pausing has the same shape. Stopping on hover and focus is still good practice — it keeps a slide still while someone is reading or aiming at it — but it supplements the control; it does not replace it. Touch screens have no hover at all, which is another reason the control must exist. ## The design, from the Authoring Practices carousel pattern | Part | Requirement | |---|---| | **Rotation control** | A button that stops and restarts automatic rotation | | **Its label** | Changes to match the action it will perform: 'Stop slide rotation' or 'Start slide rotation' | | **Its position** | First element in the carousel's Tab sequence, before the rotating content, so it is easy to find | | **Keyboard focus** | Rotation stops when any element in the carousel receives focus, and does not resume unless the user activates the rotation control | | **Pointer hover** | Rotation stops while the pointer is over the carousel | | **Previous / next controls** | Buttons that show the previous or next slide without moving focus, so they can be pressed repeatedly | | **Slide picker** (optional) | Controls to choose a specific slide, such as a set of tabs or buttons | | **Slide names** | Each slide has a name; where no unique name exists, a position such as '3 of 5' | The guide explains why the stop control matters beyond keyboards: it is particularly important for assistive technologies operating in a mode that moves **neither keyboard focus nor the pointer**, such as a screen reader reading through the page — those users would never trigger the focus or hover pause. ## Worked example: the library's hero carousel The library homepage rotates five slides: summer reading, a new branch opening, e-book lending, an author talk and holiday hours. A compliant spec: 1. Places a **'Stop slide rotation'** button at the start of the carousel, visible at all times, which becomes **'Start slide rotation'** when pressed. 2. Stops rotation when any control inside the carousel gets keyboard focus, and keeps it stopped until the user restarts it. 3. Stops rotation while the pointer hovers over the carousel. 4. Gives previous and next buttons and names each slide, such as 'Summer reading challenge'. 5. Considers stopping after one full cycle, which reduces how long moving content competes with the rest of the page. ## What the carousel does for screen-reader users The Authoring Practices warn that when slides rotate unnoticed, a screen-reader user may read an element on slide 1, move to the next element, and hear something from slide 2 with no idea the context changed. Hidden slides must be genuinely hidden from assistive technology, not merely moved off-screen, and announcing each automatic rotation is avoided — the guide's optional live-region setting is off while rotating and polite only when rotation is stopped.