Accessible form design

Principles of accessible forms

To make an accessible form:

1. Associate labels to form controls #

A programmatically identifiable relationship helps people navigating with a screen reader.

Labels provide a visual and programmatic link to understand the type of information required. When a label is programmatically associated to a control using the FOR and ID attributes, the screen reader will announce the type of form control and the label text.

Not providing this relationship information will render the form very difficult to use for screen reader users.

<label for="username">Username</label>
<input type="text" id="username">

2. Group related controls together #

The legend and fieldset elements can be used to provide meaning to related controls.

They provide a convenient way to group related information and allow relationships between controls to be identified in a non-visual way. When a form control inside a fieldset receives focus from a screen reader, the legend element is announced followed by the control label, and lastly the control type.

<fieldset>
<legend>Mailing Location</legend>
<label for="street_address">Street Address</label>
<input id="street_address" type="text">

In this example, the screen reader JAWS will announce "Mailing Location, Street Address, Input type and text"

3. Use CSS to hide a label if necessary #

Sometimes you may not be able to provide a visible label for form controls.

An offscreen CSS technique allows a label to be associated to a form control and to remain invisible by rendering it offscreen.

Do not use the display:none or visibility:hidden styles as this will stop the text from being displayed in the screen reader, instead use an off-screen CSS technique.

.sr-hidden
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<label class="sr-hidden" for="search">Search by first name</label>

<input id="search" type="text">

4. Clearly identify required controls #

People may not know what form controls to complete, help them out with what to fill in.

It may not be obvious which controls are mandatory and which are optional. Providing this information in the label will help people. Avoid using the asterisk character to identify mandatory controls, screen readers will announce "star" and if it uses the same font size as the label text can be difficult to identify.

Additionally, provide a description how to identify required form controls before a user begins filling out the form, i.e. Required fields are identified by the word "required".

<label for="surname">Surname (this is required)</label>

5. Don't trigger extra content on focus #

Loading new content when a control has focus is very disorientating if people can't identify the change.

A control which triggers the display of extra content when receiving focus is very disorientating, especially if this action isn’t explained prior to focusing on the control. Always provide a clear way for a user to trigger an update using link and HTML elements only. Consider using a button with clear text to trigger the change.

<button name="button">Update content</button>

6. Provide data formats in the label #

It may not be obvious what data format or data type is required.

Input restrictions such as the maximum length of characters or entering numbers only, may not be immediately obvious when filling out a form field. Providing these instructions upfront within the label element will reduce errors.

<label for="dob">Date of birth (dd/mm/yyyy)</label>

<label for="note">Extra Notes (maximum length 50 characters)</label>

7. Do not use the disabled attribute #

The disabled attribute affects the screen readers ability to focus and announce form content.

The disabled attribute will stop the control from receiving focus and will make it difficult for a screen reader user to understand any prefilled readonly information. The readonly attribute allows screen reader focus whilst preserving the original value.

<input id="searchCriteria" readonly value="search" type="text">

Details

• Download PDF (57 kb)

Licensing

This work is licensed under a Creative Commons Attribution-NonCommerical-ShareAlike 3.0 Unported License.