[Resolved] Views search form triggers missing form label error on WAVE

[Author]

Posts

[simonF-5]

Is there a way to add a label to a views search form? I'm trying to optimise my page for accessibility, and WAVE keeps telling me every search box (element with js-wpv-filter-trigger class) I have is missing a label. I tried to add a label to the shortcode, but this doesn't work (e.g. [wpv-filter-search-box class="search-box" label="search"] - the label value doesn't actually appear when you inspect the page).

Any ideas on how this can be solved?

Thanks!

[Beda]

Labels are inserted automatically in Custom Search Filters if you use the GUI.
It will look like this:

<div class="form-group">
	<label>[wpml-string context="wpv-views"]Categories[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="category" type="select" url_param="wpv-category"]
</div>

As you see the label is there.

In the old legacy output which you can as well still choose when you insert the Filters the output looks like:

[wpml-string context="wpv-views"]Categories[/wpml-string]
[wpv-control-post-taxonomy taxonomy="category" type="select" url_param="wpv-category" output="legacy"]

Here the label is omitted, as you can see.

Eventually, this is the issue you face?

[simonF-5]

Thanks for the reply!

This doesn't seem to work. I have the following code:

<div class="search-cat">
<label>[wpml-string context="wpv-views"]Search in categories:[/wpml-string]</label> 
[wpv-control taxonomy="category" url_param="wpv-category" type="select" default_label="Any" taxonomy_orderby="term_group"]
</div>

I am still getting the same error on the actual category box, and now also an error on the text 'Search in categories', saying 'Orphaned form label'

[Luo Yang]

Hello,

What is the "WAVE" you talking about?

Please describe detail steps to duplicate same problem:
an error on the text 'Search in categories', saying 'Orphaned form label'
if it needs other plugin/theme, please provide a downloadable URL for it.

[simonF-5]

It's the Web Accessibility Evaluation Tool hidden link

See the site analysed in Wave here: hidden link (note - might need to be loaded a couple times, my draft page is on a crap server)

The errors I'm referring to are the 'Missing Form Label' ones.

This shouldn't require any other plugins. Basically, adding a label to the View code (as shown in the code in my previous post) doesn't actually add a label to the output code which is used by accessibility tools such as screen readers. WAVE detects this and displays it as an error.

Thank you for your help!!!

[Luo Yang]

Thanks for the details, please try to use tag <label>...</label> to wrap the Views shortcode, and test again, for example:

<div class="search-cat">
<label>[wpml-string context="wpv-views"]Search in categories:[/wpml-string]
[wpv-control taxonomy="category" url_param="wpv-category" type="select" default_label="Any" taxonomy_orderby="term_group"]</label> 
</div>

More help:
hidden link

[simonF-5]

Thank you! This works well, it just has to be both shortcodes that are within the <label>. Brilliant!

[Luo Yang]

You are welcome