[Resolved] Accessibility of form labels on input and select controls

[Author]

Posts

[Chris]

This relates to a previous topic, https://toolset.com/forums/topic/cant-associate-a-form-label-with-a-form-control/

Thanks for implementing a solution for radio buttons and checkboxes.

I still have a problem with input fields and select dropdowns when filtering a View.

For example, the Views code

<div class="form-group">
<label>[wpml-string context="wpv-views"]Language[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="language" type="select" default_label="-- select Language --" orderby="count" order="DESC" url_param="wpv-language"]
</div>

outputs as

<div class="form-group">
<label>Language</label>
<select name="wpv-language" class="js-wpv-filter-trigger form-control"><option selected="selected" value="0">-- select Language --</option><option value="english">English</option><option value="spanish">Spanish</option><option value="arabic">Arabic</option><option value="french" disabled="disabled">French</option><option value="german" disabled="disabled">German</option></select>
</div>

This type of form control still throws an accessibility error because the label has been added manually and cannot be associated with the <select> control.

It would need markup like this, from hidden link

<label for="favcity">Choose your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
</select>

I can remove the label, switch the type in the shortcode to select and add a <fieldset> and <legend> and this is what I get:

<div class="form-group">
<fieldset>
<legend>Language</legend>
<div class="checkbox"><label for="language-english"><input type="checkbox" id="language-english" class="js-wpv-filter-trigger" name="wpv-language[]" value="english">English</label></div><div class="checkbox"><label for="language-spanish"><input type="checkbox" id="language-spanish" class="js-wpv-filter-trigger" name="wpv-language[]" value="spanish">Spanish</label></div><div class="checkbox"><label for="language-arabic"><input type="checkbox" id="language-arabic" class="js-wpv-filter-trigger" name="wpv-language[]" value="arabic">Arabic</label></div>
</fieldset>
</div>

Each checkbox has its own label and id with the same value e.g. language-english. Great!

This markup is accessible, but I don't want to have a form with all checkboxes if there's a lot of options.

What I want is a select box with a single label and id which are associated by the same value. Something like:

<label for="language">Language</label>
<select id="language" name="select">
...
</select>

The same goes for input controls, i.e.

<label for="wpv_post_search">Search</label>
<input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed form-control" placeholder="Enter text to search for" id="wpv_post_search">

In Beda's reply on the thread on 28 September 2017 he noted this as a feature request, but it's now 6 months later. It would be highly beneficial to make these accessibility enhancements for your plugin (a good selling point!)

I would love to know what progress you have made. Please can you update me?

[Christian Cox]

I don't see that our developers have come up with a good solution for this, unfortunately. Until a proper dynamic "for" attribute solution is provided, you can nest the taxonomy control shortcode inside the label tag:

<div class="form-group">
<label>[wpml-string context="wpv-views"]Language[/wpml-string]
[wpv-control-post-taxonomy taxonomy="language" type="select" default_label="-- select Language --" orderby="count" order="DESC" url_param="wpv-language"]</label>
</div>

It may require some CSS adjustment for the wrapped field, but it is valid HTML and it's more accessible.

[Chris]

Thank you. That code validates as accessible, so is an interim solution.

Will you update your blog when you have a dynamic for/id association?

[Christian Cox]

We usually include information like this in the changelog of each release, but not always directly in the blog. I will make a note in the internal ticket to update you through this forum post when progress is made on this modification.