Writing accessible HTML forms

We fill a lot of forms on the web on daily basis – may it be for a bank transaction, booking of travel, shopping etc. Often we see forms looks very beautiful but in reality, most of them are not beautiful due to lack of associated labels. Oh! wait, we know, you are about to shown on us and say that you have never seen a form just with input elements and without text labels, you are right, but did you ever see a form with a text browser or with a screen reader. Here is an exercise for you before reading this article:

1. Download NVDA Screen reader and install on your Microsoft Windows machine
2. Open your web browser perhaps Mozilla Firefox and visit the APSRTC‘s New Registration Form and you should see a beautiful form like below.

   

3. Press “F” key on your keyboard to reach to the first form field and then navigate the form using “tab” key; ideally you should hear something like “Username:edit, Password: password edit, Confirm password: password edit, Personal information, Firstname:edit” and so on. But you will hear something like “Table with 16 rows and 2 columns, row two, column two edit” and so on… and here is how this form looks on a text browser:
   

Now, let’s see what are the issues with above form. Firstly, screen reader is reading number of rows and columns, since the APSRT did not use CSS to control the layout of the form but have used <table> attributes to control the layout. Well, screen readers has the capability to turn off reading the layout tables but some users may not be aware of this option. Also, it is not recommended to use the table attributes to control the layout.

Second problem is that screen reader is unable to read the labels of the form since associated label “for” and “id” attributes are missing. Besides screen readers and text browsers, even search engines treat those form fields with no labels. Here are some ground rules to make accessible forms.

• Provide necessary instructions before the form states
• Do not indicate mandatory fields in form of color alone
• If a form field is a required field, inform the same to the user along with form label
• Provide associate labels to the form fields
• Use appropriate “fieldset” and “legend” attributes for check boxes and radio buttons
• If you opt to use image button, remember to provide alternate text
• If the form is dynamic, use ARIA labels, roles and states as appropriate

Related links:

• Creating Accessible forms – a WebAIM article
• Button Control: Using the Button ARIA Plug-in
• WAI – ARIA Live regions
• Easy Tip #2: aria-labelledby and aria-describedby