My goal is to integrate keyboard focus and navigation into my bubble app for accessibility reasons, but after some research, it doesn’t seem possible.
In essence, excluding input elements and group focus elements, I can’t set focus on elements such as buttons and text, which are integral to the page I’m currently trying to modify. A brief experimentation with JavaScript did not help, although I’m open to suggestions on that front if someone has found a working solution.
On top of that, even if I was able to set focus on the aforementioned elements, there doesn’t seem to be a straight-forward, native way to then navigate through a site’s focusable elements with one’s keyboard either.
I don’t want to believe that this is an impossible task, since keyboard navigability is legally required in the US and EU! Thanks in advance.
We had this discussion probably a year ago at a conference.
I would guess about 100% of Bubble apps, and for that matter, a lot of no-code apps, and even a ton of websites, don’t comply.
It slides under the radar a lot…until it doesn’t. Take the lawsuit against Dominos as an example.
It’s one of those things that isn’t a high priority until you become a big business. For most apps, etc., it isn’t focused on because they’re not worth going after for money.
Anyway, yes, you can do this in Bubble.
It takes ID attributes, and as you said, JavaScript to do it. It’s a detailed process, and I would suggest you ask an AI like Gemini how to do it exactly. It will give you step-by-step instructions.
Until a more straight-forward solution is implemented, I reckon it would be professional to provide an official method for keyboard nav/focus in Bubble using JavaScript. I gave it a shot yesterday, but without any documentation etc. it’s quite messy.
On that note, I’m certain that most Bubble developers would benefit from having such a solution available. And well… they probably would appreciate having the ability to be legally compliant
