Don't Skip the Form Labels! Here's Why They're Key for Accessibility

I'm pretty sure most days I interact with forms on websites. Just earlier, I was about to browse an online clothing store when within seconds a pop-up appeared telling me to sign up for their newsletter by inputting my email address for 10% off my first order. Nowadays, they are everywhere. Whether we are making an online purchase, registering a new account or signing into something, we are asked to add our details to the appropriate form fields all the time.

It's easy when we know what we are being asked to put into which field. Now imagine every field is blank and you are left to guess what needs to go where. This is what happens when someone is using a screen reader and the form fields are not labelled. It sadly means mistakes will be made, the user will be left feeling frustrated and more often than not will leave the site.

So, how do we ensure that all forms are accessible to everyone? By adding labels to every form field, including text input fields, number fields, drop-down menus, a list of radio buttons, and checkboxes. What should these labels say? They require a short and meaningful description that indicates the value associated with the field.

These labels enable technologies to effectively communicate the purpose and function of each form element to its user, thereby making the web more accessible. Not only do form labels benefit screenreader users, but also people with cognitive disabilities such as dyslexia, autism and ADHD as it helps with their ability to process the information in front of them more easily.

Now let's get technical. If you have a website and want to ensure that all your forms are labelled correctly, then you need to use the HTML <label> element within each <form> element and explicitly connect them by using 'for' and 'id' attributes.

Here's an example to explain:

1. <label for=”search”>Search Happy Days Accessibility</label>
2. <input type=”text” id=”search” name=”q”/>

This code tells the user that this field is a search control. This simple and clear label provides screen reader users with the information they need to interact with this feature on the website.

As well as labelling forms, it is important to also ensure that all forms handle errors correctly with clear error messages and clear focus so the user can see which field they are on. After inputting all of this information, it is also vital that there is clear confirmation of form submission for the user. Nothing is more frustrating after you've spent all that time filling in each field correctly, than hitting that submit button and you have no idea whether it's been submitted or not!