Week 15 Technical Service Bulletin - H44 Using label elements to associate text labels with form controls

11 Apr 2019

Helen Grimbly

Helen Grimbly, Support Lead

This week, Support Lead, Helen Grimbly is looking at adding labels to form fields, to make forms more accessible.

Form fields are used on a site to collect information about site visitors. Form fields should be labelled so that a screen reader can read back to the user what is required for each field, ensuring that users can understand, navigate and fill them in correctly.

So for example if we have a subscription form, two of the form fields may be:

<input type="text" name="name" id="fullname"> 
<input type="text" name="email" id="emailaddress">

Add labels to the above HTML, so that the screenreader can describe the form.

<label for="fullname">Name:</label> 
<input type="text" name="name" id="fullname"> 
<label for="emailaddress">Email:</label> 
<input type="text" name="email" id="emailaddress">

In Sitemorse, Accessibility actions called "Please add descriptive labels to form fields" will be raised if form labels need to be added.