Question

我想解决通过WAVE验证测试时出现的错误。错误出在WordPress CMS的CF7中。 WAVE Check工具将导出此"Missing form label A form control does not have a corresponding label."。

我的联系表代码为：

<div class="form-send-cell">
<label for="your-name">Name</label>
[text* class:input-send your-name id:your-name]
</div>
<div class="form-send-cell">
<label for="your-email">E-mail</label>
[email* class:input-send your-email id:your-email]
</div>
<div class="form-send-cell">
<label for="your-subject">Subject</label>
[text* class:input-send your-subject id:your-subject]
</div>
<div class="form-send-cell">
<label for="your-message">Your Message</label>
[textarea* class:input-send your-message id:your-message]
[select* menu-890 use_label_element "General Inquiry" "Commerce" "Accounting"]
</div>

<div class="submit-button">
[submit "send"]<i class="send" aria-hidden="true"></i>
</div>

Answer 1

联系表单7不能像您期望的那样使用use_label_element短代码。

这个问题很久了。

请按照与其余表单相同的方式进行操作，并添加一个关联的标签，并将id:enquiry-type与您在所有其他字段中使用的关联的for="enquiry-type"方法一起使用。

如果您尝试为select使用不可见的标签，则可以使用视觉上隐藏的类（底部为CSS），但如果这样做，请重新考虑。

标签还可以帮助认知障碍和焦虑症患者，因此应该可见并位于输入上方，以便他们知道自己正在选择/选择的内容。

视觉上隐藏的类（仅限屏幕阅读器的类）-谨慎使用表格等。

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

如何使用WAVE辅助功能报告解决此标签问题？

1 个答案:

视觉上隐藏的类（仅限屏幕阅读器的类）-谨慎使用表格等。