Accessibility issues with the form inputs and labels

Feature Requests / Improvements
1

I don’t understand the reasonning behind Bricks forms to put a random id as the id/name of the fields…

It creates accessibility issues…

For example, if I just use the label (and of course show the labels), I have this code output:

Form label

Full name

Then, Wave gives me the error “Broken ARIA reference”, probably because the div shouldn’t have any aria-labelledby and the div references the field’s “name” while the label references the field’s ID… I’ve always referenced the field’s name on the label and not the ID… not even sure it works…

Then, if I put a value in the “Name (Attribute)” field, it gives me instead:

Form label

Full name

And I still get the error in Wave, possibly because it still references the ID, but most likely anyway because the div with aria-labelledby targets the old name of the field, which has now been changed to “name” and so the other one doesn’t even exist anymore…

I’m surprised, since Bricks is supposed to take accessibility into account…

Why not simply let us give the name and use that name for both the name and id properties (instead of that strange random id)…? It could be okay to use a random id by default, but at least allow us to change it and put meaninful names and ids.

2

I’ve looked at the Bricks form code, and it seems Bricks is adding excessive, unnecessary ARIA information to its forms. Here’s a breakdown of the issues:

image
image2357×525 115 KB

1. Incorrect Use of role="group": Each form input is wrapped in a div with role="group". This role is intended to semantically group related elements (like radio buttons, checkboxes or multiple related inputs), not individual inputs.

2. Invalid aria-labelledby: The wrapper div has an aria-labelledby attribute that points to the input’s name attribute. This setup is incorrect.

3. Redundant aria-label: Inputs have an aria-label attribute despite already having visible labels associated with them via the for attribute.

2 Likes