I’m trying to improve my website by making it more accessible and compliant with WCAG 2.0 (Level AA) guidelines. It’s a WordPress site that uses Contact Form 7 to create forms. By default, Contact Form 7 doesn’t add a label
to its input
elements. It’s easy enough to manually add a label
complete with a for
attribute to input
of type “text”:
<label for="address">Street Address*</label><br />
[text* Address1 id:address]
However, I’m having trouble doing this for radio buttons. I know that there’s an option to “use_label_element” when generating a radio button tag with Contact Form 7, however this just generates an empty label
tag — it doesn’t include the for
attribute. Here’s the code that I’ve tried:
[radio RelativesWork use_label_element "Yes" "No"]
That shortcode generates the following HTML. Note that the ID I added with the shortcode is put on the wrapper span
, and that the each label
does not contain the for
attribute.
<span class="wpcf7-form-control-wrap RelativesWork">
<span class="wpcf7-form-control wpcf7-radio" id="relatives">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="RelativesWork" value="Yes" />
<span class="wpcf7-list-item-label">Yes</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="RelativesWork" value="No" />
<span class="wpcf7-list-item-label">No</span>
</label>
</span>
</span>
</span>
I learned that there’s a supplemental plugin called “Contact Form 7: Accessible Defaults”, so I installed and tried that. However, as far as I can tell, that doesn’t address radio buttons at all.
Can anyone help me figure out how to add a label
that contains the for
attribute to each radio button I create with Contact Form 7.
Thanks!
Jenn
No, this is not possible with CF7 plugin as is, as it has several shortcomings such as this when it comes to customising the front-end form.
To achieve this, there are 2 options, hack the form using javascript once it is loaded to add an
id
attribute to the input field and afor
attribute to the label element. See this answer to see how it is done,Or you can use version 4.11 of the Smart Grid-layout extension for CF7 plugin (currently v4.10 is available, but the next version will be out in a week, a beta version can be downloaded from the repo) which will introduce a dynamic_checkbox field that is properly formatted, although if you are looking for simple yes/no radio fields, then the first solution is simpler.