使用 Contact Form 7 将标签文本添加到 Wordpress 站点中的单选按钮答案

【问题标题】：Add label text to radio buttons in Wordpress site using Contact Form 7使用 Contact Form 7 将标签文本添加到 Wordpress 站点中的单选按钮
【发布时间】：2016-04-03 15:19:53
【问题描述】：

我正在努力改进我的网站，使其更易于访问并符合 WCAG 2.0（AA 级）指南。这是一个使用 Contact Form 7 创建表单的 Wordpress 站点。默认情况下，Contact Form 7 不会将 label 添加到其 input 元素中。手动将带有for 属性的label 添加到“文本”类型的input 很容易：

<label for="address">Street Address*</label><br />
[text* Address1 id:address]

但是，我无法为单选按钮执行此操作。我知道在使用 Contact Form 7 生成单选按钮标签时有一个“use_label_element”选项，但这只会生成一个空的label 标签——它不包括for 属性。这是我尝试过的代码：

[radio RelativesWork use_label_element "Yes" "No"]

该短代码生成以下 HTML。请注意，我使用短代码添加的 ID 放在包装器 span 上，并且每个 label 不包含 for 属性。

<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" />&nbsp;
        <span class="wpcf7-list-item-label">Yes</span>
      </label>
    </span>
    <span class="wpcf7-list-item last">
      <label>
        <input type="radio" name="RelativesWork" value="No" />&nbsp;
        <span class="wpcf7-list-item-label">No</span>
      </label>
    </span>
  </span>
</span>

我了解到有一个名为“Contact Form 7：Accessible Defaults”的补充插件，所以我安装并尝试了它。但是，据我所知，这根本不涉及单选按钮。

谁能帮我弄清楚如何将包含for 属性的label 添加到我使用Contact Form 7 创建的每个单选按钮中。

谢谢！

杰恩

【问题讨论】：

你能编辑你的问题并分享你的这组收音机的 CF7 代码吗？
@mevius，感谢您抽出宝贵时间提供帮助。我已经编辑了我的问题以包含代码。
您是否有理由需要for 属性？当 label 包装 input 时，它仍然将标题与控制元素相关联（正如您问题中的 sn-p 所证明的那样）。
因为当我通过 AChecker 运行我的网站时，我收到以下错误：“输入元素，“收音机”类型，标签中没有文本。” （更多信息：achecker.ca/checker/suggestion.php?id=204）
根据the spec，您所拥有的是完全有效的："label元素代表用户界面中的一个标题。标题可以与特定的表单控件相关联，称为label 元素的标签控件，可以使用 for 属性，也可以将表单控件放入 label 元素本身。"

标签： wordpress forms accessibility contact-form-7

【解决方案1】：

不，这对于 CF7 插件来说是不可能的，因为它在自定义前端表单时有几个缺点。

为了实现这一点，有 2 个选项，hack 表单加载后使用 javascript 添加id 属性到输入字段和for 属性到标签元素。请参阅此answer 以了解它是如何完成的，

<label> My radio button
       [radio amount id:amount class:amount-select default:1 "50" "100" "200" "500" "Other"]</label>
    [submit]
    <script>
       (function( $ ) {
         $(document).ready( function(){
           $('form.wpcf7-form input').each(function(){
             var span = $(this).parent('span');
             if(span){
               var idAttr = span.attr('id');
               $(this).attr('id',idAttr);
               span.attr('id','');
             }
             //or you could also do this which is even less maintenance
             var name = $(this).attr('name');
             var type = $(this).attr('type');
             switch(type){
               case 'radio':
               case 'checkbox':
                 name += '-'+$(this).attr('value');
             }
             $(this).attr('id',name);
           });
         });
       })( jQuery );
    </script>

或者你可以使用Smart Grid-layout extension for CF7插件的4.11版本（目前v4.10可用，但下一个版本将在一周内发布，测试版可以从repo下载），它将引入一个格式正确的 dynamic_checkbox 字段，但如果您正在寻找简单的是/否单选字段，那么第一个解决方案更简单。

【讨论】：