Web designers run for cover when they are assigned the work to design forms. The bad reputation of forms has arisen because of two reasons. The elements associated with a form are usually drawn from the operating system on which the web page is hosted. So designers are having a tough time styling these elements. Forms play a vital role as far as the functionality of a website is concerned. You will find more often forms being used as search boxes, shopping cart checkouts or inquiry forms. So they need to run as easily and smoothly as possible to live up to the expectations of customers.

Before deciding on a form layout, you need to write some really strong markup. It enables us to find a basic structure to which some style can be applied. The forms present on your website must be greatly accessible. You need to spend considerable amount of time on this accessibility feature of forms. The forms involve some of the complicated interactions taken place on a web page. Most of the time, you can see these interactions which are presented through visual means, i.e. through the closeness of a form element to its label or grouping of related background and border colors. But users taking the assistance of screen readers will not be able to view these visual signs. So to build accessible forms, you need to supply explanatory labeling of all the sections and input elements. Here, label and legend are two important elements of a form.

The styling and labeling of a form element go through a particular pattern. It includes the element in the form itself, a label for the element which is textual in nature and a connection between the element and its label. The connection can be done through visual grouping, visual indicator or visual alignment.

People with visual impairment are simply unable to witness the connection established by a web page between a form element and its label. To help their cause, the ‘label’ element can be put to use. It is a special type of element employed on a form element that enables its label to be semantically linked to the element. So screen readers can be able to read out the textual description when they stumble upon it.

The use of the ‘label’ element begins with enclosing the textual description within the ‘label’ tags. The ‘label’ tag has a ‘for’ attribute which accepts a value equal to the id of that form element to be connected.

<label for=”firstName”>First name</label>
<input id=”firstName” name=”firstName” type=”text” />

When a screen reader bumps into the firstname field, it reads out “First Name” to make the user aware of the fact that he or she needs to enter the first name there. For this, the ‘label’ needs not be in close proximity to the form element or arranged in a particular sequence. There is a condition to that. The label’s for attribute must contain a valid reference, so that the relationship will continue to be understood. In order to create an appropriate semantic meaning, you need to place the ‘label’ exactly prior to the form element in the source order. A ‘label’ element can be employed on any form element that doesn’t contain any descriptive text automatically such as text areas, text boxes, radio buttons, select boxes and check boxes.

Tags: Form Accessibility with CSS