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
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.
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.
Try this;
Select the DIV classed margin-bottom which is surrounding your checkboxes;
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;
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
I am not a developer and won’t touch js. How can this issue be resolved within webflow otherwise?
You can hire a dev to build the feature for you.
Or not, as webflow is supposed to be no-code. As a designer, I should be able to make any webflow site accessible.
My Tesla can drive me to dinner. That’s nocode.
It cannot drive me from Seattle to Taiwan. That’s nocode limitation. I accept that limitation because any system that is designed to make things easier has massive engineering tradeoffs- that the complexity doesn’t go away, it’s just backstage behind a curtain - and it’s difficult to manage because the tech debt growth is exponential.
It will benefit you to think of “nocode” as a very small box of legos that lets you build simple things fast. It’s perfect for a narrow range of applications that are lego-shaped. But the moment you want to build something that’s not lego-shaped, you’re out of luck.
So from Webflow’s perspective it has to carefully choose where to add that complexity and tech debt.
The best way for you to help evolve that in a way you think would benefit Webflow users is to use the Wishlist. Add your item and share it here. I’d vote for it.
In the meanwhile, I’d use code to build what my clients want now.
Including fieldset and legend with forms is already a request on the webflow wishlist. Thank you in advance for voting!
Accessibility is the right thing to do whether my clients want it or not, and it’s the law in many cases. Anyone designing/building websites and/or digital documents should be learning about and implementing it the best they can. I do believe that webflow cares about accessibility and is making strides in improving the ease of making accessible sites without code. Being the leaders in no-code accessibilty will further set them apart from the others. They are truly changing how the web is made. Per webflow’s mission and the H1 on their home page, they don’t want me to think of them like you suggest. Here is webflow’s accessibility statement for anyone interested.
Hahaha, ok I think that’s a fair argument about the marketing, this part made me laugh.
In my clients’ projects the engineering challenge is 100% equivalent to building a site from scratch, but my team likes the designer. Once you get to know its strengths & weaknesses well, you can have a lot of versatility (sometimes too much), without having to edit templates. That leads to a better looking end product that matches specific client needs better.
But that tradeoff is not free. “nocode” environments make the ground flatter near you, but the walls are much steeper just outside of that flat area, so if you need to do something the framework does not natively support, it’s not one bit easier.
Realistically, you have three choices on this. Accept that you’ll need to use code to add the features that are not available natively yet. Wait, maybe years. Or switch platforms for your projects that need better accessibility.
There’s no better platform for my particular needs and no-code accessibility at the moment. I def plan to stick it out with webflow as they have an accessibility roadmap in place and I think they will provide what I need soon, not years from now. Webflow allows me to build sites for clients who don’t have the budgets for engineering teams and it gives me the ability to design pixel perfect, which despite extensive design systems and documentation, so many devs just don’t make happen. I do use little bits of code here and there. So far the sites I’ve built with webflow are more accessible than the average site, but I need them be more accessible.
Accessibilty best practice is to use HTML first and never use other tech, like ARIA or js, when there is a way to accomplish the task with HTML, so that’s why I’m here looking to see how I can apply and without going too deep.
