Swipe gestures on websites: hidden navigation visitors miss

Key takeaways

Swipe gestures are invisible: visitors only use them if they guess they exist. On websites, unlike apps, most people expect to tap and scroll, so swipe-only navigation in sliders, tabs and galleries gets missed. WCAG 2.2 requires a single-tap alternative for path-based gestures. Add visible arrows, tabs or links for anything a swipe does.

• Gestures have no visible cue, so many visitors never find them.
• WCAG 2.2 requires a single-pointer alternative to swipes.
• Add visible arrows, dots with labels or tabs.
• Never put key content or navigation behind a swipe alone.

Why do swipe gestures get missed?

A swipe leaves no trace on screen. Visitors find it only by habit, by accident or from a hint. Apps teach gestures through repeated use, but a business website is visited briefly and rarely. Nielsen Norman Group's research on recognition and recall shows people use what they can see; hidden controls rely on memory.

• How clear website navigation improves user experience
• Recognition vs recall: let visitors see, not remember

Where do websites rely on swipes?

Swipe-only navigation hides in common components. Each needs a visible alternative.

• Image carousels and hero sliders.
• Product image galleries.
• Horizontal scrolling rows of cards or services.
• Tabbed content that changes with a swipe.
• Off-canvas menus that open with an edge swipe.

• Carousels on mobile websites: keep, fix or remove?

What does WCAG 2.2 require?

WCAG 2.2 success criterion 2.5.1, Pointer Gestures, at level A, says anything operated by multipoint or path-based gestures, such as swiping or pinching, must also work with a single pointer without a path, such as a tap on a button, unless the gesture is essential. Many people with motor impairments cannot swipe accurately.

• Accessible navigation: clearer for every visitor
• Mobile accessibility: the WCAG checks for small screens

What are good visible alternatives?

Visible controls tell visitors that more exists and let them reach it with a tap. Make them large enough to hit easily.

• Previous and next arrows on galleries and sliders.
• Numbered or labelled tabs instead of dots alone.
• A partly visible next card that signals more content.
• A labelled menu button rather than an edge swipe.
• A link to see all items on a separate page.

• Tap target size: how big should buttons be on mobile?

Can gestures still be useful?

Yes, as a shortcut alongside visible controls. Swiping through product photos is natural for many phone users. Keep it, and add arrows for everyone else. The rule is that a gesture can speed things up, but should never be the only way.

What does this look like in practice?

A pattern we see: a services row on a phone scrolls sideways with a swipe, showing three of eight services, with no arrows or hint. Most visitors see only the first three. Replacing it with a vertical list, or adding arrows and a 'See all services' link, shows all eight.

• See client work
• Website Design & Development for UK businesses

Gesture checklist

• List every component that responds to a swipe.
• Add visible arrows, tabs or links to each.
• Make controls at least 24 by 24 CSS pixels.
• Hint that more content exists.
• Never hide navigation behind a gesture alone.

• Nested menus on mobile: sub-menus that open and close
• Full-screen menus: stylish overlay or a step too far?

Next step

Use your site on a phone without swiping sideways. Note anything you cannot reach.