[Draft] Module 5: Forms

Introduce several strategies for some user groups to navigate, understand, and fill in form fields.

Learning Outcomes for Topic

Students should be able to:

• Understand the following user strategies to interact with form fields:
  • The tab key or specific keystrokes to move from one form field to the other.
  • Larger targets to interact with form fields.
  • Consistent identification and instructions to understand form fields’ purpose.

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Demonstrate how a set of form elements can be navigated using the keyboard only. Use the tab key to move through different form elements. Use the arrow keys to select options from combo boxes or lists.
• Demonstrate use of the tab key together with a screen reader to complete a set of form elements. Emphasize that screen reader users may only detect information present in the form labels as they are navigating in focus mode. Provide examples of dedicated screen reader keystrokes that they can use to navigate to specific types of form controls, such as e for edit boxes, x for check boxes, or a for radio buttons.
• 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.
• Refer to common pitfalls when completing form elements. For example, in which format a date should be entered or how a phone number should be written. Explain that instructions to complete form fields are essential for users with cognitive disabilities and benefit all users.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students are asked to complete a set of form fields using the keyboard only and a screen reader. Assess students use of the tab and arrow keys and understanding of key combinations of screen readers to move to specific types of form controls.
• Practice — Students interact with a set of form fields and make sure they can click their labels to activate them. Assess how students understand the relevance of proper click targets for users with mobility impairments.

Present strategies to label form controls and make them understandable.

Learning Outcomes for Topic

Students should be able to:

• Label form fields with the label element.
• Associate labels with input fields with the for attribute.
• Group several form fields that share the same purpose with the fieldset and legend elements.
• Provide additional instructions with the title, aria-label, aria-labelledby, and aria-describedby attributes.

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Introduce the label element and provide examples of its usage. Mention that there are explicit and implicit associations. Explain that an implicit association can be achieved by wrapping the label element and its content around the form control.
• Introduce explicit associations by means of the for attribute. Explain that its value must be a unique id reference of the form control that the label refers to.
• Introduce 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 piece of information (label) they share in common.
• Introduce additional means to provide labels when it is not possible to use visible text. For example, the title, the aria-label, or aria-labelledby attributes. Mention that the 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.
• Explain that labeling and associating form fields is a WCAG requirement under success criteria 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, and 3.3.2 Labels or Instructions.

Ideas to Assess Knowledge

Optional ideas to support assessment.

• Practice — Students are presented with a group of form controls and are asked to provide a label. Assess how students make use of the label element and the for attribute, as well as the title, aria-label, and aria-labelledby attributes where necessary.
• 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 fieldset and legend elements.

Present several HTML5 input types and additional techniques that help users enter information in the expected type and format.

Learning Outcomes for Topic

Students should be able to:

• Markup required form fields with text or the required attribute.
• Validate specific types of data with their corresponding HTML5 input type. For example, date, time, url, or email.
• Validate common regular expressions with the pattern attribute.

Teaching Ideas

Optional ideas to teach the learning outcomes:

• Indicate that the required element denotes that a form control is required. Comment that it is well supported by assistive technologies. Emphasize that it is also good practice to include a textual indicator in the label itself, such as the word “required” or an asterisk (*), so that all users are aware.
• Present some common HTML5 elements that help validation and allow users to enter data more reliably.
• Explain that the pattern attribute together with regular expressions serve to validate common ways of entering information, such as country codes, phone numbers, or dates.
• Explain that these are WCAG requirements under success criteria 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, and 3.3.2 Labels or Instructions.

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students are presented with a set of form fields and are asked to programmatically convey those which are required both visually and programmatically. Assess how students make use of the required element and/or some text in the label of the form control.
• Practice — Students are presented with a set of edit boxes. Students are asked to choose an HTML5 input type that serves the specific purpose of each of the fields. Assess students’ knowledge of HTML5 form input types.
• Practice — Students are presented with form fields that collect phone numbers of a given country and dates of birth. Students are asked to use the pattern element and common regular expressions. Assess how students use the pattern attribute together with regular expressions to validate the expected input format.

Introduce strategies to inform users about successes, errors, or any other warning messages resulting from their input or from a time limit.

Learning Outcomes for Topic

Students should be able to:

• Notify users of existing time limits and provide mechanisms to stop or extend them.
• Provide information about the amount of errors in the main heading of the page, the page title, or via modal dialogs.
• Identify error messages with their corresponding form controls with headings, lists, or anchors.
• Provide inline feedback through messages belonging to specific form controls via labels, icons, or the aria-describedby attribute.
• Provide instant feedback as the user is typing with 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.
• 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.
• Explain that it is good practice to use lists and list items to group error messages. Add that the messages can link to their corresponding form field by using anchors.
• Introduce mechanisms to provide inline error messages for form fields 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.
• Explain that WAI-ARIA live regions can be used to provide instant feedback as users are typing in a form field or as validation outputs appear so that screen reader users can understand the information provided.
• Explain that these are WCAG requirements under success criteria .

Ideas to Assess Knowledge for Topic

Optional ideas to support assessment.

• Practice — Students are presented with a page where there are form fields 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 field.
  • Provide inline instructions in the corresponding form field that users will read once the form field gets focused.