Accessibility Hub

site header

Forms

Download FULL PDF version (254 KB)

This document is available in alternate formats upon request. Please contact the Accessibility Hub Coordinator.

Online forms can be handy way to get assistance, search, request, or submit information to be sent somewhere else. They can also be accessibility nightmares if done incorrectly.

Labels

Labels should be named and placed in a logical order. For example a form that asks you to input your name should have the <label> to the immediate left of the text-box. Labels should also be to the right of radio buttons and checkboxes.

screenshot of form label Name left of the text box to input your name.

HTML code

<p><label for="name">Name</label>

<input type="text" name="name" id="name" /></p>

Tab order

When navigating web forms anyone can use the “Tab” key to move from field to field. Someone using a screen reader will make good use of the Tab key. Most of the time, the “Tab” will move focus in the logical order of the form (top to bottom) but not always. To ensure a logical movement, you can set the “tab index” attribute for each form element to set the order.

HTML Code

<p><label for="name">Name</label>

<input type="text" name="name" id="name" tabindex="1" /></p>

Any field that is required to be filled out should be labelled using proper symbols and text such as (* required). If required fields are indication by a bold font or the colour red, a screen reader won’t be able to identify those fields as required.

If a “Submit” button is an image, ensure it has an Alt tag saying “Submit”.