Bubble Websites and Accessibility

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.

6 Likes

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.

1 Like

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.

1 Like

I’m a Bubble newbie and really love the platform. However, I’ve been also thinking about how to make Bubble apps more accessible at ideally WCAG 2.0 AA accessibility level. One of the major stumbling blocks are form field text inputs, given that there is no out of the box option to include an input paired with an html form label nor is there an actual html based form label element. As someone pointed out in another comment, it’s possible to add an id to elements. So…

From there, you can add an id to a text field.

Then, using the html element, you add an html based label. In this case, for=“fav-color”.

That now targets the id of the input.

As you can see, the styling doesn’t match the look of the app now. In order to match it you need to go into the Settings /SEO and inject some css into the page to match the styling. Unfortunately, since there doesn’t appear to be a way to associate preexisting styles to the html element, the styling doesn’t show up in the Editor but will show up in the actual page.

I’ve also added some styling for classes to only show to screen readers. This is important for adding things like a Skip Links ability. You would need to add an anchor id, for example: id=“main-content”, to whatever div or group is your main content. You can where you can inject the div above in the screenshot. It’ll appear right after the scripts in your opening body html tag. I’d apply the .sr-only class reference in the screenshot above. You can also include a focus only version that shows it when tabbed. I’ve taken this from Tailwind css but Bootstrap has their own version. You’ll need to do this for all pages. Yeah, kind of a pain. Although I suppose you could add an item like a div that’s last in a universal header to let screen readers know where the starting point is.

The ability to activate html tags to properly add titles based on Styles is a good idea too.

In the HTML 5 spec, pages can technically have more than one H1 title on a page besides what is int he body tag, if they only appear in a header, section, nav or article html tag. That isn’t possible though given that Bubble pretty much uses divs to structure everything, so I’d limit yourself to one H1 tag per page to structure things semantically for screen reader apps and SEO.

After also paying attention to page and text contrast and colors, as well as font sizing, we actually managed to get a score of 96 on Chrome’s Lighthouse Accessibility checker!

As others have pointed out, the way the tab indexes are applied detracts from the score and there may be a JS fix but I’m leery of JS band aids after researching them years ago. I know some of the best accessibility experts in the country and they don’t have a high opinion of the “auto accessibility” approach. Something is of course better than nothing though. It’s always better to do what you can directly in the app itself, use proper html structuring and, where needed, wai aria-roles (which we can’t really do in Bubble natively).

That said, I haven’t really delved into the other input elements yet like check boxes (which seem to have proper labels), radio buttons, the date picker etc. but I suspect the html/id technique might help there too.

I’ll try to update this comment/thread as I find out more. :slight_smile:

Mentioning @bonifier since he was curious.

6 Likes

You can also utilize the sr-only class if you want to support accessibility but don’t want the label to show. I’d use this approach instead of choosing to uncheck the “visible on page load” checkbox in the Properties window, since that applies display: none to the elements css. Elements with that applied are often skipped by screen readers since they are attempted to provide an equal experience on a par with sighted users. So if sighted users don’t see it, they assume screen reader users shouldn’t either.

2 Likes

Noted that per Nick12’s recommendation above that in January, the Userway plug in is available in the Plugins store for free (originally posted by Jici)

1 Like

@mrmarionoble with your accessibility chops, could you help us understand if that plugin is good enought or falls into the

cheers !

2 Likes

@lucas.ar Sorry, I haven’t seen this until now. I’ll definitely check it out, and something is generally better than nothing, that’s for sure!

Thanks! This is great

It’s a shame that Bubble.ie doesn’t have better accessibility out of the box, but having proper labels with ‘for’ attributes gets us a good way to having baseline acceptable forms.

So I asked the two dedicated accessibility experts I work with (they’ve worked @11y for eBay, Paypal, etc) and they’ve basically said tools like Userway are not a great alternative. Here are some links they shared on the topic:

https://adrianroselli.com/2020/06/accessibe-will-get-you-sued.html

1 Like

What is your 101 recco to improve in all accesibility matters?

Adding to this topic, it would be great if it was possible to target any Group’s “focused” state for styling. In addition to that, it would be great, if it was possible to “click” the focused group with the Spacebar and Enter keys.

This would really help creating custom accessible elements like custom radio select cards.

Hi Emmanuel, Any update on incorporating accessibility features into Bubble? Thank you!

2 Likes

My last reply was flagged as an advertisement. I didn’t advertise anything unlike Nick12 above who is obviously only advertising a service. I have nothing to advertise.

I posted 2 youtube videos that explained how every public website regardless of what they do has a LEGAL obligation to be ADA compliant. Compliance isn’t 100% clear, but if you don’t make an effort to be ADA compliant most lawyers would agree that you will lose a lawsuit because you are discriminating against people with disabilities “ON PURPOSE.” That is how the law is being interpreted. Its the same as if you didn’t make your building wheelchair accessible. There is 0 difference.

That’s the law.

I won’t post the youtube videos because apparently they were some sort of advertisement and spam.

ADA compliance is the law. Its not a nice to have its a must have. You are open to being sued if you aren’t ADA compliant. Period end of story. Ask a lawyer if you don’t believe me. Tons of Real Estate agents in San Francisco and around the US are being targeted right now because they can copy and paste the lawsuit and just change out the name.

They could do the same for businesses using Bubble. Pretty easy since they are all on the same platform.

Small businesses are getting sued and there is no way to fight it if you aren’t compliant.

This should have been updated yesterday.

Just saying

Legal disclaimer: this in not legal advice or an advertisement of services. I don’t know how to nor can I help anyone with a bubble.io site become ADA compliant. That would require custom code as far as I understand.

Yeah, as the OP of this topic (nearly 4 years ago now), I found your post to be quite eye-opening.

I want my websites to be inclusive, and I know that website accessibility is particularly important for government organizations; but I honestly didn’t realize it was illegal for any public website not to be compliant.

What you’ve brought to light does align with trends I’m aware of to sue small business owners whose physical location does not comply with ADA guidelines. In such cases, there’s absolutely no warning and no grace period in which to bring the business into compliance. The plaintiff doesn’t even have to bring the issue to the merchant’s attention. A lawyer simply “teams up” with someone with a disability to bring a suit against the merchant; and the merchant either pays the fine or pays another lawyer just as much to fight it.

It happens even in small rural communities - especially if that location is a tourist destination or highly desirable place to live (because there’s $$$ to be extracted from unsuspecting business owners).

It’s quite easy to imagine this trend continuing to expand to lots of online businesses.

I still feel this issue would be best addressed by Bubble at the platform level rather than Bubble devs having to factor in additional time and resources to attempt to bring their Bubble site into compliance via 3rd party “bolt-on” solutions (which will likely be fraught with issues and incompatibilities).

Perhaps Bubble should partner with (or even hire) some folks with disabilities to help them navigate this space. In my view, it’s as important as https these days.

For those interested in having the resources, here is the guidance along with the web standards:

ADA - Guidance on Web Accessibility and the ADA | ADA.gov

Justice Department Press Release - Justice Department Issues Web Accessibility Guidance Under the Americans with Disabilities Act | OPA | Department of Justice

W3C’s Web Accessibility Initiative - Authoring Tool Accessibility Guidelines (ATAG) Overview | Web Accessibility Initiative (WAI) | W3C

And W3C’s WAI WCAG - WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C

The W3C WAI has a great beginner course on accessibility.

:no_mouth: :thinking: Me as well too ! Are we now in the near future from March of 2019 yet?
it’s 4 years ago …
An attribute for Accessibility woud be great .

With the screen reader, each element says “Clicable” even if “isn’t clickable” is on
… could be not vocalized ?

2 Likes

Hey @emmanuel! Just curious if this is something you guys will be considering in the near future. As mentioned above in this thread, we are all at risk of getting sued without these capabilities currently.

Not having these abilities is blocking me from getting 3 customers currently in the university space and I would really love to have some clarity on how I should be approaching this roadblock.

1 Like

yes we all would be interested in any response. No response is the worse