Accessible slideshow

Real previous and next buttons, slides named for screen readers in a polite live region, and no autoplay, so there is nothing to pause.

CL-0065 fixesChecked 2026-10-15

A row of four empty slide mounts, the second one orange-red

1. The prompt

Not yet run against a named assistant · 99 words · CC-BY-4.0

Write an image slideshow in plain JavaScript with no autoplay. Put each slide in a figure with role="group", aria-roledescription="slide" and an aria-label such as "2 of 5", inside a wrapper with aria-live="polite" and aria-atomic="false". Give the container aria-roledescription="carousel" and a label that does not contain the word carousel. Give every image its own alt text. Use real <button> elements for Previous and Next, wrap at both ends, and hide inactive slides with the hidden attribute. Add a short fade that a prefers-reduced-motion: reduce media query switches off. Support several slideshows on one page, and add an MIT licence comment.

Why each line is there

slideshow.js JavaScript · 12 lines Reviewed


      1// MIT licence. CodeLifter editors, codelifter.com/prompts/slideshow/
2document.querySelectorAll(".slides").forEach((show) => {
3  const slides = [...show.querySelectorAll("figure")];
4  let i = 0;
5  show.addEventListener("click", (e) => {
6    const step = Number(e.target.closest("button[data-step]")?.dataset.step);
7    if (!step) return;
8    slides[i].hidden = true;
9    i = (i + step + slides.length) % slides.length;
10    slides[i].hidden = false;
11  });
12});

2. What the prompt should produce. Load it after the markup below.

What a one-line prompt gets you

Representative output for “an image slideshow in JavaScript” and nothing else, written by the editors to show the pattern. It runs. It also leaves these gaps.

AI-generatedunreviewed

Shown for comparison. Do not ship.


      1var images = ["img1.jpg", "img2.jpg", "img3.jpg"];
2var index = 0;
3setInterval(function() {
4  index = (index + 1) % images.length;
5  document.getElementById("slide").src = images[index];
6}, 3000);

Representative one-line-prompt output, written by the editors to show the pattern. Not a recorded generation.

1 It changes every three seconds and cannot be stopped.WCAG 2.2 success criterion 2.2.2 requires a way to pause, stop or hide auto-updating content that starts automatically alongside other content, and the W3C notes there is no five-second exception for auto-updating. The reviewed slideshow does not autoplay.Prompt line: “Write an image slideshow in plain JavaScript with no autoplay.”
2 There are no controls.A reader who wants the next picture can only wait for it. The reviewed slideshow has native Previous and Next buttons that wrap at both ends.Prompt line: “Use real <button> elements for Previous and Next, wrap at both ends.”
3 Screen readers are not told anything changed.Swapping the src of one image announces nothing. The reviewed slides sit in a polite live region and each has a name such as 2 of 3, as the WAI-ARIA carousel pattern describes.Prompt line: “Inside a wrapper with aria-live="polite" and aria-atomic="false".”
4 The images have no alt text.Only file names exist, and the alt never changes when the picture does. The reviewed markup gives every image its own description.Prompt line: “Give every image its own alt text.”
5 It carries no licence.Nothing records who wrote it or on what terms. The reviewed script starts with an MIT licence line and a credit.Prompt line: “Add an MIT licence comment.”

Install it

1Copy the markup. Replace the three figures with your own, keeping one figure per slide, and hide all but the first with the hidden attribute.
2Write alt text for every image that says what the picture shows. A caption is shown to everyone; alt text replaces the image for readers who cannot see it.
3Update each figure's aria-label to its position, such as 2 of 5, and the section's aria-label to name the set of pictures.
4Set width and height on the images, or give the slide area a fixed aspect ratio, so the buttons do not jump as slides of different sizes appear.
5Load slideshow.js after the markup, then test with the keyboard alone, with a screen reader, and with reduced motion switched on in your system settings.

index.html HTML · 18 lines Reviewed


      1<section class="slides" aria-roledescription="carousel" aria-label="Harbour photos">
2  <div aria-live="polite" aria-atomic="false">
3    <figure role="group" aria-roledescription="slide" aria-label="1 of 3">
4      <img src="boats.jpg" alt="Fishing boats moored at dawn"><figcaption>Dawn</figcaption></figure>
5    <figure role="group" aria-roledescription="slide" aria-label="2 of 3" hidden>
6      <img src="light.jpg" alt="Lighthouse half hidden in fog"><figcaption>Fog</figcaption></figure>
7    <figure role="group" aria-roledescription="slide" aria-label="3 of 3" hidden>
8      <img src="wall.jpg" alt="Harbour wall at sunset"><figcaption>Sunset</figcaption></figure>
9  </div>
10  <button type="button" data-step="-1">Previous</button>
11  <button type="button" data-step="1">Next</button>
12</section>
13<style>
14  .slides figure:not([hidden]) { animation: slide-fade 0.4s ease-out; }
15  @keyframes slide-fade { from { opacity: 0; } }
16  @media (prefers-reduced-motion: reduce) { .slides figure { animation: none; } }
17</style>
18<script src="slideshow.js"></script>

Questions and answers

Has this prompt been tested with an assistant?

Not yet. The editors wrote the prompt to describe the reviewed code, which they wrote and tested with AI assistance and re-ran in a scripted DOM test on 2026-10-15. Nobody has run the prompt against a named assistant, so compare any answer with the code above.

Should a slideshow autoplay?

Not by default. WCAG 2.2 success criterion 2.2.2 requires a pause, stop or hide mechanism for auto-updating content that starts automatically and sits alongside other content. A slideshow that waits for the reader needs no such control.

Does pausing on hover count as a pause button?

Not on its own. The W3C Understanding document for 2.2.2 says content that stops only while focus rests on it, and restarts when focus moves away, is not a mechanism for the user to pause.

What if a client insists on autoplay?

Follow the WAI-ARIA carousel pattern: a button that stops and restarts rotation, first in the carousel's Tab order, with a label that changes to match its action; rotation that stops when keyboard focus enters and does not restart unless asked; rotation that stops on hover; and the live region set to off while rotating.

What does prefers-reduced-motion change here?

MDN describes the media feature as detecting a device setting to minimise non-essential motion, and notes that scaling or panning large objects can trigger vestibular discomfort. The only animation is a short fade, and the media query removes it for anyone who asked for less motion.

Why use the hidden attribute?

The WAI-ARIA carousel pattern warns that the screen reader experience is confusing when slides that are not visible are hidden incorrectly, for example by being displayed off-screen. The script hides inactive slides with the hidden attribute rather than moving them aside.

Why do the buttons keep focus?

The carousel pattern notes that activating the next and previous controls does not move focus, so a reader can press Next as many times as they like. The reviewed buttons only change which slide is visible.

Do slideshow images need alt text if they have captions?

Yes. The caption is shown to everyone; alt text replaces the image for readers who cannot see it. Write both, and do not repeat the caption word for word in the alt.

Can I use the slideshow on a commercial site?

Yes. The code is MIT licensed, so you can use and change it in paid work; keep the licence line or credit CodeLifter in your notices.

Sources

1Understanding SC 2.2.2: Pause, Stop, HideW3C WAI, WCAG 2.2, checked 2026-10-15
2Carousel (Slide Show or Image Rotator) PatternWAI-ARIA Authoring Practices Guide, W3C, checked 2026-10-15
3prefers-reduced-motionMDN Web Docs, checked 2026-10-15