Forum Academy Marketplace Showcase Pricing Features

Bubble Websites and Accessibility

Is it possible to create a Bubble website that conforms to accessibility standards? Has anyone had that as a requirement for any of their projects?

My sense is that Bubble is seen primarily as a tool for entrepreneurs and start-ups, but as it grows in popularity, its appeal will broaden, and its potential applications [and website audiences] will become more diverse; and accessibility might become more of an issue.

Generating semantic mark-up is not currently one of Bubble’s strongest suits, although I have noticed that for some elements, the HTML tag can be specified in the property editor; but that’s actually identified as an SEO feature.

Anyway, just curious if others have given this any thought, and I’d be interested to know if it’s even on @Bubble’s radar.

2 Likes

That’s a good question. I’m really curious about this too, especially as it pertains to inputs (and labels and ESPECIALLY tabbing index). I haven’t seen anything about it and don’t necessarily see how it could work necessarily given the way pages are assembled, but +1 from me.

It is on our list of things to investigate and improve on, but not for the near future, unfortunately.

We’ll keep you guys updated on this thread.

1 Like

Great to know it’s on the radar, @emmanuel. I’d be more proactive in approaching local gov’t orgs and businesses if accessibility wasn’t an issue. (Gotta fund my own entrepreneurial endeavors somehow. :wink:)

Thanks for letting us know!

1 Like

I have to agree with you on the inputs and definitely the tabbing index. I’ve read through all the threads regarding the tab index and while testing different options people tried, I actually found two bugs which I reported. The tab index is a very important issue to resolve and a manual override is needed.

1 Like

You can use Javascript to update the tab order. Just FYI in case it’s worth the complexity.

1 Like

@sridharan.s - Yeah, I’ve definitely thought about that, but it’s a pretty sloppy process currently to make that work on a page that has complex forms or dynamic forms. Ultimately, it doesn’t actually address the accessibility/screen-readability of the page, but it can work. For simpler forms I’ve found that by curating how forms and their parent groups are themselves grouped can produce decent results for tab-index, but definitely not a long-term solution.

Just circling back on this as I’m curious where this is on priority list now that we’re 10 months further down the road.

Being able to conform to accessibility standards – even just being able to label inputs – would be very helpful.

:+1: Me as well! Are we in the near future from March of 2019 yet?

Accessibility could be as easy as setting an attribute on the inputs to note the label, then the HTML that gets generated includes a tag.

I’m a Product Manager and Developer, so I know nothing is “as easy as” - but this one’s a big enough deal to prioritize regardless of the complexity. From my seat, it looks like it could hopefully be on the less complex side since the framework is there. Can you sneak it onto the top of the backlog? :slightly_smiling_face:

2 Likes

I have a fix that works today, but could be improved with what I suspect will be a small development effort. Check out the free accessibility widget from https://userway.org/.

UserWay have committed to the widget always being free. They make money of white label versions of the widget and accessibility audits. UserWay already have implementations for many platforms like Wordpress, Wix, Weebly, Joomla etc. See https://userway.org/platforms. I’m presuming they offer an API or dev kit and the platform owner does the work to implement support. Once that is done, adding their widget is trivially easy for a site owner.

However, they also have a vanilla HTML/CSS implementation which will work with your Bubble site today.

I just implemented it on mine. Simply complete a configuration survey at UserWay.org and add the code snippet they give you to the of your page. The easiest way to do this in Bubble is to just add it to all of your pages by using the “Script in the body” option under Settings -> SEO/Meta Tags.

You try my implementation at revid.xmarklabs.com. You’ll see an accessibility icon in the lower right hand corner. Click it and try the various options to see how it works.

Please note: Not all of the text on my site fully behaves with all of the accessibility options, but most of it does.

Hi Emmanuel, is there an update on this at all? It would be amazing if this was coming soon.

Lack of accessibility features will be a deal-breaker for a lot of people. Having a website/software that discriminates against people with disabilities is a pretty big problem.

In the US there is even precedent for lawsuits against websites that don’t conform to accessibility standards.

this is a really cool plugin Nick! Would you still recommend this for sites that need to be accessible?

It’s been working well for me. I have it on two sites, one is a Bubble site, the other is a WordPress site I maintain. Both have worked without any issues as far as I can tell.