How to create forms

Return to the video alternative.

Forms

Present form content in the correct reading sequence

Form content should be presented in a meaningful sequence so that any relationship within the data is clear. The logical and intuitive order in which a sighted user naturally reads the page content is generally left to right and top to bottom. This will also provide the correct reading sequence for screen reader users.

  1. Follow the instructions in the Tables section for how to create a layout table.
  2. Ensure that information, labels and fields follow a logical left to right sequence – therefore the label is immediately followed by the field for the user to type information.

A mock up form made from Word tables which contains the labels name, telephone, email, address and postcode - all of which have corresponding fields. The table form has a left to right meaningful reading sequence which goes from label to relevant field.
Figure 54: Left to right sequence

Provide form instructions first

  1. Write instructions that are clear and give specific advice to users about how to enter information.

A simple table form which contains the labels registration number and name with corresponding fields. Before the form starts there is a note provided which states - Note: There is an applicable fee payable. Use blue or black pen to complete this form. Please print clearly using block letters.
Figure 55: Provide instructions first

A simple table form which contains the labels Visa, mastercard and amount with corresponding fields. Before the form starts there are instructions provided about how to complete the fields. The instructions state - Please type 'yes' to select your credit card type.
Figure 56: Provide specific instructions

Note: Do not use tick boxes that are created with non-standard fonts; are not accessible.


A simple table form which contains the labels Name (required) and Plan number (required) with corresponding fields.
Figure 57: Include ‘required’ in the field label

Reference asterisk content correctly

Important information referenced by an asterisk should be conveyed in a meaningful way. Note: Footnotes and endnotes should not be used as they are inaccessible and cannot be read by a screen reader.

  1. Include the asterisk referenced content
    • directly below or as close as possible to the asterisk or
    • directly below the table.

A table form which contains the labels Card number, card expiry date (e.g. 06/2016) and CCV number*. After asterisk after the CCV number is referenced directly after the CCV number field. The reference states - Notes on CCV numbers: Credit cards are now issued with a CCV number. This is the last three numbers located on the signature strip on the back of the card. If you credit card has been allocated this number enter the three numbers in the space provided.
Figure 58: Using an asterisk to reference information
  1. Include important information or field-specific instructions with the field label.

A table form which contains the labels Do you want to dissolve your co-operative (this requires a special resolution) with no or yes (please state reasons) options and a Reasons field..
Figure 59: Using the field label for important information and instructions