Accessible image sliders and carousels: a 5-minute test and fixes for small-business sites

Many small-business templates open with a rotating slider: three photos, a headline on each, and a "Book now" button that changes every few seconds. It looks lively, but it's one of the most common places visitors get stuck. Text moves before people finish reading, the arrows are silent icons, and the button someone wanted has already slid away. Here's how to check yours and what to change.

First, do you need a slider at all?

Often the simplest fix is one strong photo with one clear headline and one button. Your most important message is then always on screen, it's easier to read on a phone, and there's less to break. If you keep a slider, the checks below matter.

The 5-minute slider test

1. There's a visible Pause (or Stop) button if slides move by themselves, and pausing actually stops them. Moving content that starts automatically and lasts more than 5 seconds needs a way to pause, stop or hide it (WCAG 2.2.2 Pause, Stop, Hide).
2. Slides stop moving while you hover or Tab into them, so nobody loses the button they were about to press.
3. Previous, Next and Pause work with the keyboard: Tab reaches them, Enter or Space presses them (2.1.1 Keyboard), and you can see where focus is (2.4.7 Focus Visible).
4. The arrows and dots have names. A screen reader should say "Next slide, button", not just "button" (4.1.2 Name, Role, Value).
5. Every slide image has sensible alt text, or empty alt (alt="") if it's purely decorative and the headline already says it all (1.1.1 Non-text Content; see alt text examples).
6. Headline and button text are readable over every photo, at least 4.5:1 contrast for normal text (1.4.3 Contrast). Check the lightest part of each photo behind the text with our free contrast checker.
7. On a phone, the arrows and dots are big enough to tap, at least 24 by 24 CSS pixels or well spaced (2.5.8 Target Size).

HTML you can copy

The W3C has a carousels tutorial and an ARIA carousel pattern with a working example. A minimal version of the structure:

<section aria-roledescription="carousel" aria-label="Our work">
  <button type="button" class="pause">Pause slideshow</button>
  <button type="button" aria-controls="slides">Previous slide</button>
  <button type="button" aria-controls="slides">Next slide</button>

  <div id="slides" aria-live="off">
    <div role="group" aria-roledescription="slide" aria-label="1 of 3">
      <img src="kitchen.jpg" alt="Remodelled kitchen with white oak cabinets">
      <h2>Kitchen remodels in Tulsa</h2>
      <a class="btn" href="/quote">Get a free quote</a>
    </div>
    …
  </div>
</section>

A small script swaps slides, changes the Pause button's text to "Play slideshow" when paused, and switches aria-live to "polite" only while the slideshow is paused, so screen readers announce a slide the visitor chose but don't chatter while it rotates. It's also kind to stop auto-rotation for visitors whose device asks for less motion (the prefers-reduced-motion setting).

Common mistakes we see

• No pause button, or a pause that only works on hover, so touch and keyboard users can't stop it.
• Icon-only arrows (‹ ›) with no text or label.
• Headlines baked into the photo as part of the image, so they can't be read by screen readers or resized. Use real text over the image.
• The only "Book now" or phone number lives on slide 2. Put your main action outside the slider too.
• Fast rotation, under about 5 seconds a slide, which most people can't read in time.

On Wix, Squarespace, Shopify or WordPress

You usually can't edit the slider's code, but you can usually turn off autoplay (or lengthen the delay), add alt text to each slide image, keep headlines as text, and choose high-contrast overlays. If your theme's slider has no pause button or unnamed arrows, consider replacing it with a single banner image or a static gallery. Our Wix, Squarespace, Shopify and WordPress guides cover each platform.

What an automated scan can and can't tell you

An automated scan, including ours, catches unnamed arrow buttons, images with no alt text and many contrast failures on the slide that's showing when it loads. It can't tell whether there's a working pause button, whether the slides stop on focus, or whether text is readable on the other slides. The 5-minute test above covers those. This page is general information, not legal advice.

Related: accessible navigation menus, 5-minute keyboard test, mobile and zoom checks, colour contrast guide, accessible FAQ accordions.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Accessible FAQ accordions and show/hide sections: a 5-minute test and fixes
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.