When a user using screen reader, visits a page that has forms, the screen reader enters into this special mode called “Forms Mode”.
The screen reader tries to match the form elements with corresponding labels. Such as if you have input element (except button), the screen reader will try to find a <label> element or a title attribute. When it finds the matching label tag for the input element, it will read the input element and the label together so it will make sense to the user.
Let’s assume you have the code below:
<p>First name: <input type='text' id='fname' name='lname'></p>
As you can see we didn’t put the label tag for the text. When the screen reader hits this part; it will say “First Name” and it will say textbox, but no details about the textbox. A sighted person can visually make the connection between the First Name and the textbox; however a user who needs screen reader may not be able connect this 2 elements.
The right way to do this is :
<p><label for='fname'>First name:</label><input type='text'
What we did is to add a label for the input. The id we write for label for has to match with the id of the input element.
Now the screen reader has enough information to make a relation with the input element and what this is for. When the screen reader hits this place, now it will say input text for first name, and the user will understand the form elements better.
What if we can’t put a label for the form element? Such as we have a 3 textboxes that will make up a date. Below is the code:
Date of Birth: <input type='text' id='month' name='month' maxlength='2'>
<input type='text' id='day' name='day' maxlength='2'>
<input type='text' id='year' name='year' maxlength='4'>
We can not have 3 labels for each of the input element, as it will look ugly, but also we want to make this form accessible to all users. So what do we do? Now we can use title attribute of the form element to help the screen reader. Here is the fixed form:
Date of Birth:<input type='text' id='month' name='month' maxlength='2'
title='Date of Birth Month'/>
<input type='text' id='day' name='day' maxlength='2'
title='Date of Birth Day'/>
<input type='text' id='year' name='year' maxlength='4'
title='Date of Birth Year'/>
This time we put title attribute to the input elements, to help the screen reader understanding what these input elements are about. You should prefer label for whenever possible and use titles if labels are not applicable. There is also a nice benefit when you use labels, whenever the user clicks on the label text, the browser will move the cursor to the corresponding form element, think how useful this is with checkboxes.
Another things to be watch out when making forms accessible is the required fields, their location, error message etc. Assume you have a form where user can create an account for himself, and this form is asking first name, last name and email. All these 3 fields are required, and if the form fails the validation (such as the email is not valid, first name is left blank etc), you put an error message right below the form. Now when a user who uses a screen reader, fill this form, and submits the form; if he makes a mistake filling the form element or writing his email wrong, he may be confused. After the form submission the screen reader will the read form again, so user knows he is still on the filling form page, after reading the input elements, the screen reader will read the error message. The user has to listen to the form that he filled in again before he listens the error message, after listening the error message tab back into the form element to fix it. Sighted person can easily skip the form, and concentrate on the error message, however a blind person has to listen the form again. If you move the error message right above the form, now whenever the form fails to validate, user know what has failed, and can tab into the form element to fix it.
As you can see forms requires little more special attention to make it accessible however it is still pretty simple.