Hello, we are trying to make our site more accessible and several all of the VIEWS created by Toolset are being flagged up with many issues, using the WAVE browser extension.
A common one seems to be missing form labels.
How do I add these please?
I've seen another ticket regarding this but I didn't quite understand the solution.
https://toolset.com/forums/topic/toolset-views-text-search-missing-form-label-error-using-wave/
Here's a simple example from this page:
hidden link
This view was built in the old version, so the code is
[wpv-filter-start hide="false"][wpv-filter-controls]<div id="nwsb-only">[wpml-string context="View event-parametric"]Search: [/wpml-string]<br /></div><br clear="all" />
<div id="eventsearchbox">[wpv-filter-search-box output="bootstrap"]</div>
Please also bear in mind that the site uses WPML so any solution for adding a form label will need to be translatable.
Many thanks!
Alan
Hi Alan,
Welcome to Toolset support. The default Shortcode that generates the Label tag in HTML does not have accessibility features. As you have legacy views with code availability, you can add your label tag yourself as HTML.
Something like this:
<label class="screen-reader-text">
[wpml-string context="View event-parametric"]Search:[/wpml-string]
[wpv-filter-search-box output="bootstrap"]
</label>
But you need to adapt the suggested code above to your use case.
So basically, whenever you see a warning, you try to generate the HTML by hardcoding it.
Thanks.
I'm not having much luck with that. ChatGPT thinks it might be something to do with all my extra divs.
Anyway, I might rebuild my views in the newer block editor.
I tried to make a basic view using the block editor and the same sort of accessibility errors are flagged up by the WAVE accessibility tool. screenshot example attached.
How would I go about ensuring that views made using the block editor are accessible?
thanks
Alan
Hi Alan,
Toolset does not have such attributes integrated in the blocks editor. I do suggest that you use the legacy mode, as you will have access to the HTML that you add and there you will be able to add whatever needed yourself.
Other than that I do not have other suggestions.
Thanks.
