Missing Label Form - accessibility

[Felicity_Hay]

Summary

I am trying to improve the accessibility of our website. Using WAVE, it reports an error of ‘Missing Label Form’. This is on our side bar enquiry. How can I fix this?

[[!sideBarEnquiry]]

Enquire about this

<input type="email" name="email" placeholder="Email" class="input" value="[[+fields.email:default=``]]">
<textarea name="message" placeholder="Message" class="input" value="[[+fields.message:default=``]]"></textarea>
[[+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]
 <button type="submit" name="submit" class="btn quaternary">SUBMIT</button>

Thank you.

[halftrainedharry]

This “error” probably means that you should add label tags (<label>) for your input fields.

For example, add an id attribute to the email <input> field and then add a <label> tag with a for attribute to reference it:

<label for="email">E-Mail</label>
<input id="email" type="email" name="email" ...>
...

[Felicity_Hay]

Hi HalfTrainedHarry,

That is really helpful. Thank you. But I am still doing something wrong. One of the labels I have added now states ‘Orphaned form label’ and the other two still say ‘missing form label’. Any idea why?

Thank you.

`[[!sideBarEnquiry]]
<h4>Enquire about this</h4>
<form method="post" action="[[~[[*id]]]]">
    <input type="hidden" id="nospam" name="nospam">
    <input type="hidden" name="sendto" value="[[*SidebarEnquirySendTo]]">
    <input type="hidden" name="form" value="[[*pagetitle]]">
    <label for="text">Name</label> <input id="name" type="text" name="name" placeholder="Name" class="input" value="[[+fields.name:default=``]]">
    <label for="email">Email</label> <input id="Email" type="email" name="email" placeholder="Email" class="input" value="[[+fields.email:default=``]]">
    <label for="message"><textarea id="message" name="message" placeholder="Message" class="input" value="[[+fields.message:default=``]]"></textarea>
    [[+formit.recaptcha_html]]
    [[!+fi.error.recaptcha]]
     <button type="submit" name="submit" label="Submit" class="btn quaternary">SUBMIT</button>
</form>

[halftrainedharry]

@Felicity_Hay

<label for="text">Name</label> <input id="name"

Make sure that the “for” attribute of the label exactly corresponds to the “id” attribute of the field.
E.g. <label for="text"> → “text” is wrong here.

[Felicity_Hay]

That was super helpful. I spotted the other error too - a capital where it should have been lowercase. All sorted. Thank you so so much.