0303 Accessible Form Instructions

0303-accessible-form-instructions

0303-accessible-form-instructions

User Manual:

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

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.

Different 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 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.

Exercise 03:
Form Instructions

Open exercise03-instructions/
exercise3-start.html
Review your work against exercise03instructions/exercise3-finished.html

• Move overall form instructions to the
correct location.
• Solve the “name” form control by
wrapping the .
• Solve the “email” form control using
the aria-describedby attribute.



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.3
Linearized                      : No
Page Count                      : 34
Title                           : 0303-accessible-form-instructions.key
Producer                        : Mac OS X 10.11.6 Quartz PDFContext
Creator                         : Keynote
Create Date                     : 2018:10:08 16:48:51Z
Modify Date                     : 2018:10:08 16:48:51Z

EXIF Metadata provided by EXIF.tools