Designing Accessible and Usable Forms

Online forms are becoming an integral part of any government website and it is important that they are dealt with care as poorly designed forms without proper instructions will cause the user to commit mistakes and finally put him off the activity.

It is important to know that the websites are being used by people of various age groups, literacy and backgrounds. For this reason in any web based activity that requires user input there are bound to be errors. This is primarily because:

• People tend to overlook instructions
• People may not understand the instructions
• People may commit errors while inputting the information

Therefore an online form must be designed to minimize errors and must have proper error handling facilities.

• Labels and instructions MUST be provided when content requires user input

Basic instructions for filing up a form must be given at the start of the form. Most common is the identification of mandatory fields in a form. If all the fields of the form are mandatory it may be pointed out at the beginning of the form. If the user needs to upload any documents with the submission of the form the same may be pointed out at the beginning. Contextual help may be provided for filling up certain fields. For example in fields that require input in a particular format like date or password it may be pointed out along with the field. Input fields must have proper text labels and these must be associated with the input field using the html label tag.

• If an input error is automatically detected, the error MUST be described to the user in text

It is important to describe the error to the user and how to rectify it or the possible causes of that error. Multiple errors can be highlighted as a list. Also just identifying the error with a graphical sign say a red encircled cross will not be accessible to screen readers. When multiple errors are pointed out at the top of the form it is helpful to highlight the fields associated with them with colour.

• It MUST be ensured that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported

The JavaScript contained in a website’s online form is only functional if the page is accessed via a browser that is able to interpret it. That is, the browser has to support (or enable) JavaScript, and if it does not, the form may be inaccessible. JavaScript is used by developers to show/hide elements, call information from database or form validations. Not only do users without JavaScript miss out on the usability benefits provided by JavaScript validation, the form itself may be compromised by the validation not taking place and as a result data can be incorrect.

• Alternate means

Contact information should be provided along with the form so that if a user has any problem he may clarify it or find an alternative method for filling up the form

Accessibility issues

While all internet users benefit from online forms, in many ways people with disabilities have the potential to gain the most. Tasks and transactions that many disabled people may find time consuming and difficult in the real world can be done online if they are able to access the appropriate forms. However, online forms can cause difficulties for a range of users including those with vision or mobility impairments, users with cognitive disabilities and also users who do not use a mouse or pointing device for navigation.

• When any component receives focus, it MUST not initiate a change of context

In a typical scenario it means that any change of context must be accomplished by activating a control like pressing the button. If a user is navigating the form through the keyboard and reaches the submit button by pressing the tab key the form should not get submitted until the enter key is pressed.

• Components MUST receive focus in an order that preserves meaning and operability

It is important to ensure that the tab order of the fields follows the logical order of the form. If the default tab order on the form is not ideal tab index may be used to specify the tab order. On online forms, tab index can be applied to all input elements such as buttons, check boxes and text areas. When the user presses the Tab key, the cursor moves to the next element in the order determined by tab index.

• For all user interface components, it is a MUST that the name and role can be programmatically determined; states, properties, and values can be programmatically set; and notification of changes to these items is available to assistive technologies

• For each time dependent activities, the user MUST be allowed to turn off the time limit, adjust the default setting or is warned before time expires and given option to extend the time limit

It can take much longer for a user of assistive technologies to read or listen to information on the screen and to complete a form. This needs to be considered when setting server timeout limits. Before the time limit is over the user must be informed that the time limit is expiring and must be given an option to increase the time limit.

• Organization and grouping

Organization and grouping in a form also play an important role in increasing its usability and accessibility. Grouping of the fields will be as per the requirement of the form however it should be ensured that related fields must be grouped using the “fieldset” tag. This is particularly useful in scenarios say when the user is asked to input two addresses one hometown and the other present. Both the groups will have fields with same labels e.g. street, city pin etc. In such a scenario grouping the two addresses using fieldset will help the visually challenged differentiate between two similar fields say “hometown city” and “present city” even if it is not explicitly labeled that way. Proper organization of the form will also help people with cognitive or learning disabilities.

Usability and Screen Layout

• Clear and simple language should be used

Questions should be concise, direct and simply worded and acronyms that are not common should be avoided. Terminology should be consistent for example if the term income is used in one part it should not be replaced with earning in another. Question should be precise for example when asking about income, it should be specified whether it is gross income or net income.

• Feedback should be provided to the user

Users must get a feedback if an action has been performed for example when a button is clicked there must be a visual feedback of the button being pressed. Users find it helpful if they can see what is going on when interacting with a website. For example, if the user expects a printable receipt after submitting a form (airline / railway ticket etc), there is often a waiting period. During this it is important to know if the system is processing the form, or if the system has crashed in some way.

• Form Layout
  • Form fields should be properly aligned
  • Proper screen based controls should be used in online forms for the questions asked. These include the proper use of text fields, text area, radio buttons, dropdown lists etc.
  • Labels may be placed above the fields or towards the left. When placed on the left of a field it is better to have them right aligned
  • The size of the form field should be at least the size of the maximum expected entry