This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

[Draft] Module 7: Forms and Widgets [WIP]

Introduction

Courses based on this module should:

Learning Outcomes for Module

Students should be able to:

Competencies

Skills required for this module:

Students

Instructors

Topics to Teach

Topics to achieve the learning outcomes:

Topic: Naming, Grouping, and Placement

Refer back to Designer Module 2: Information Design: Labels and Instructions. Show examples of labels and instructions in the context of forms and other complex widgets.

Show examples of different ways to group large amounts of selectable data. For example, filtering out data into smaller pieces to better handle data, and enable mechanisms to type the first letters of their desired option to select data more efficiently.

Learning outcomes for Topic

Students should be able to:

  • design user experiences that consider position, appearance, and naming for labels and instructions
  • define visual and non-visual instructions about which input fields are required
  • define clear instructions about changes in context before the component that originates such changes
  • define overall instructions about existing time limits in a form and about how to adjust them, extend them, and turn them off
  • define clear instructions about the current step and about the total number of steps involved in a multi-step form
  • identify related requirements for developers to provide semantics for labels and instructions appropriately

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Demonstrate how labels for form fields are placed differently depending on the components, the language, and the user expectations. For example, labels for edit boxes are placed to the left of the field or above it in left-to-right languages, and to the right of the field or below it in right-to-left languages. Labels for radio buttons are placed to the right of the field or below it in left-to-right languages, or to the left of the field or above it in right-to-left languages.
  • Show examples of different form fields and widgets, for example buttons, links, lists, and grids, across web pages and rich applications. Emphasize that each should have a clear name that allows to identify its purpose. For reference on how to provide names for different form elements and custom widgets, see technique G197: Using labels, names, and text alternatives consistently for content that has the same functionality.
  • Show examples of required and non-required form fields. Explain that instructions for which of the fields is required should be provided using several mechanisms, including textual and visual cues.
  • Present examples of time limits, such as those warning about session expirations. Explain that instructions need to be provided so that users are aware of the time limits, and mechanisms need to be implemented to stop, adjust, or extend time limits. Explain that defining and providing the instructions is a designers’ responsibility, whereas implementing mechanisms to stop, extend, or adjust time limits is a responsibility shared with the developer.
  • Show examples of multi-step forms. Explain that overall instructions should be provided about the current step in a form and about the total number of steps involved.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Present students with a form and ask them to define labels for each of the fields. Assess how students provide clear and descriptive names for each of the form fields.
  • Practical — Give students an application and ask them to provide names for each of the application subsections. Assess how students identify application subsections and provide clear and understandable names for each.
  • Practical — Give students a form and ask them to provide the necessary instructions for users to understand each of the fields and fill in the form. Assess how students provide clear and concise instructions.

Topic: Error Prevention

Learning Outcomes for Topic

Students should be able to:

  • define error messages in the page title or before the form control that:
    • identify the fields in error
    • describe the cause of the error
    • provide suggestions to correct the error where possible

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Show examples of different types of error messages, including overall information about errors, specific information about each of the fields in error, and suggestions for correcting such errors when possible. Show examples of user interfaces with and without such error messages and explain that these enable several groups of people with disabilities to better interact and understand the contents.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Give students an interface containing errors and ask them to provide an overall descriptive message informing that there are submission errors. Assess how students provide overall informative messages when there are submission errors
  • Practical — Present students with a form field submission containing errors and ask them to provide notifications about each of the wrongly submitted field, together with suggestions for corrections when possible. Assess how students provide appropriate error messages for wrongly submitted fields and how they provide suggestions for corrections when possible.

Topic: Notifications

Show examples of notification messages. Explain that they need to be distinguishable by all users, including through visual cues and programmatically.

Show examples of text and visual notifications for error messages and other types of feedback for forms and widgets. Explain that notifications may have different levels of priority when in the context of a complex application. Explain that defining such levels of priority and which types of notifications each of these levels should contain is a designers’ responsibility whereas implementing these levels is a developers’ responsibility.

Learning Outcomes for Topic

Students should be able to:

  • define meaningful and descriptive notification messages, for example:
    • on input (to communicate if the provided input is valid or invalid
    • on task completion (to communicate success or failure of a specific task)
  • design user experiences to queue and prioritize application notifications coming from different components
  • design user experiences to store and check notifications that disappear after a period of time at the users’ pace
  • identify related requirements for developers to implement notifications

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

  • Show examples of different mechanisms to communicate notifications, such as through text messages, semantic relations, haptic and audio feedback, and popup windows.
  • Show examples of overlapping notifications in the context of complex applications. Explain that some users may find it daunting to process several notifications at the same time, so a mechanism needs to be defined that allows to prioritize notifications based on their relevance. Explain that defining mechanisms to prioritize notifications based on their relevance is a designers’ responsibility, whereas implementing the mechanisms is a developers’ responsibility.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

  • Practical — Give students a form field that validate on user input and ask them to provide descriptive validation messages. Assess how students provide clear validation messages for fields that validate on user input.
  • Practical — Give students an application with notifications coming from different view and ask them to define mechanisms to queue and prioritize such notifications. Assess how students prioritize and organize notifications coming from different views.

Ideas to Assess Knowledge for Module

Optional ideas to assess knowledge:

Portfolio — Students design a form. Assess how students consider placement, structure, labels, instructions, and notifications when designing accessible forms.

Teaching Resources

Suggested resources to support your teaching:

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.