[Draft] Module 5: Forms and Input Elements

• Prerequisites for Students
• Developing Accessible Content – module 1
• 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 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 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 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 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

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 use of other explicit associations using the WAI-ARIA attributes aria-labeled or aria-labelledby. Examples on 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 on 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 use of the tab key to move through different form controls. Demonstrate use of the arrow keys to select options from combo boxes or lists.
• Demonstrate 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 users with mobility impairments or low vision users can click the label element to activate a specific form control 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 controls using HTML. Assess students’ knowledge of the different HTML ways to label form controls.
• Practice — 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.
• 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 controls by clicking their labels. Assess how students understand the relevance of proper click targets for users 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
• list requirements for content authors to write form instructions, such as providing examples of the expected input

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 on 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 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 examples on 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 on 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:

• Practice — Students are presented with overall instructions for a set of form controls and are asked to code them appropriately. Assess students’ knowledge about different ways to code overall instructions.
• Practice — Students are presented with a set of in-line instructions for form controls 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.

• 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 on 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.
• Practice — 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.

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

Learning Outcomes for Topic

Students should be able to:

• 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

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 on 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 on how to communicate error messages are provided in the WAI tutorials on Overall feedback.
• Demonstrate 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 screen reader users can understand the information provided. Examples on how to code in-line error messages are provided in the WAI tutorials on In-line feedback.
• Demonstrate 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 on 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.

• Practice — 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.
• Practice — 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.
• Practice — 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.
• Practice — 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.