联系表格 7 + 可访问性

Posted 2023-03-24

【中文标题】联系表格 7 + 可访问性

【英文标题】：Contact form 7 + accessibility

【发布时间】：2022-01-09 20:01:51

【问题描述】：

我遇到了一个错误，需要您的帮助。我希望我的网站（eshop）通过 WCAG AA 可访问性测试（webaim、achecker、w3validator）。出现了很多错误，由于没有任何工具可以自动修复它，也没有像 UserWay 那样在加载时临时修复，我正在一一纠正。

我使用的插件之一是 Contact Forms 7。在继续解决这个问题之前，我必须提到我使用了一个来自 envato 市场的主题，名为 Metro、Elementor、Woocommerce、WPML。 wave.webaim.org 的报告发现以下页面有错误 https://benetialingerie.gr/contact/?lang=en（及其翻译）。 错误是： 缺少表单标签 表单控件没有相应的标签。 您可以在代码下方找到。

<div class=”metro-contact-form” aria-label=”contact form”>
<h3 class=”rtin-title” aria-label=”title area”>Send Us a Message</h3>
<div class=”row” aria-label=”name area”><div class=”col-md-6 form-group”>[text* your-name class:form-control placeholder “Name *”]</div><div class=”col-md-6 form-group”>[email* your-email class:form-control placeholder “Email *”]</div></div>
<div class=”row” aria-label=”subject area”><div class=”col-md-6 form-group”>[text* your-subject class:form-control placeholder “Subject *”]</div><div class=”col-md-6 form-group”>[tel your-phone class:form-control placeholder “Phone”]</div></div>
<div class=”form-group” aria-label=”text area”>[textarea* your-message class:form-control placeholder “Message *”]</div>
<div class=”form-group” aria-label=”Submit button”>[submit “Submit”]</div>
[response]
</div>

据我所知，代码必须包含元素。由于我不熟悉编码并且我的开发技能有限，请您帮帮我吗？有什么建议吗？ 提前致谢。 尼科斯

【问题讨论】：

我不熟悉您提到的内容，但我猜您的表单中缺少<label>。更多信息：developer.mozilla.org/en-US/docs/Web/html/Element/label

【参考方案1】：

您显示的代码是人们需要插入到其 WordPress 页面中以呈现表单的小部件代码。

这不是生成表单的实际代码，因为该代码位于插件本身的 php 文件中。

我的建议是聘请一位可以查看这些文件的网络开发人员。

在可访问性方面，您需要确保每个输入字段都有一个标签（具体适用于此）。

错误示例，缺少标签：<input type="text">

很好的例子：<label for="nameField">Insert name</label><input id="namefield" type="text">

因此，您需要有一个标签，并且该标签还需要通过指向输入的id 的for 属性与实际输入字段连接。