Altwise

Drag, swipe and slider controls: price filters, before-and-after photos and galleries everyone can use

How to make price range filters, before-and-after photo sliders, swipe galleries, drag-and-drop uploads and slide-to-confirm buttons on a small business website work without dragging: WCAG 2.5.7 explained, copyable min/max filter and before-and-after slider code, platform notes and a 5-minute check.

A lot of small business sites ask visitors to drag or swipe: a price range filter with two handles, a before-and-after photo slider, a swipe-only photo gallery, a "drag files here" upload box, a "slide to confirm" button or a map you have to pinch. Shoppers comparing prices across stores this holiday season lean on filters more than ever. But people with tremors, limited hand strength or a head pointer, people using voice control, keyboard users and anyone holding a phone one-handed on a bus can find dragging slow or impossible. WCAG 2.2 added a rule for this: anything you can do by dragging must also be doable with a single tap or click, unless dragging is truly essential (2.5.7 Dragging Movements). Here's how to fix the common cases.

1. Price range filters: add "min" and "max" boxes

A two-handle price slider is hard to set precisely even with a steady hand. The simplest fix is two number fields with labels and an Apply button. You can keep the slider for people who like it, as long as the boxes are there too. The fields also work with a keyboard (2.1.1 Keyboard) and have visible labels (3.3.2 Labels or Instructions).

<form class="price-filter" action="/collections/all" method="get">
  <fieldset>
    <legend>Price</legend>
    <label for="price-min">Min ($)</label>
    <input id="price-min" name="min_price" type="number" inputmode="numeric" min="0" step="1" placeholder="0">
    <label for="price-max">Max ($)</label>
    <input id="price-max" name="max_price" type="number" inputmode="numeric" min="0" step="1" placeholder="250">
    <button type="submit">Apply price filter</button>
  </fieldset>
</form>
<!-- example URL, field names and amounts; use the ones your store's filter expects -->

The URL, field names and amounts above are example details. Your platform's filter may use different ones.

2. Before-and-after sliders: let people click, tap or use arrow keys

Contractors, cleaners, salons, med spas, dentists and photographers love the "drag the line" before-and-after slider. Most of these only move when you drag the handle. A native range input fixes most of it, because people can click or tap anywhere on the track and use the arrow keys, and a few buttons make it even easier. Both photos still need real alt text.

<figure class="ba">
  <div class="ba-frame">
    <img src="after.jpg" alt="After: freshly painted white kitchen cabinets with brass handles">
    <img src="before.jpg" alt="Before: worn oak kitchen cabinets with chipped paint" class="ba-before" id="ba-before">
  </div>
  <label for="ba-range">How much of the before photo to show</label>
  <input id="ba-range" type="range" min="0" max="100" value="50">
  <div class="ba-buttons">
    <button type="button" data-show="100">Show before</button>
    <button type="button" data-show="50">Show both</button>
    <button type="button" data-show="0">Show after</button>
  </div>
  <figcaption>Kitchen cabinet repaint, before and after</figcaption>
</figure>

<style>
  .ba-frame { position: relative; max-width: 40rem; }
  .ba-frame img { display: block; width: 100%; height: auto; }
  .ba-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
  .ba input[type=range] { width: 100%; max-width: 40rem; min-height: 24px; }
  .ba-buttons button { min-height: 24px; margin: .25rem .25rem 0 0; }
</style>
<script>
  var range = document.getElementById('ba-range');
  var before = document.getElementById('ba-before');
  function show(pct) { range.value = pct; before.style.clipPath = 'inset(0 ' + (100 - pct) + '% 0 0)'; }
  range.addEventListener('input', function () { show(range.value); });
  document.querySelectorAll('.ba-buttons button').forEach(function (b) {
    b.addEventListener('click', function () { show(b.dataset.show); });
  });
</script>
<!-- example photos, alt text and caption; use your real ones -->

The photos, alt text and caption above are example details. Write alt text that says what changed. If your slider app can't do this, showing the two photos side by side with captions works for everyone and is often clearer on a phone.

3. Swipe-only galleries and carousels: add buttons

Product photo galleries, review carousels and "swipe for more" sections often only respond to a swipe or a flick. Add visible previous and next buttons (or numbered dots that are real buttons) so one tap moves the gallery (2.5.1 Pointer Gestures). Make the buttons at least 24 by 24 CSS pixels (2.5.8 Target Size (Minimum)). See accessible image sliders and carousels.

4. Drag-and-drop uploads and reordering

5. Maps, "slide to confirm" and shake gestures

Platform notes

Settings and app names change often, so check your platform's or app's own help pages for the current option.

Common mistakes

A 5-minute check you can do today

  1. List every place on your site where you drag, swipe, pinch, shake or slide: filters, galleries, before-and-after, uploads, maps, sign-ups.
  2. For each one, try to do the same thing with only single taps or clicks, without dragging. Could you?
  3. Now try with only the keyboard (Tab, Shift+Tab, Enter, Space and the arrow keys). See our keyboard test.
  4. On your phone, are the arrows, dots and handles big enough to tap without hitting the wrong one?
  5. Press a button, then slide your finger off before lifting it. The action should not happen.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. It can flag sliders and buttons with no accessible name, unlabelled number and file inputs, small targets in some cases and low contrast. It can't tell whether a gallery only moves with a swipe, whether a before-and-after slider works without dragging, or whether a filter can be set with a tap, which is why the 5-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: image sliders and carousels, mobile zoom and tap targets, online store checkout, tooltips and hover pop-ups, WCAG 2.2 explained.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

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.

Have a cost calculator or instant quote tool? See cost calculator and instant quote accessibility.

Related guides

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.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.