Manual accessibility testing

protocol
for forms
This document provides guidance on manual accessibility testing for forms. It is
meant to provide your teams with a working knowledge on how to conduct basic
accessibility testing that will enable them to find some of the most prevalent issues
that can impact user experience for people with disabilities.

NOTE: This document is not meant to provide an exhaustive list of every

single possible test that a tester can do. Rather, it highlights some of the most
important aspects to consider, so your testers can build a solid foundation with
accessibility using testing techniques that will be consistent with the web
accessibility testing protocols used at Simply Accessible.

Each requirement maps to the appropriate success criterion from WCAG 2.0, and it
also links to a particular browser-based testing tool where appropriate.

Forms
The following requirements need to be tested for when looking at potential forms
issues.

Related form fields are grouped together visually

Locate any forms elements on the page. Verify that form fields that are collect
related information are visually grouped together.

Log an issue for each situation where related form fields are not presented together
visually in the form.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Visual check

Long or complex forms are broken up by headings

Using the Web Developer toolbar, go to the Outline tab and select the Outline
headings option. All headings on the page will be outlined. Locate any long or
complex forms, and verify that related fields of the form are broken up by headings
that describe the purpose of that section of the form, at the appropriate heading

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 level.

Log an issue for each situation where a long or complex from does not have
headings used to describes related parts of the form.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Whenever provided, instructions on how to use forms are clearly explained

Navigate to any form content on the page. Location any information that instructs
users about how to fill out the form. Verify that the instructions are correct, clearly
explained, and provide sufficient information for entering information correctly in
the form.

Success Criterion: 3.3.2 Labels or Instructions (level A)

Tool used: Visual check

Instructions provided in forms do not rely on sensory characteristics

themselves

Using the Web Developer toolbar, go to the CSS tab and select the Disable All
Styles option. Navigate to form content on the page, and verify that instructions
are understandable without sensory characteristics provided by styles.

Log an issue for each situation where users must perceive a shape, colour, size,
visual location, orientation, sound, or similar to access form instructions.

Success Criterion: 1.3.3 Sensory Characteristics (level A), 1.4.1 Use of Colour
(level A)
Tool used: Web Developer toolbar (available for Firefox or Chrome)

The content of instructions provided in forms do not rely on sensory

characteristics

Navigate to any form content on the page. Locate any instructions that provide
users with information about how to fill out the form. Verify that understanding
instructions does not rely on sensory input, such as shape, colour, size, visual
location (see to the right), orientation (left-pointing arrow), or sound.

Log an issue for each situation where understanding instructions requires

perceiving a shape, colour, size, visual location, orientation, sound, or similar to
understand form instructions.

Success Criterion: 1.3.3 Sensory Characteristics (level A), 1.4.1 Use of Colour

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 (level A)
Tool used: Visual check

Text that is relevant to a form does not appear visually after the submit
button

Locate any form on the page. Verify that no information that impacts how the form
is understood appears after the button to submit the form.

Log an issue for each situation where information about the form appears visually
after the form.

Success Criterion: 1.3.2 Meaningful Sequence (level A)

Tool used: Visual check

Text that is relevant to a form does not appear programmatically after the
submit button

Using the Web Developer toolbar, go to the CSS tab and select the Disable All
Styles option. Navigate to form content on the page, and verify that no information
that impacts how the form is understood appears after the button to submit the
form.

Log an issue for each situation where information about the form appears visually
after the form.

Success Criterion: 1.3.2 Meaningful Sequence (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome)

Standard HTML controls are used for forms

Using the Web Developer toolbar, go to the Forms tab and select Check All
Checkboxes, Expand All Select Elements, and Populate Form Fields. This will
check checkboxes, expand select elements, select a radio button in a set, and fill in
all available text fields and textareas. Verify visually that all fields have been
modified in some way.

Log an issue for each form field that is not affected.

Success Criterion: 4.1.2 Name, Role, Value (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome)

Every form control has a unique label that is visually conveyed

Navigate to form content on the page. Verify that each form control has a unique,

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 visible label that describes the field. Alternately, if the form has fields and labels
that repeat for multiple situations, such as contact information for multiple
passengers, verify that each section that repeats has a unique heading that helps
distinguish between the repeated labels.

Log an issue for each form control that has no visible, unique label, or that does not
otherwise provide a visual cue, such as a related heading, to help differentiate
between fields with the same label.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Visual check

Form labels are clear and informative

Navigate to form content on the page. Verify that each visible label provides
sufficient information to enter information or make a selection with each field, such
as the type of information expected and how it should be formatted.

Log an issue for each form field that has an unclear label.

Success Criterion: Headings and Labels (level AA)

Tool used: Visual check

Text labels are marked up using the label element

Using the Web Developer toolbar, go to the Forms tab and select the Outline Form
Fields Without Labels option. Navigate to form content on the page, and verify that
no form field is outlined.

Log an issue for each form field that lacks a label.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome)

Placeholder attribute values are not used in lieu of regular form label
elements

Using the Web Developer toolbar, go to the Forms tab and select the Outline Form
Fields Without Labels option. Navigate to form content on the page. Verify that any
fields that are outlined do not rely solely on a placeholder within the field to provide
instruction to the user.

Log an issue for each text field that displays lacks a label and relies on a
placeholder to instruct users about how to enter information in the field.

Success Criterion: 1.3.1 Info and Relationships (level A)

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 Tool used: Web Developer toolbar (available for Firefox or Chrome)

Text labels and form controls are programmatically associated using FOR and
ID attributes

Navigate to form content on the page. Click on each form label. Verify that keyboard
focus is moved to the associated field when the label is clicked.

Log an issue for each form field that does not send focus to the field when the label
is clicked.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Mouse

Whenever provided, instructions on how to use forms are programmatically

conveyed to assistive technologies

Navigate to any form content on the page. Locate any instructions that provide
users with information about how to fill out the form. Verify that understanding
instructions does not rely on sensory input, such as shape, colour, size, visual
location (see to the right), orientation (left-pointing arrow), or sound.

Log an issue for each situation where instructions follow related form fields,

Success Criterion: 1.3.3 Sensory Characteristics (level A)

Radio buttons groups are clearly grouped together visually

Locate radio button groups on the page. Validate that radio buttons do not appear
alone, but in groups of two or more whenever all related radio buttons are near to
each other.

Log an issue for each situation where radio buttons that make up a group are not
presented together visually.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Visual check

Radio buttons are properly grouped via HTML

Using the Web Developer toolbar, go to the Forms tab and select the View Form
Information option. Information about all form fields on the page will be listed out,
grouped by form. For each form field that has a type of radio, verify that the radio
button shares a name with other radio buttons in its set.

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 Log an issue for each radio button that does not have a shared name.

Success Criterion: 4.1.2 Name, Role, Value (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Radio button and checkbox labels are positioned to the right of the form
control

Locate radio button groups and checkboxes on the page. Validate that labels are
visually positioned to the right of their associated radio button or checkbox.

Log an issue for each situation where a label is displayed to the left of a radio
button or checkbox.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Visual check

Groupings are provided for long option lists in select elements using the
optgroup element

Using the Web Developer toolbar, go to the Forms tab and select the Expand Select
Elements option. Select elements should display their full list of options. Verify that
select elements that contain a large number of options that are difficult to
distinguish are broken up by option group labels.

Log an issue for each select element that has a very long list of options that are
difficult to distinguish without option groups.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Form field constraints are clearly disclosed in text

Using the Web Developer toolbar, go to the Forms tab and select the View Form
Information option. Information about all form fields on the page will be listed out,
grouped by form. For each form field that has a maximum length, verify that this
information is conveyed in the form label or other relevant instructions.

Log an issue for each field that has a maximum length that is not conveyed to
users.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome).

Custom form controls replicate all inherent behaviors of native HTML form

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 controls

Using the Web Developer toolbar, go to the Forms tab and select Check All
Checkboxes, Expand All Select Elements, and Populate Form Fields. This will
check check boxes, expand select elements, select a radio button in a set, and fill in
all available text fields and textareas. Verify visually that all fields have been
modified in some way. For fields that have not been modified, test keyboard
accessibility and verify that the field has a visual and programmatic label.

Log an issue for each custom form control that does not work like the native HTML
control it is mimicking.

Success Criterion: 4.1.2 Name, Role, Value (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome), keyboard

Required fields are visually indicated

Navigate to form content on the page. If the form has a mix of required and optional
fields, verify that the labels of fields that are required display an icon indicating the
required status. Verify that a note appears at the top of the form indicating that the
form has required fields, and that the icon is how users can identify these fields.

Log an issue for each field that is required that does not indicate that it is required.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Visual check

Required fields are programmatically indicated as such to assistive

technology

Using the Web Developer toolbar, go to the Images tab and select the Display Alt
Attributes option. Alt attributes for all images on the page will be displayed.
Navigate to form content on the page, and verify that icons that convey required
status for fields have an alt value of Required. Verify that the icons are
implemented as part of the form label.

Log an issue for each required field icon that does not have a text alternative.

Success Criterion: 1.3.1 Info and Relationships (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome)

Users have the ability to prevent errors on forms

Navigate to a form. Verify that users are provided with enough information to
submit the form without errors.

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 Log an issue for each form that does not provide sufficient information to complete
it successfully.

Success Criterion: 3.3.2 Labels or Instructions (level A)

Tool used: Visual check

Forms are not automatically submitted

Navigate to a form and enter valid data into it. Verify that the form is not
automatically submitted at any time during data entry or editing, and requires the
user to interact with a button to submit it.

Log an issue for each form that submits automatically without the user explicitly
submitting the form.

Success Criterion: 3.2.2 On Input (level A)

Tool used: Visual check, keyboard

Submit buttons in forms rely on an input type submit element or a button

element

Using the Web Developer toolbar, go to the Forms tab and select the Display Form
Details option. Details about all form elements on the page will be displayed. Verify
that the control to submit the form uses a button element, or an input element with
type=submit.

Log an issue for each form that does not have a button or submit input.

Success Criterion: 3.2.2 On Input (level A)

Tool used: Web Developer toolbar (available for Firefox or Chrome)

Users have the ability to correct errors on forms

Navigate to a form. Submit the form with errors. Verify that users are provided with
the opportunity to correct those errors.

Log an issue for each form that does not provide the opportunity to correct errors.

Success Criterion: 3.3.3 Error Suggestion (level AA)

Tool used: Visual check

When errors are returned on submit, focus is visually set directly to the error
message

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned, and that a visible error message is displayed.

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 Log an issue for each form that does not visually display an error message.

Success Criterion: 3.3.1 Error Identification (level A)

Tool used: Visual check

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 When errors are returned on submit, focus is programmatically shifted
directly to the error message

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Press the Tab key. Verify that focus moves to the first
focusable element after the error message.

Log an issue for each form that does not programmatically shift focus to an error
message.

Success Criterion: 3.3.1 Error Identification (level A)

Tool used: Keyboard

When errors are returned, clear information is provided regarding any

detected errors

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Verify that that the user is notified of errors. Verify that the
information provided is as clear as possible to correct the errors.

Log an issue for each error message that does not provide clear information to fix
the associated errors.

Success Criterion: 3.3.3 Error Suggestion (level AA)

Tool used: Visual check

Errors and alerts are visually indicated the same way site-wide

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Verify that that the user is notified of errors. Verify that the
way error notification occurs is visually consistent across the page and on forms of
this kind across the site.

Log an issue for each error message that is visually inconsistent with the rest of the
site.

Success Criterion: 3.2.4 Consistent Identification (level AA)

Tool used: Visual check

Error messages and alerts are programmatically indicated the same way
across the site

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Verify that that the user is notified of errors. Verify that the

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 way error notification occurs is programmatically consistent across the page and on
forms of this kind across the site.

Log an issue for each error message that is programmatically inconsistent with the
rest of the site.

Success Criterion: 3.2.4 Consistent Identification (level AA)

Tool used: Visual check, keyboard, mouse

Cues are provided to help users correct errors

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Verify that that the user is notified of errors. Verify that the
user is given a way to navigate to fields that have errors, such as a list of
descriptive links that jump to each field with an error.

Log an issue for each error that lacks a cue for user correction.

Success Criterion: 3.3.3 Error Suggestion (level A)

Tool used: Visual check, keyboard

Error messaging visually displays next to the form field

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Verify that an error message appears next to each field
that has an error, or next to each group of fields that share an error.

Log an issue for each field with an error that does not have a visible adjacent error
message

Success Criterion: 3.3.2 Labels or Instructions (level A)

Tool used: Visual check

Instructions to fix form errors are explained in text inside the corresponding
label element

Navigate to a form. Submit the form with data missing or entered incorrectly. Verify
that errors are returned. Verify that an error message appears next to each field
that has an error. Using the Web Developer toolbar, go to the Forms tab and select
the View Form Information option. Information about all form fields on the page
will be listed out, grouped by form. For each form field that displayed an error, verify
that the label include the associated error message text

Log an issue for each field that has an error displayed but which does not have the
error text included in its label.

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].
 Success Criterion: 3.3.2 Labels or Instructions (level A)
Tool used: Web Developer toolbar (available for Firefox or Chrome)

A confirmation screen is displayed prior to any final form submission

Navigate to a form. Fill out the form with incorrect data and submit it. If the form
does not return errors, verify that the user is given the opportunity to verify the data
they have entered before the data is submitted.

Success Criterion: 3.3.4 Error Prevention (Legal, Financial, Data) (level AA)
Tool used: Visual check

No responses require a specified, unchangeable period of time to answer

Navigate to a form. If the form or specific fields in the form have a time limit for
responding, verify that at least one of the following is true:

1. There is an accessible way for users to turn of the time limit before they encounter
it.
2. There is an accessible way for users to adjust the time limit before they
encounter it, allowing them at least ten times the normal amount of time.
3. There is an accessible, easy way for users to extend the time limit to at least ten
times the normal amount before time expires, and they are given at least 20
seconds to do so.
4. The time cannot be extended because it is a real-time event or extending it
would invalidate what the user is trying to accomplish.
5. The time limit is longer than 20 hours.

Success Criterion: 2.2.1 Timing Adjustable (level A)

Tool used: Visual check

Copyright 2016 Simply Accessible. This document contains proprietary information, designs, techniques, trade
secrets, and other intellectual property that is the sole property of Simply Accessible Inc. All its contents are
CONFIDENTIAL and are not to be shared with anyone other than the intended recipients without expressed, written
consent. Email us for more information: [email protected].