TL;DR — Real haptic feedback on the web is still restricted to mobile, and even there it’s limited. But “haptic-style” visual feedback — imitating the feel of a tap or click — is everywhere in 2026. This guide separates the real from the simulated and explains when each one is the right call.
What’s actually possible
The Vibration API can trigger a phone’s motor on Android Chrome and Safari 17+. That’s it for real haptics on the web. iOS specifically restricts API-driven haptics for battery reasons — you cannot reliably trigger iPhone haptics from a web page. Everything else called “haptics” in web UI is visual/audio simulation of the feeling.
When to use real haptics
Confirmation of a completed action
A 10ms vibration on successful form submit, payment, toggle. Short — under 20ms — reads as confirmation. Long reads as alarm.
Error signaling
A 30ms pulse pair (two quick bursts) for errors. Pairs well with a visual shake to reach users who have vibration disabled.
Progressive feedback in gesture-heavy UIs
Drag to refresh, pull to delete — a tiny tick when the user crosses the threshold into the action. Makes gestures feel tactile even on a glass slab.
When to simulate
Real haptics don’t reach iPhone and don’t reach desktop. Visual “haptic-style” feedback fills those gaps:
- Scale-down on press — a 120ms scale to 0.96 + return communicates that the tap was received.
- Color pulse on state change — a brief brighter flash on activation.
- Micro-bounce on drop — a tiny settle after a drag-release.
- Directional flicker — for swipe-dismiss, a micro-shake in the swipe direction.
Implementation rules
- Never fire real haptics without a user action — autoplay haptics get blocked.
- Keep real vibrations short (under 50ms for UI feedback). Long ones feel like a phone call.
- Design the interaction so the simulated visual feedback is sufficient even when no real haptic fires — never rely on haptics being present.
- Respect `prefers-reduced-motion` for simulated haptics; treat them as motion.
Frequently asked questions
Can I trigger iPhone haptics from Safari in 2026?
No — iOS Safari still blocks the Vibration API. The only way to trigger real iPhone haptics from the web is through a native wrapper (PWA installed to home screen may allow it in some cases).
Is the Vibration API a battery concern?
For the short bursts UI uses (under 50ms), negligibly so. The concern is with long or repeated vibrations; UI use is safe.
How do I test haptic feedback design?
Record the interaction, slow it down, and play it back. What reads as “confirmation” at 1x feels like “warning” at 0.5x — designers often overtune.
Found this useful? Read Micro-Interactions in 2026: The New Rules of Motion UX for the companion guide on how motion reshaped product design this year.
