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