Form Layout

1 column

Forms can be either one column or two columns depending on screen real estate. Forms designed for small screens such as smartphones should be one column. For input boxes, text areas and dropdown boxes, text should be above the corresponding field; for checkboxes and radioboxes it needs to be to the right.

2 column

For forms designed specifically for desktop machines 2 columns is acceptable. For input boxes, textareas and dropdown boxes, text should be to the left; for checkboxes and radioboxes it needs to be to the right.

Web form samples

Web form samples: 1 column form layout (left) and 2 column form layout (right)

 

Forms should allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

  • Changing a form element and not clicking submit or pressing enter should not reload the page.
  • Changing a form element without removing focus from that form field should not change anything on the page. For example, if a user is in a drop-down menu, and uses the arrow keys to select an element in the drop-down menu, but does not tab into the next field of the form, nothing on the page should change. Once the user leaves the form field, it is acceptable to have some page elements change. For example, if the user has the opportunity to select a country, the next field might switch back and forth between provinces and states. However, that switch should not happen until the user has changed focus and is no longer using the arrow keys to manipulate the country drop-down.
  • Tabbing through input fields, the input fields and drop down menus order follows the visual layout.
  • Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text and screenreaders are notificed of the error.
  • Labeling Form Controls: all input fields have labels, which are explicitly marked up with <label for=”the_form_field_id”> to associate them programmatically with the form fields.
  • Mark up warnings and instructions: if you have instructions, warnings, or other annotations in the middle of your form, they will only be read by screenreaders in forms mode if you mark them up correctly.

Proper Coding for Forms

Labeling Form Controls

For users who access your site using screen readers, it can be extremely difficult or impossible to know what is required in input fields in forms. To make the form usable, explicitly label each control by enclosing the text associated with it in a <label for=””> tag. Then, add an ID attribute to the input field and make both the ID and FOR equal to the same value. Note: ID values must be unique.

<label for="name">Name:*</label>  
<input type="text" id="name" name="name" value="" placeholder="John Doe"
required />

Select Menus

Make sure select menus work with the keyboard as well as with the mouse. The user should be able to make a selection from a drop down list without triggering an action (like launching a new page). The user should always be able to select at leisure after reviewing all options.

<select id="enquiry" name="enquiry">  
            <option value="general">General</option>  
            <option value="sales">Sales</option>  
            <option value="support">Support</option>  
</select>

Checkboxes/Radio Buttons

Checkboxes require special caution in order to read correctly. Checkbox labels should include the question and answer.

<label for = "question1a"> Send yourself a copy? <br> 
      Yes 
      </label> 
    <input type = "checkbox" name = "question1a" id = "question1a" value = "yes"> 

<label for = "question1b">
      No 
      </label> 
    <input type = "checkbox" name = "question1b" id = "question1b" value = "no">

Radio buttons are not supported consistently by all versions of browsers, screen readers, and combinations. A correctly labeled and tagged set of radio buttons is a very difficult control for users of screen-reading technology. If a “choose only one” situation is called for, a select menu is preferable.

Submit Buttons

Do not use graphics or other elements to create “fake” Submit buttons. A proper Submit button utilizes the <input> tag.

<input type="submit" value="Submit" id="submit-button" />

Error Identification

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text and screenreaders are notificed of the error. Firstly, make sure you use accessible method of notifying all users of the error condition. Secondly, use WAI-ARIA roles such as role="alert" and aria-invalid to indicate the errors to the adaptive technology.

Mark up warnings and instructions

If you have instructions, warnings, or other annotations in the middle of your form, they will only be read by screenreaders in forms mode if you use the appropriate WAI-ARIA markup for connecting the annotation with the form field. For example, you might label an instruction:
aria-describedby="the_instruction_id"