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

Question

我想解决通过 WAVE 验证测试时出现的错误。该错误出现在 WordPress CMS 的 CF7 中。 WAVE 检查工具导出此“缺少表单标签，表单控件没有相应的标签。”。

我的联系表单代码是:

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