[Draft] Module 5: Forms and Input Elements

• Prerequisites for Students
• Module 1: Structure and Semantics from Developer Modules
• Basic knowledge of HTML forms

• Applied expertise in teaching:
  • WCAG 2 Success Criterion 1.3.1 Info and Relationships
  • WCAG 2 Success Criterion 1.3.5 Identify Input Purpose
  • WCAG 2 Success Criterion 2.2.1 Timing Adjustable
  • WCAG 2 Success Criterion 2.4.6 Headings and Labels
  • WCAG 2 Success Criterion 2.5.3 Label in Name
  • WCAG 2 Success Criterion 3.2.2 On Input
  • WCAG 2 Success Criterion 3.3.1 Error Identification
  • WCAG 2 Success Criterion 3.3.2 Labels or Instructions
  • WCAG 2 Success Criterion 3.3.3 Error Suggestion
  • WCAG 2 Success Criterion 4.1.2 Name, Role, Value
  • WCAG 2 Success Criterion 4.1.3 Status Messages
  • HTML forms
  • HTML elements form, label, and input
  • HTML element Button
  • HTML elements fieldset and legend
  • Common input element attributes
  • Date, time, and input formats
• In-depth knowledge of:
  • Prerequisites for Students
  • Structure and Semantics

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

Learning Outcomes for Topic

Students should be able to:

• mark up labels for form controls using the HTML element label and attribute for
• code labels and input field associations using:
  • the HTML attribute for [when an explicit association is needed]
  • the WAI-ARIA attributes aria-label or aria-labelledby [when the label text needs to be visually hidden]
  • the HTML element title [when the label text needs to be visually hidden]
• mark up several form controls that share the same purpose using the HTML elements fieldset and legend
• explain how labels are rendered by text-to-speech technologies such as screen readers
• explain how larger targets allow people with low vision or cognitive disabilities to interact with form controls
• explain how labels are used by users of voice control software to activate and interact with form controls

Teaching Ideas for Topic

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 control. Explain explicit associations by means of the for attribute and indicate that its value must be a unique identifier of the form control that the label refers to. Explain the use of other explicit associations using the HTML attribute title, the WAI-ARIA attributes aria-label or aria-labelledby. Explain that use of placeholder for labels should be avoided as its value disappears once the user has entered a value. Examples of how to label form controls are provided in the WAI tutorials on Labeling controls.
• Show examples of form controls 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. Examples of how to group form controls are provided in the WAI tutorials on Grouping controls.
• Invite students to navigate form controls using the keyboard only. Demonstrate the use of the tab key to move through different form controls. Demonstrate the use of the arrow keys to select options from combo boxes or lists.
• Demonstrate the use of voice commands, keystrokes, or gestures provided by speech and mainstream technologies to navigate web pages through form controls. Explore advanced functionality that some tools provide, such as presenting all form controls in a list where users can select the form control they are interested in. Examples of how people with disabilities interact with the Web are provided in Stories of Web Users.
• Demonstrate how people with mobility impairments or with low vision can click the label element to activate a specific form control if both are associated with each other.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Short answer questions — Students are asked to recite different ways to label form controls using HTML. Assess students’ knowledge of the different HTML ways to label form controls.
• Practical — Students are presented with a group of form controls 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.
• Practical — 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.
• Practical — Students are asked to activate a set of form controls by clicking their labels. Assess how students understand the relevance of proper click targets for people with mobility impairments.

Explain how form instructions allow people to understand the purpose of form controls.

Learning Outcomes for Topic

Students should be able to:

• code overall instructions for form controls so that they appear before the form control
• code in-line instructions within the form labels using visible text or signs
• mark up additional instructions that are outside of the form controls’ label using the HTML element title or the WAI-ARIA attributes aria-labelledby or aria-describedby
• summarize related requirements for authors and designers to provide clear form instructions
• summarize related requirements for designers to provide mechanisms that allow for pausing, saving, and resuming form completion

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of common instructions for form controls such as those related to allowed data formats, or general timing instructions. Explain that these instructions need to be provided before the form controls appear, so that they are clearly perceivable before initiating form completion. Examples of how to code general instructions for form controls are provided in the WAI tutorials, Overall instructions.
• Show examples of additional instructions for form controls provided using the HTML attribute title or placeholder, or the WAI-ARIA attributes aria-label, or aria-labelledby. Mention that title and placeholder may not be well supported by some assistive technologies. Explain that the value of the placeholder disappears when the user enters a value, so essential instructions need to be provided using the other described methods. Emphasize that contents provided using WAI-ARIA are available for assistive technologies only and are not visible on screen. For examples of additional methods to provide labels for form controls, see technique H65: Using the title attribute to identify form controls when the label  element cannot be used. Examples of how to provide in-line instructions for form controls are provided in the WAI tutorials, In-line instructions.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students are presented with overall instructions for a set of form controls such as the current and total number of steps of the form and are asked to code them appropriately. Assess students’ knowledge about how to code overall instructions.
• Practical — Students are presented with in-line instructions for form controls such as examples of how data should be entered and are asked to code them appropriately. Assess students’ knowledge of the different techniques to code in-line instructions.

Explain how to code mechanisms to stop, adjust, or extend time limits as well as general instructions for time limits.

Learning Outcomes for Topic

Students should be able to:

• code mechanisms to stop, adjust, or extend time limits of a given form
• List requirements for designers and content authors to write overall timing-related instructions, such as conveying the time limit, and explaining the ways to stop or extend it

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Demonstrate examples of different types of time limits, such as banking site timeouts, ticket purchasing countdowns and timeouts, assessment timings, inactivity timeouts, or chatbot timeouts.
• Show examples of mechanisms that allow to stop the time limit, such as a check box at the beginning of the form. For an example of how to provide these mechanisms, see techniques G198: Providing a way for the user to turn the time limit off and G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit.
• Show examples of mechanisms that allow to adjust time limits when they are about to expire. For examples of how to code mechanisms to adjust time limits, see technique SCR16: Providing a script that warns the user a time limit is about to expire.
• Show examples of mechanisms that allow to extend time limits. Explain that they need to allow for extensions of up to 10 times the original time limit. For an example of a mechanism that allows to extend time limits, see technique SCR1: Allowing the user to extend the default time limit.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Short Answer Questions — Students are asked about the accessibility requirements relating to time limits expressed in WCAG 2 Success Criterion 2.2.1 Timing Adjustable. Assess students’ knowledge of the different mechanisms available to stop, adjust, or extend time limits.
• Practical — Students are presented with a form that has a time limit related to a security requirement, and are asked to choose which mechanism they would choose to make it accessible. Assess students’ knowledge about how to code mechanisms to stop, adjust, and extend time limits.
• Practical — Students are asked to find several websites where mechanisms to stop, adjust, or extend time limits are in place. They are asked to reference the website or functionality where those mechanisms are found. Assess how students identify mechanisms to stop, adjust, or extend time limits and how students analyze if they have been coded accessibly.

Explain the use of HTML and WAI-ARIA to provide users with notifications about errors, successes, or any other warning resulting from input and interaction by the user.

Learning Outcomes for Topic

Students should be able to:

• explain how and when different methods of notifications benefit people with disabilities
• mark up required form controls using text in their labels or the HTML attribute required
• code information about errors in the main heading of the page, the page title, or via modal dialogs
• mark up associations between error messages and their corresponding form controls using headings, lists, or anchors
• code in-line feedback using messages belonging to specific form controls via labels, icons, or the aria-describedby attribute
• code instant feedback as the user is typing using aria-live regions
• apply different types of validation methods to provide accessible notifications such as specific HTML input types and WAI-ARIA live regions

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of required form controls using the HTML attribute required or some added text in the label. Examples of how to validate required input are provided in the WAI tutorials on Validating required input.
• 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 users are aware of the errors. Examples of how to communicate error messages are provided in the WAI tutorials on Overall feedback.
• Demonstrate the use of mechanisms to provide in-line error messages for form controls, such as using the HTML element label or the WAI-ARIA attribute aria-describedby. Explain that programmatic associations help text-to-speech and mainstream technologies relate error messages to their specific field as users move around. Explain that WAI-ARIA live regions can be used to provide instant feedback as users are typing in a form control or as validation outputs appear so that people using screen readers can understand the information provided. Examples of how to code in-line error messages are provided in the WAI tutorials on In-line feedback.
• Demonstrate the use of some common HTML5 elements, such as date, time, url, email, or pattern. Explain that they allow users to enter data more reliably and help validation. Examples of how to validate common input are provided in the WAI tutorials on Validating common input.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment:

• Practical — Students are presented with a set of form controls and are asked to code that they are required. Assess how students make use of the HTML attribute required and/or some text in the label of the form control.
• Practical — Students are presented with a set of form control errors and are asked to provide a list of messages that explain such errors. Assess students’ knowledge of how to group and communicate errors in a form control.
• Practical — Students are presented with a set of form controls with errors marked up using color alone. Then they are asked to mark up these error messages using text in the vicinity of each of the form controls. Assess students’ knowledge about how to associate form errors with their corresponding form control.
• Practical — Students are presented with a form submission containing errors. Then they are asked to provide known corrections for the errors if they exist, and to associate them appropriately with each of the form controls. Assess students’ understanding of how to provide suggestions for error correction.
• Practical — Students are presented with a form control that outputs notifications as the user is typing to indicate the strength of a password, and are asked to code accessible notifications. Assess students’ knowledge of live regions to convey notifications.