Question

我正在尝试通过使其更易于访问并符合WCAG 2.0（AA级）指南来改进我的网站。这是一个使用Contact Form 7创建表单的Wordpress站点。默认情况下，“联系表单7”不会向其label元素添加input。将label完整的for属性手动添加到input类型为“text”的内容非常简单：

<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”的补充插件，所以我安装并尝试了。但是，据我所知，这根本不涉及单选按钮。

任何人都可以帮我弄清楚如何将label包含for属性的$tag_id = $tag->getAttribute('id');添加到我使用联系表格7创建的每个单选按钮。

谢谢！

爵

Answer 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>

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

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

1 个答案: