Form Accessibility Standards

Questions
1

Hey there community,

I am working with a UI/UX guy who specialises in accessibility who has raised a few issues with a new page we have built that I would appreciate people’s opinions on.

I’ve used Bubble extensively in the past and am now looking to commit to it for a couple of new projects. We want to make everything as standardised as possible, so I am open to writing our own plugins and components if necessary, but if any of the following can be resolved natively I would really appreciate people’s input

Here is the page: Hazard Reporting Form :: Yorkshire Helicopters

Here are the concerns, in some sort of order of severity:

  1. The form isn’t wrapped in a tag - which would help screen readers understand the page and which fields are grouped together

  2. There’s no way to create a “label” tag for the text linked to an input. helps screen readers understand the context of form inputs

  3. Radio buttons have no focus styles at all - making it impossible for someone navigating using a keyboard to know which value they are focussed on. (I realise you can manipulate the radio buttons by tabbing and space, but you can’t SEE where you are)

  4. There is no way to create a button of type=submit - so screen readers and speech-driven tech can’t determine which button actually submits the form

4 b) Also, buttons have no focus styles

  1. Text inut “invalid” styling takes precedent over “focussed” making it hard to navigate invalid fields

  2. Required fields are missing the “required” attribute

  3. The hovered/pressed style for radio buttons seems to affect the whole group

  4. Ideally, radio button groups would be surrounded by a fieldset, and the label for that fieldset would be a legend. Luckily, each item does use a label tag

  5. Given we can assign our own ID attributes to elements, is there an easy way we could add other markup, like “aria-describedby”

If anyone has any comments or suggestions on any of these, I would greatly appreciate it.

If not, or they can at least be confirmed as true, and it’s not just me missing options, then I can raise them as change requests

Thanks

Ryan

2

I don’t think Bubble exposes these attributes to all of the input types. I think it would be great for Bubble to update that for accessibility requirements. Definitely submit a feature request. :blush:

3

You are correct. I’ve got plugins focused on accessibility that solve these issues

1 Like
4

@boston85719 Out of interest, did you create components to replace individual field types, or create generic ones to “find and fix” on a page?

Also, anything you can share? Thanks

5

I have done a couple of different things…for some, like checkbox, I built a plugin that is an element. This is part of a larger effort in building plugins for most elements that lack essential features and/or some really nice to have features that expand an applications functionality.

Some other things I’ve done is created plugin to detect focus and expose which elements are currently in focus and other plugins for altering design of existing bubble elements.

The choices I’m making depend on the level of distress an existing bubble plugin element is in.

I’ll be releasing plugins to the marketplace in the next 6 months, so at the moment nothing that is public.

1 Like
6

Added to the ideas board: Suggest a Feature on the Bubble Ideaboard | Bubble