[Draft] Module 5: Forms and Input Elements
Introduction
Courses based on this module:
- demonstrate use of appropriate code to label and group form controls, as well as to provide instructions and notifications for users to fill in forms
- explain how form structures, labels, instructions, and notifications allow people with disabilities to understand and fill in form controls
Learning Outcomes for Module
Students should be able to:
- label form controls so that they can be understood by users and interpreted by assistive technologies
- group form controls that share a common purpose
- mark up instructions that help understand form controls’ purpose
- notify users of time limits, errors, or successes during and after form completion
- explain how labels, instructions, and notifications allow people with disabilities to navigate and fill in form controls
Competencies
Skills required for this module.
Students
- Prerequisites for Students
- Developing Accessible Content – module 1
- Basic knowledge of:
Instructors
- 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
, andinput
- HTML element
Button
- HTML elements
fieldset
andlegend
- Common input element attributes
- Date, time, and input formats
- In-depth knowledge of:
Topics to Teach
Optional topics to achieve the learning outcomes.
Topic: Form Labels
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 HTML element
label
and attributefor
- code labels and input fields associations using the HTML attribute
for
, the HTML elementtitle
, or the WAI-ARIA attributesaria-label
oraria-labelledby
- mark up several form controls that share the same purpose using the HTML elements
fieldset
andlegend
- 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 thelabel
element and its content around the form control. Explain explicit associations by means of thefor
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 HTML attributetitle
, the WAI-ARIA attributesaria-label
oraria-labelledby
. Explain that use ofplaceholder
for labels should be avoided as its value disappears once the user has entered a value. 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 thelegend
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.
- 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 attributefor
, the HTML attributetitle
, or the WAI-ARIA attributesaria-label
, andaria-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
andlegend
. - 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 users with mobility impairments.
Topic: Form Instructions
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 attributesaria-labelledby
oraria-describedby
- summarize related requirements for authors and designers to provide clear form instructions
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
orplaceholder
, or the WAI-ARIA attributesaria-label
, oraria-labelledby
. Mention thattitle
andplaceholder
may not be well supported by some assistive technologies. Explain that the value of theplaceholder
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 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:
- 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.
Topic: Time Limits
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.
- 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.
Topic: Notifications
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 attributearia-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
, orpattern
. 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.
- 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 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.
Ideas to Assess Knowledge for Module
Optional ideas to support assessment.
- Short answer questions — Students are guided to use mechanisms that assistive technologies provide to move to next and previous form control or to show all form controls in an isolated list. Assess students’ knowledge of mechanisms of assistive technologies to move to next and previous form control.
- Portfolio — Students add a set of form controls to the website they are building. Assess how students identify, label, and group form controls as well as how they provide feedback based on user input.
Teaching Resources
Suggested resources to support your teaching:
- WAI Web accessibility Tutorials — Shows how to develop web content that is accessible to people with disabilities.
- How People with Disabilities Use the Web — Provides stories of people with disabilities using the Web; describes types of disabilities and some of the barriers that people encounter using the Web; and introduces types of assistive technologies and adaptive strategies that some people use.
- HTML specification — The core markup language for the web, HTML, as well as numerous APIs like Web Sockets, Web Workers, localStorage, etc.
- WCAG — Address accessibility of web content on desktops, laptops, form controls, and mobile devices.
- WAI ARIA — Provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications.
- Notifications and Feedback — Is one of the Web accessibility perspectives videos that show accessibility features and how they impact people with disabilities.