What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Label element for input fields?Asked by sandrabergman on March 14, 2014 at 12:59 PM
Hi - We need our online forms to meet WCAG 2.0 Level AA. How do I make each input field on any form use a label element that works for people using assistive technologies? Can this happen automatically when I create the form so I don't have to manually define it for each field?
Example Code from WCAG H44: Using label elements to associate text labels with form controls:<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />
Let me please inform you that we do add labels to the inputs. You can click on a Text Box label to check it out:
However, it is a bit different for fields with multiple inputs (Full Name, Address, etc.), you will need to click on the Sub Labels in order to see it in action:
If you need any further assistance, please let us know.
Thank you for the screenshots. The labels currently used are not meaningful. Our site was audited recently for accessibility and our JotForms failed. I've copied the audit recommendation below in order to meet WCAG 2.0 requirements. Is this something that can be accommodated?
Ensure that all cues for filling out the form (mandatory fields, help boxes, error messages, and so on) are available to users of assistive technology
Use HTML markup to associate the controls explicitly with their labels.
Check that there is a LABEL tag that identifies the purpose of the control before the input element Check that the FOR attribute of the label element matches the ID of the input element
Group form controls with FIELDSET and LEGEND
Check if there are groups of related form controls. If there are related form controls, they should be grouped with the FIELDSET with a label (LEGEND tag) labeling the group.
Use the title attribute to label form controls when the visual design cannot accommodate the label (for example, if there is no text on the screen that can be identified as a label) or where it might be confusing to display a label.
Identify each form control that is not associated with a label element Check that the control has a title attribute Check that the title attribute identifies the purpose of the control
If you need direct labels for your fields it is better to avoid using custom fields with multiple inputs (e.g. Matrix, Address, Phone, etc.).
Example Code from WCAG H44: Using label elements to associate text labels with form controls:
<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />
This can be accomplished with Text Boxes. Use a separate Text Box for each field:
The same goes for a Phone field, you can use a Text Box with an Input Mask instead.
We do not have built-in Fieldset element support, but this is something that we might be able to add. If you are interested in this Fieldsets and Legends support, please let us know, so we will be able to forward a request to our Development Team.
In addition to that, users have full control over how the form is represented on their page. If further updates are needed to meet compliance, you can always download the source code and update it. More information can be found here:
We hope these solutions will meet your requirements, and please let us know if you have further questions.