[Draft] Module 5: Forms and Input Elements

Explain use of HTML elements and WAI-ARIA attributes to label form elements and make them understandable. For example, the label element and the `for attribute.

Explain how clear labels, instructions, and large text targets allow people to navigate, understand, and fill in form elements.

Learning Outcomes for Topic

Students should be able to:

• mark up labels for form elements using the label element
• code labels and input fields associations using the HTML attribute for, the HTML element title, or the WAI-ARIA attributes aria-label or aria-labelledby
• mark up several form elements that share the same purpose using the HTML elements fieldset and legend
• mark up additional instructions for form elements using the HTML element title, or the WAI-ARIA attribute aria-describedby
• explain how labels allow people using text-to-speech technologies to identify and fill in form elements
• explain how larger targets allow people with low vision or cognitive disabilities to interact with form elements

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Provide examples of explicit and implicit associations using the label element. Explain that an implicit association can be achieved by wrapping the label element and its content around the form element. Explain explicit associations by means of the for attribute, and indicate that its value must be a unique id reference of the form element that the label refers to. Explain use of other explicit associations using the WAI-ARIA attributes aria-labeled or aria-labelledby. For reference on how to label form elements, see the WAI website tutorials Labeling controls.
• Show examples of form elements that are related to each other, such as check boxes or radio buttons to select possible answers for a given question. Mention that the fieldset element is used to group them all, and that the legend element provides the label they share. For reference on how to group form elements, see the WAI website tutorials Grouping controls.
• Show examples of additional instructions for form elements provided using the HTML attribute title, or the WAI-ARIA attributes aria-label, or aria-labelledby. Mention that title may not be well supported by some assistive technologies. Emphasize that contents provided using WAI-ARIA are available for assistive technologies only and are not visible on screen. For reference on additional methods to provide labels for form elements, see technique H65: Using the title attribute to identify form controls when the label element cannot be used.
• Invite students to navigate form elements using the keyboard only. Demonstrate use of the tab key to move through different form elements. Demonstrate use of the arrow keys to select options from combo boxes or lists.
• Demonstrate use of commands, keystrokes, or gestures of text-to-speech technologies to move to next or previous form element. Explore advanced functionality which presents all form elements in a list where users can select the form element they are interested in. For reference on how people with disabilities interact and navigate web pages, see Stories of Web Users.
• Demonstrate how users with mobility impairments or low vision users can click the label element to activate a specific form element if both are associated with each other.

Ideas to Assess Knowledge

Optional ideas to support assessment.

• Short answer questions — Students are asked to recite different ways to label form elements using HTML. Assess students’ knowledge of the different HTML ways to label form elements.
• Practice — Students are presented with a group of form elements and are asked to provide their labels. Assess how students make use of the HTML element label together with the HTML attribute for, the HTML attribute title, or the WAI-ARIA attributes aria-label, and aria-labelledby.
• Practice — Students are presented with a set of radio buttons that allow to rate a piece of content based on stars, and a piece of text saying, “Rate this”. Students are asked to properly associate them with their overall label. Assess how students use the HTML elements fieldset and legend.
• Practice — Students are asked to activate a set of form elements by clicking their labels. Assess how students understand the relevance of proper click targets for users with mobility impairments.

Explain how HTML5 input types and validation techniques allow people with disabilities to enter information in forms easier and in a more predictable way. For example, date, time, or url.

Learning Outcomes for Topic

Students should be able to:

• mark up required form elements using text or the HTML attribute required
• code specific types of data with their corresponding HTML5 input type. For example, date, time, url, or email
• code common regular expressions using the HTML attribute pattern

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Show examples of required form elements using the HTML attribute required or some added text in the label. For reference on how to validate required input, see the WAI website tutorials Validating required input.
• Demonstrate use of some common HTML5 elements, such as date, time, url, or email. Explain that they allow users to enter data more reliably and help validation. For reference on how to validate common input, see the WAI website tutorials Validating common input.
• Show examples of the HTML attribute pattern with regular expressions to validate common ways of entering information, such as country codes, phone numbers, or dates.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students are presented with a set of form elements and are asked to communicate that they are required. Assess how students make use of the HTML attribute required and/or some text in the label of the form element.
• Practice — Students are presented with a set of form elements to collect date, time, url, and email data. Students are asked to choose an HTML5 input type that serves the specific purpose of each of the form elements. Assess students’ knowledge of HTML5 form input types.
• Practice — Students are presented with form elements that collect phone numbers of a given country as well as dates of birth. Students are asked to use the pattern element and common regular expressions to specify custom input formats. Assess how students use the pattern attribute together with regular expressions to validate the expected input format.

Explain use of HTML and WAI-ARIA elements to notify users about successes, errors, or any other warning messages resulting from their input or from a time limit. For example, headings, additional label texts, and aria-live regions.

Learning Outcomes for Topic

Students should be able to:

• notify users of existing time limits
• provide mechanisms to stop or extend time limits
• provide information about the amount of errors in the main heading of the page, the page title, or via modal dialogs
• associate error messages with their corresponding form elements using headings, lists, or anchors
• provide inline feedback through messages belonging to specific form elements via labels, icons, or the aria-describedby attribute
• provide instant feedback as the user is typing using aria-live regions

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Mention that time limits in forms should be avoided to allow users to complete them at their own pace. Explain that when there is a compelling reason to establish the limit, users must be notified in advance and be provided with a way to extend or stop the limit. If the time limit is essential to a valid submission, then there is no need to allow users to extend or stop the limit. For reference about how to provide mechanisms to stop or extend time limits, see technique G180: Providing the user with a means to set the time limit to 10 times the default time limit.
• Introduce the different ways in which errors can be announced after form submission. Explain that a warning message should be included in the title of the page or its main heading, so that all users are aware that their submissions have produced errors. For reference on how to communicate error messages, see the WAI website tutorials, Overall feedback.
• Demonstrate use of mechanisms to provide inline error messages for form elements so that users can relate them to its specific field as they move around. Explain that you can use the label element to include that information or use the aria-describedby attribute. Explain that WAI-ARIA live regions can be used to provide instant feedback as users are typing in a form element or as validation outputs appear so that screen reader users can understand the information provided. For reference on how to provide inline error messages, see the WAI website tutorials, In-line feedback.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students are presented with a page where there are form elements visually marked with errors. Students are asked to
  • Indicate the presence of these errors in the main heading or title of the page.
  • Make textual reference to each erroneous field and group those references in a list.
  • Link each list item with its corresponding form element.
  • Provide inline instructions in the corresponding form element that users will read once the form element gets focus.