PRESENTER: This tutorial explores accessible form
instructions.
We're going to cover over all form instructions,
in-line instructions, three different methods,
and dealing with a placeholder.
Section one, overall form instructions.
Where relevant, instructions that apply to the entire form
should be provided before the form element.
This would ensure that instructions
are enhanced by screen readers before they
switch to forms mode.
For example, indicate any required fields, allowed date
formats, and password limitations.
Section two, in-line instructions.
There are times when individual form fields need
additional information in order for users
to understand how to fill them in correctly.
Simple instructions associated with form fields
are normally positioned directly onto the field.
These instructions need to be programmatically associated
with the label element, so they can
be announced to screen readers, along with the label content.
In this example, if the instructions
were programmatically associated with a form control,
the input would be announced as, "include a 10-digit number."
Section three, three methods.
There are three different methods
that can be used to programmatically
associated instructions with their relevant form fields.
Method one, instructions inside the label.
Information can be associated with form fields
by placing the information inside the label element.
This technique is stable across all web browsers and assistive
technologies, so it's the recommended solution.
In this example, there's a span with the words
"include a 10 digit number" inside the label element.
Method two, instructions using aria-describedby.
The aria-describedby attribute can
be used to associate instructions
with form controls.
This technique has good support across all modern web browsers
and assistive technologies.
In this example, the span element,
which contains the additional information,
has an ID value of instructions2,
and the input has an aria-describedby
with a value of instructions2.
Method three, instructions using aria-labelledby.
The aria-labelledby attribute can also
be used to associate instructions
with form controls.
However, to ensure backwards compatibility,
the label element also should contain
an ID value, which is referenced by the aria-labelledby
attribute.
In this example, the label has an ID of label1.
The span element, which contains the additional instructions,
has an ID value of instructions1.
And the input has an aria-labelledby attribute with
two values--
label1 and instructions1.
This technique allows assistive technologies
to concatenate ID values and provide multiple instructions
to a single form control.
However, developers must use caution with this technique,
as too much information associated with a single form
control my overwhelm the users.
Additionally, developers should test that this technique is
supported by their target browser
and assistive technology combinations
prior to implementation.
Section four, the placeholder.
The placeholder attribute is designed
to allow developers to apply simple instructions directly
in the form field.
However, this method should be avoided, as it presents
two accessibility issues.
The first issue is disappearing instructions.
These instructions disappear as soon as the user types
a character into the field or they tap to the field.
For some users, especially some types
of cognitive-impaired users, this
can present a challenge, as instructions
are no longer available.
The second problem is faint instructions.
Placeholder text is often presented
in a very soft gray color, which is well below acceptable
WCAG color contrast ratios.
Even though the text can be styled with CSS,
many developers don't do this, so it
can be inaccessible to anyone with vision issues.
Content authors and developers are recommended
to include form instructions on the page using
one of the methods presented earlier.
Conclusion.
So there you have it-- a simple explanation of accessible form
instructions.
Except where otherwise noted, this work
is licensed under Creative Commons
by Attribution-ShareAlike 4.0 license, copyright 2008,
California Community Colleges, Chancellor's Office.
These works are licensed under Creative Commons Attribution
4.0 International license.
They are available to everyone and may
be repurposed to meet the unique needs
of educational institutions.