0403 Accessible Form Instructions

User Manual:

Open the PDF directly: View PDF .
Page Count: 39

Download
Open PDF In Browser	View PDF

ACCESSIBLE

FORM

INSTRUCTIONS

Overall form
instructions

Where relevant, instructions that apply to
the entire form should be provided
before the 
 element.

For example, indicate any required fields,
allowed date formats, and password
limitations.


All form fields are required.

...


Inline instructions

There are times when individual form
fields need additional information in
order for users to understand how to fill
them in correctly.

These instructions need to be
programmatically associated with the
form control, so that they are announced
to screen readers along with the label
content.

Three methods

There are three different methods that
can be used to programmatically
associate instructions with their relevant
form fields.

Method 1:
Inside the label

Using this method, information can be
associated with form fields by placing it
inside the  element.

This method only works if the 
element wraps around the label
content, form control and instructions.


Phone number

Make sure to include a 10
digit number


This technique is stable across all web
browsers and assistive technologies
so is the recommended solution.

Method 2:
Using aria-describedby

Using this method, the ariadescribedby attribute can be used to
associate instructions with form
controls.

In this example, the  element has
an aria-describedby attribute with a
value of instructions2.

The  element, which contains the
additional instructions, also has an ID
value of instructions2.

Phone number

Make sure to include a
10 digit number

This technique has good support across
all modern web browsers and assistive
technologies.

It can be used in cases where it is not
possible to wrap the  element
around the form control.

Method 3:
Using aria-labelledby

Using this method, the aria-labelledby
attribute can be used to associate
instructions with form controls.

In this example, the  element has
an aria-labelledby attribute with a
value of instructions2.

The  element, which contains the
additional instructions, also has an ID
value of instructions2.

To ensure backward compatibility, the
 element also contains an ID
value which is referenced by the arialabelledby attribute.

Phone number

Make sure to include a
10 digit number

This technique has only acceptable
support across all modern web browsers
and assistive technologies and is
therefore not recommended.

Method 4.
Using placeholder

This method involves using the
placeholder attribute to display simple
instructions directly in the form field.

Phone number


This method presents two accessibility
issues:

1. These instructions disappear as soon
as the user types a character in the field,
or tab to the field.

For some users, especially some types of
cognitive impaired users, this can present
a challenge as the instructions are no
longer available.

2. The placeholder text is often
presented in a very soft gray color
which is well below acceptable WCAG
color contrast ratios.

Even though this text can be styled with
CSS, many developers do not do this, so
it can be inaccessible to anyone with
vision issues.

For these reasons, the placeholder
method should be avoided.

Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
Linearized                      : No
Page Count                      : 39
PDF Version                     : 1.4
Title                           : 0403-accessible-form-instructions.key
Producer                        : Mac OS X 10.11.6 Quartz PDFContext
Creator                         : Keynote
Create Date                     : 2018:07:02 03:32:01Z
Modify Date                     : 2018:07:02 03:32:01Z

EXIF Metadata provided by EXIF.tools