title: Add label text to radio buttons in Wordpress site using Contact Form 7
body: <p>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 <code>label</code> to its <code>input</code> elements. It's easy enough to manually add a <code>label</code> complete with a <code>for</code> attribute to <code>input</code> of type "text":</p>
  
  <pre><code>&lt;label for="address"&gt;Street Address*&lt;/label&gt;&lt;br /&gt;
  [text* Address1 id:address]
  </code></pre>
  
  <p>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 <code>label</code> tag -- it doesn't include the <code>for</code> attribute. Here's the code that I've tried:</p>
  
  <pre><code>[radio RelativesWork use_label_element "Yes" "No"]
  </code></pre>
  
  <p>That shortcode generates the following HTML. Note that the ID I added with the shortcode is put on the wrapper <code>span</code>, and that the each <code>label</code> does not contain the <code>for</code> attribute.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="wpcf7-form-control-wrap RelativesWork"&gt;
    &lt;span class="wpcf7-form-control wpcf7-radio" id="relatives"&gt;
      &lt;span class="wpcf7-list-item first"&gt;
        &lt;label&gt;
          &lt;input type="radio" name="RelativesWork" value="Yes" /&gt;&amp;nbsp;
          &lt;span class="wpcf7-list-item-label"&gt;Yes&lt;/span&gt;
        &lt;/label&gt;
      &lt;/span&gt;
      &lt;span class="wpcf7-list-item last"&gt;
        &lt;label&gt;
          &lt;input type="radio" name="RelativesWork" value="No" /&gt;&amp;nbsp;
          &lt;span class="wpcf7-list-item-label"&gt;No&lt;/span&gt;
        &lt;/label&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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. </p>
  
  <p>Can anyone help me figure out how to add a <code>label</code> that contains the <code>for</code> attribute to each radio button I create with Contact Form 7. </p>
  
  <p>Thanks!</p>
  
  <p>Jenn</p>