Passer la navigation

[En attente du retour de l'utilisateur] Accessibility – missing form labels reported by WAVE tool

This support ticket is created Il y a 5 days, 14 hours. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Ce sujet contient 1 reply, a 1 voices.

Dernière mise à jour par Christopher Amirian Il y a 4 days, 8 hours.

Assisté par: Christopher Amirian.

Auteur
Publications
#2835196

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:
lien caché

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

#2835471

Christopher Amirian
Supporter

Les langues: Anglais (English )

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.