联系表 7 + 辅助功能

Question

我遇到一个错误需要你的帮助。我希望我的网站 (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>

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

Answer 1

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

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

我的建议是聘请一个可以进入这些文件的网络开发人员。

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

不好的例子，缺少标签：

<input type="text">

好例子：

<label for="nameField">Insert name</label><input id="namefield" type="text">

因此，您需要有一个标签，并且该标签还需要通过指向输入的

for

的

id

属性与实际输入字段连接。

Answer 2

就像@Manuel Cheta 说的那样，您需要用 label 标签包装您的输入字段。例如：

<label for="**your-email**">[text* your-email **id:your-email** placeholder "your email"]</label>

但是你还需要加上这个输入框的id。 虽然，Contact form 7 直接支持 HTML。所以，如果你有这样的代码：

<div>
<p><input name="your-email" aria-label="Your Email" /></p>
<p><input name="your-name" aria-label="Your Name" /></p>
</div>

你也可以有 aria-label="Email" 属性。这对我也很好用！

Answer 3

您可以在输入字段中执行此操作，您可以将其更改为：

<input title="your-email"

它会起作用。