如何使用 WAVE 可访问性报告解决此标签问题？

Question

我想解决通过 WAVE 验证测试的错误。错误在WordPress CMS 的CF7 中。 WAVE 检查工具导出此 "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

使用 use_label_element 简码，Contact Form 7 无法正常运行。

这个已经坏了很久了

而是像您对表单的其余部分所做的那样，添加一个关联标签，并使用 id:enquiry-type 和您在所有其他字段中使用的关联 for="enquiry-type" 方法。

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

标签还可以帮助有认知障碍和焦虑症的人，因此标签应该可见并位于输入上方，以便他们知道他们正在选择/已经选择了什么。

视觉上隐藏 class（屏幕 reader 仅 class）- 在表单等上谨慎使用

.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 */
}