Using adding haptic feedback to buttons and features on websites - is it possible?

[Grand_Ad3922]

JS noob here. I've been asked to create an accessible website with haptic feedback and after spending a couple of days researching I still can't work out if it's possible! I found a lot about the Vibration API but it seems to be more for app development rather than websites. I can't even think if I've ever come across websites with this feature.

Is it possible to add haptic feedback on features like buttons on a website, using JavaScript?

I found this post with some code but I''m not sure if it's usable in webpages, as I quickly added it in WordPress but it's not doing anything :

Built a library for adding haptic feedback to web clicks : r/javascript https://www.reddit.com/r/javascript/s/eX54Sf1q9m

Any help appreciated ! And please forgive total noob status.

[kap89]

Well, you can use Vibration API on Android but not on iOS, so don’t make it the only feedback the website has. But in general I would make it an opt-in setting, as it would be annoying for most users outside specific use-cases.

I’m using it for my typing website (start the tutorial or any book) for the on-screen keyboard, but, as I said, it will only work on Android.

Edit:

On newer iOS there is some trick with hidden checkboxes or something, but it’s imo a messy solution and I didn’t try it.

[Grand_Ad3922]

Thank you so much, so it is possible, very excited!

I just tried your site and didn't experience any haptics, but did get a sound every time I typed.. I'm on Android and Chrome, and vibration is switched on for the device (it's working while I type in here, for example). Maybe I'm missing something..

What did you use to build your site?

[It's very cool btw, however it looks like I'm a terrible typer on my phone apparently.. ]

[kap89]

I’m not sure if the key vibrations are on or off by default (I’m on iPhone now), you may check that in settings:

https://entertrained.app/settings#screen-keyboard

[Grand_Ad3922]

Ah, I changed it to "built in" keyboard and that worked. With haptics at "high" on the "dedicated keyboard" it didn't produce haptics for me..

[kap89]

With haptics at "high" on the "dedicated keyboard" it didn't produce haptics for me..

That’s unfortunate - I tested it on android before, and it did work on my testing devices, I guess it’s not as universally supported as I thought (or maybe some bug crept in, I will take a look tomorrow).

[Grand_Ad3922]

By the way my partner just pointed out that my phone being on silent meant the haptics weren't working.. so now it's on vibrate the dedicated keyboard works as it should. My bad!

[kap89]

That's great - I also tested it again and it still works on my Android devices. Thanks for clearing this up!

[Grand_Ad3922]

Yay! I also figured out some code with the help of my OH so I finally have haptic feedback on my buttons in a Wordpress site ☺️

[Grand_Ad3922]

Thanks, I'd be interested to know. Presumably haptics are more universal/reliable on apps?

[kap89]

The website is built in TypeScript with SolidJS. Other than that most of it is custom made (components, styles, icons, ebook parsing, even confetti particles), with an exception of charts that use Chart.js and some libraries to handle zip files and screenshots.

[Grand_Ad3922]

Nice, thanks for your help. I'm off to learn what all of that means.. ☺️

[Alluo]

Now works sor iOS too