Add fieldset and legend for grouping related form inputs using JS

Community resources General
#1

Hi all!

I’m getting an accessibility error from a third party software I’m using for one of my websites. It’s a known issue that Webflow doesn’t allow users to implement and tags for input fields within forms natively within form or input field settings, but has anyone found a way to do this with custom JS?

Best,

Nick

EDIT: read only link - Webflow - Pear Deck

#2

JS/jQuery can easily create new elements, group your form fields, etc- however it may not eliminate your accessibility error if that site doesn’t run your scripts.

What structures are you trying to create, and where?

Best to share a read-only link to your designer project, and a detailed description of how you’re trying to change your form HTML.

#3

Hi Michael, thanks for the reply! I just updated my post to include the read only link - essentially I have two collections that are sorting data from the ‘Decks’ collection.

In the panel on the left I’m sorting through the names of the ‘Deck Categories’ and ‘Deck Tags’ - these checkboxes are generated via the names of items in each the ‘Deck Categories’ and ‘Deck Tags’ collections.

I’m trying to create two groups for the checkboxes, one for the Categories, and another for the Decks, that would be identifiable with user assisting technologies for accessibility.

#4

Try this;

Select the DIV classed margin-bottom which is surrounding your checkboxes;

image

Add a custom attribute to that, we’ll call it fieldset = Filter Category.
Use whatever accessible text you want there in place of “Filter Category”

Do the same things for your Tags set of fields, and choose the accessible text for that as well.

Add this script into your /BODY custom code for the page;

<script>
$(function() {
  
  $("[fieldset]").each(function() {
    $(this).wrap("<fieldset></fieldset>")
      .parent()
      .prepend(`<legend>${$(this).attr("fieldset")}</legend>`);
  });
   
});
</script>

What this does is look for each element with the custom attribute fieldset, and then wraps it in a <fieldset> element with a <legend> for accessibility.

I used the w3’s WAI accessibility guide for this;

1 Like
#5

This worked perfectly, thanks Michael!

I added the class name I needed to the for styling on the page and removed the text label that was now redundant after the tag loaded to the page.

I’m no longer seeing this issue within my accessibility software either. Issue resolved!

I’m seeing another issue on this page regarding the aria labels for each of the checkboxes, I’m going to break that out into another community post and I’ll drop the link to that thread here: Support Request for CMS Filtering Accessibility by adding dynamic Aria labels and name tags to checkboxes

All the best